HTML BASIC
HTML Introduction
HTML Getting Started
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Links
HTML Text Formatting
HTML Styles
HTML Images
HTML Tables
HTML Lists
HTML Forms
HTML Iframes
HTML ADVANCED
HTML Doctypes
HTML Layout
HTML Head
HTML Meta
HTML Scripts
HTML Entities
HTML URL
HTML URL Encode
HTML Validation
HTML5 FEATURES
HTML5 New Input Types
HTML5 Canvas
HTML5 SVG
HTML5 Audio
HTML5 Video
HTML5 Web Storage
HTML5 Application Cache
HTML5 Web Workers
HTML5 SSE
HTML5 Geolocation
HTML5 Drag & Drop
HTML Scripts - Html5 基础教程 - IT书包
网站首页
HTML Scripts
### Working with Client-side Script Client-side scripting refers to the type of computer programs that are executed by the user's web browser. JavaScript (JS) is the most popular client-side scripting language on the web. The `<script>` element is used to embed or reference JavaScript within an HTML document to add interactivity to web pages and provide a significantly better user experience. Some of the most common uses of JavaScript are form validation, generating alert messages, creating image gallery, show hide content, DOM manipulation, and many more. ### Adding JavaScript to HTML Pages JavaScript can either be embedded directly inside the HTML page or placed in an external script file and referenced inside the HTML page. Both methods use the `<script>` element. ### Embedding JavaScript To embed JavaScript in an HTML file, just add the code as the content of a `<script>` element. The JavaScript in the following example write a string of text to a web page. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Embedding JavaScript</title> </head> <body> <div id="greet"></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script> </body> </html> ``` > Tip: Ideally, script elements should be placed at the bottom of the page, before the closing body tag i.e. `</body>`, because when browser encounters a script it pauses rendering the rest of the page until it parses the script that may significantly impact your site performance. ### Calling External JavaScript File You can also place your JavaScript code into a separate file (with a `.js` extension), and call that file in your HTML document through the `src` attribute of the `<script>` tag. This is useful if you want the same script available to multiple documents. It saves you from repeating the same task over and over again and makes your website much easier to maintain. The following example demonstrates how to link external JS file in HTML. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Linking External JavaScript</title> </head> <body> <div id="greet"></div> <script src="hello.js"></script> </body> </html> ``` > Note: When the src attribute is specified, the `<script>` element must be empty. This simply means that you cannot use the same `<script>` element to both embed the JavaScript and to link to an external JavaScript file in an HTML document. > Tip: JavaScript files are normal text files with `.js` extension, such as `"hello.js"`. Also, the external JavaScript file contains only JavaScript statements; it does not contain the `<script>...</script>` element like embedded JavaScript. ### The HTML noscript Element The `<noscript>` element is used to provide an alternate content for users that have either disabled JavaScript in their browser or have a browser that doesn't support client-side scripting. This element can contain any HTML elements, aside from `<script>`, that can be included in the `<body>` element of a normal HTML page. Let's check out an example: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Noscript Demo</title> </head> <body> <div id="greet"></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script> <noscript> <p>Oops! This website requires a JavaScript-enabled browser.</p> </noscript> </body> </html> ``` > Note: The content inside the noscript element will only be displayed if the user's browser doesn't support scripting, or scripting is disabled in the browser.
上一篇：
HTML Meta
下一篇：
HTML Entities
