HTML script

JavaScript makes HTML pages more dynamic and interactive.

HTML <script> tag

##<script> tag is used to define client-side scripts, such as JavaScript. The

<script> element can contain script statements or point to an external script file through the src attribute.

JavaScript is most commonly used for image manipulation, form validation, and dynamic content updating.


Example

The following script will output "How are you?" to the browser:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<script>
    document.write("你好吗?")
</script>
</body>
</html>

Program running result:

How are you?

To learn more about Javascript tutorials, check out JavaScript Tutorials!


##HTML<noscript> tag The <noscript> tag provides alternative content when scripting is not available, such as when scripting is disabled in the browser, or when the browser does not support client-side scripting. The

<noscript> element can contain all elements found within the body element of a normal HTML page.

Only when the browser does not support scripts or scripts are disabled, the content in the <noscript> element will be displayed:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<script>
    document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容(文本)来替代。</p>
</body>
</html>

Program running result:

4.jpg


JavaScript experience (from JavaScript tutorial on this site)JavaScript example code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<p>
    JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落。</p>");
</script>
<p>
    您只能在 HTML 输出流中使用 <strong>document.write</strong>。
    如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
</body>
</html>

Program execution result:

1.jpg


JavaScript event response:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h1>我的第一个 JavaScript </h1>
<p id="demo">
    JavaScript 可以触发事件,就像按钮点击。</p>
<script>
    function myFunction()
    {
        document.getElementById("demo").innerHTML="Hello JavaScript!";
    }
</script>
<button type="button" onclick="myFunction()">点我</button>
</body>
</html>

Run the program and see


JavaScript processing HTML style:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
    JavaScript 能改变 HTML 元素的样式。
</p>
<script>
    function myFunction()
    {
        x=document.getElementById("demo") // 找到元素
        x.style.color="#ff0000";          // 改变样式
    }
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>


Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改变 HTML 元素的样式。 </p> <script> function myFunction() { x=document.getElementById("demo") // 找到元素 x.style.color="#ff0000"; // 改变样式 } </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
submitReset Code