1 JavaScript简介

JavaScript

互联网上最流行的脚本语言，可用于HTML和web、服务器、PC、平板、移动设备等

一种轻量级的编程语言

可插入HTML的编程代码，插入HTML后可由所有现代浏览器执行

例：JavaScript直接写入HTML输入流

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
    
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

<script type="text/javascript" charset="utf-8">
    document.write("<h1>JS输出流写入HTML1号标题</h1>")
    document.write("<h3>JS输出流写入HTML3号标题</h3>")
</script>
    
</body>
</html>

JS响应事件：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>
<button type="button" onclick="alert('点我试试')">111</button>
</body>
</html>

JS改变段落内容：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>
    
    <p id="change">
        这是一个引颈待屠的段落！
    </p>
    
    <button type="button" onclick="functionCg()">变！</button>
    
    <script type="text/javascript" charset="utf-8">
   function    functionCg(){
        x = document.getElementById("change");
        x.innerHTML = "haha";
    }    
    </script>
</body>
</html>

JS控制开关灯：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>
    <script type="text/javascript" charset="utf-8">
          // element.src="/statics/images/course/pic_bulboff.gif";
          // element.src="/statics/images/course/pic_bulbon.gif";
        //   src="/statics/images/course/pic_bulboff.gif"
        function cglt(){
            x = document.getElementById("light");
            if(x.src.match("/statics/images/course/pic_bulboff.gif")){
                x.src = "/statics/images/course/pic_bulbon.gif";
            }else{
                x.src = "/statics/images/course/pic_bulboff.gif";
            }
        }
    </script>
    
    <img id="light" src="/statics/images/course/pic_bulboff.gif" alt="这就尴尬了！" 
    onclick="cglt()" width="100px" height="100px"/>
    
    
</body>
</html>

JavaScript

猜你喜欢