JavaScript 笔记总结（一）

我不是女神ヾ 2023-02-24 08:13 19阅读 0赞

### 文章目录 ###

*  JavaScript
 *   *   *  JavaScript 语法
         *  函数
         *  对事件的反应
         *  改变 HTML 内容
         *  改变 HTML 图像
         *  改变 HTML 元素的样式
         *  验证输入
         *  JavaScript 输出

# JavaScript #

JavaScript web 开发人员必须学习的 3 门语言中的一门：

1.  **HTML** 定义了网页的内容
2.  **CSS** 描述了网页的布局
3.  **JavaScript** 网页的行为

什么是javascript？

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

脚本可同时位于 HTML 的 和 两个部分，通常的做法是把函数放入 部分，或者放在页面底部。这样就可以把它们放在同一处位置，不会干扰页面的内容

### JavaScript 语法 ###

JavaScript 有多种数据类型：数字，字符串，数组，对象……

使用 **算术运算符** 来计算值
    使用**赋值运算符**给变量赋值
    语句是用分号(;)分隔.
    单行注释是双斜杠 **//** 
    多行注释是  /*     */
    对大小写是敏感的
    使用 Unicode 字符集

JavaScript 使用关键字 **var** 来定义变量， 使用等号来为变量赋值

var length = 16;                  // Number 通过数字字面量赋值
    var points = x * 10;               // Number 通过表达式字面量赋值
    var lastName = "Johnson";             // String 通过字符串字面量赋值
    var cars = ["Saab", "Volvo", "BMW"];       // Array 通过数组字面量赋值
    var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值

### 函数 ###

**引用一个函数** = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
      return a * b;                // 返回 a 乘以 b 的结果
    }

参考来源 [https://www.runoob.com/js/js-syntax.html][https_www.runoob.com_js_js-syntax.html]

### 对事件的反应 ###

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>js</title> 
    </head>
    <body>
    	
    <h1>我的第一个 JavaScript</h1>
    <p>
    JavaScript 能够对事件作出反应。比如点击按钮出现弹窗：
    </p>
    <button type="button" onclick="alert('谢谢点击!')">点我!</button>
    	
    </body>
    </html>

### 改变 HTML 内容 ###

<p id="1">2.JavaScript 能改变 HTML 元素的内容。</p>
    <script> function neirong() { x=document.getElementById("1"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改变内容 } </script>
    <button type="button" onclick="neirong()">点击这里</button>
    
    //document.getElementById("1")是使用 id 属性来查找 HTML 元素的 JavaScript 代码
    //innerHTML = "Hello JavaScript!" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

### 改变 HTML 图像 ###

### 改变 HTML 元素的样式 ###

<p id="2">
    4.JavaScript 能改变 HTML 元素的样式。
    </p>
    <script>
    
     var x=document.getElementById('2');
     var y=document.getElementById('520');	
     var count=0;
        function yangshi(){
            count++
            if(count%2==1){
                x.style.color='#ff0000';
            }else {
                x.style.color='#ffff00';
            }
        }
    </script>
    <button id="520" type="button" onclick="yangshi()">点击这里</button>
    
    ************************************************************************
    <p id="2.5">
    4.JavaScript 能改变 HTML 元素的样式。
    </p>
    <script>
    
     var x=document.getElementById('2.5');
     var count=0;
        x.onclick=function() {
            count++
            if(count%2==1){
                x.style.color='#ff0000';
            }else {
                x.style.color='#ffff00';
            }
        }
    </script>
    
    <button>点击文字变色</button>

### 验证输入 ###

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
    <input id="demo" type="text">
    <script>
    function myFunction()
    {
    	var x=document.getElementById("demo").value;
    	if(x==""||isNaN(x))
    	{
    		alert("不是数字");
    	}
    	else
    	{
    	    alert("是数字");
    	}
    }
    </script>
    <button type="button" onclick="myFunction()">点击这里</button>

关于 getElementById() 方法：[https://www.w3school.com.cn/jsref/met\_doc\_getelementbyid.asp][https_www.w3school.com.cn_jsref_met_doc_getelementbyid.asp]

参考来源：[https://www.runoob.com/js/js-intro.html][https_www.runoob.com_js_js-intro.html]

### JavaScript 输出 ###

*  使用 **window.alert()** 弹出警告框
    
        <script>
        window.alert(60*60*24*30);
        </script>
        //在弹窗里输出 60*60*24*30 的结果
 *  使用 **document.write()** 方法将内容写到 HTML 文档中
    
        <h1>我的第一个 Web 页面</h1>
        <p>我的第一个段落。</p>
        <button onclick="myFunction()">点我</button>
        
        <script>
        function myFunction() {
            document.write(Date());
        }
        </script>
 *  使用 **innerHTML** 写入到 HTML 元素
    
        <p id="1">我的第一个段落</p>
        <p id="2">我的第二个段落</p>
        <p id="3">我的第三个段落</p>
        <script>
        document.getElementById("2").innerHTML = "段落已修改。";
        </script>
        //'我的第二个段落' 替换成 '段落已修改。'
 *  使用 **console.log()** 写入到浏览器的控制台
    
        <script>
        a = 8;
        b = 8;
        c = a * b;
        console.log(c);
        </script>
        //在控制台里(使用F12打开)，console菜单里显示c的值
    
    console不会打断在页面的操作，输出内容后，页面还可以正常操作。如果用alert弹出来内容，那么除非叉掉弹窗，否则页面不能正常操作。
    
    参考来源：[https://www.runoob.com/js/js-output.html][https_www.runoob.com_js_js-output.html]

[https_www.runoob.com_js_js-syntax.html]: https://www.runoob.com/js/js-syntax.html
[https_www.w3school.com.cn_jsref_met_doc_getelementbyid.asp]: https://www.w3school.com.cn/jsref/met_doc_getelementbyid.asp
[https_www.runoob.com_js_js-intro.html]: https://www.runoob.com/js/js-intro.html
[https_www.runoob.com_js_js-output.html]: https://www.runoob.com/js/js-output.html