JavaSpript快速入门

布满荆棘的人生 2023-06-29 10:41 4阅读 0赞

1、JavaScript基础知识  
（1）JavaScript注释  
单行注释：//（快捷键ctrl+/）  
多行注释：/*…*/（快捷键ctrl+shift+/）  
（2）JavaScript数据类型  
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。  
引用数据类型：对象(Object)、数组(Array)、函数(Function)。  
①JavaScript对象

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>JavaScript的使用</title> 
    </head>
    <body>
    
    <p>创建 JavaScript 对象。</p>
    <p id="demo"></p>
    <script>
    var person = { firstName:"John", lastName:"Doe", age:18, eyeColor:"blue"};
    document.getElementById("demo").innerHTML =
    	person.firstName + " 现在 " + person.age + " 岁.";
    </script>
    
    </body>
    </html>

创建直接对象

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript的使用</title>
    </head>
    <body>
    
    <script>
    var person=new Object();
    person.firstname="John";
    person.lastname="Doe";
    person.age=50;
    person.eyecolor="blue"; 
    document.write(person.firstname + " is " + person.age + " years old.");
    </script>
    
    </body>
    </html>

替代语法（使用对象 literals）：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript的使用</title>
    </head>
    <body>
    
    <script>
    person={ firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
    document.write(person.firstname + " is " + person.age + " years old.");
    </script>
    
    </body>
    </html>

使用对象构造函数

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript的使用</title>
    </head>
    <body>
    
    <script>
    function person(firstname,lastname,age,eyecolor){ 
    	this.firstname=firstname;
    	this.lastname=lastname;
    	this.age=age;
        this.eyecolor=eyecolor;
    }
    myFather=new person("John","Doe",50,"blue");
    document.write(myFather.firstname + " is " + myFather.age + " years old.");
    </script>
    
    </body>
    </html>

JavaScript Date（日期）对象  
使用Date()方法获取当日的日期；  
使用getFullYear()获取年份；  
使用setFullYear()设置具体的日期

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript的使用</title>
    </head>
    <body>
    
    <p id="demo">单击按钮显示修改后的年月日。</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){ 
    	var d = new Date();
    	d.setFullYear(2020,10,3);
    	var x = document.getElementById("demo");
    	x.innerHTML=d;
    }
    </script>
    <p>记住 JavaScript 月数是从0至11。10是11月。</p>
    </body>
    </html>

使用getDay()和数组来显示星期，而不仅仅是数字，示例如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript的使用</title>
    </head>
    <body>
    
    <p id="demo">单击按钮显示今天周几</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){ 
    	var d = new Date();
    	var weekday=new Array(7);
    	weekday[0]="周日";
    	weekday[1]="周一";
    	weekday[2]="周二";
    	weekday[3]="周三";
    	weekday[4]="周四";
    	weekday[5]="周五";
    	weekday[6]="周六";
    	var x = document.getElementById("demo");
    	x.innerHTML=weekday[d.getDay()];
    }
    </script>
    
    </body>
    </html>

如何在网页上显示一个钟表，使用Display a clock

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript的使用</title>
    <script>
    function startTime(){ 
    	var today=new Date();
    	var h=today.getHours();
    	var m=today.getMinutes();
    	var s=today.getSeconds();// 在小于10的数字前加一个‘0’
    	m=checkTime(m);
    	s=checkTime(s);
    	document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    	t=setTimeout(function(){ startTime()},500);
    }
    function checkTime(i){ 
    	if (i<10){ 
    		i="0" + i;
    	}
    	return i;
    }
    </script>
    </head>
    <body onload="startTime()">
    	
    <div id="txt"></div>
    	
    </body>
    </html>

②JavaScript带参函数

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>JavaScript的使用</title> 
    </head>
    <body>
    
    <p>本例调用的函数会执行一个计算，然后返回结果：</p>
    <p id="demo"></p>
    <script>
    function myFunction(a,b){ 
    	return a*b;
    }
    document.getElementById("demo").innerHTML=myFunction(4,3);
    </script>
    
    </body>
    </html>

（3）JavaScript保留关键字  
在 JavaScript 中，一些标识符是保留关键字，不能用作变量名或函数名。  
详细情况可访问地址：https://www.runoob.com/js/js-reserved.html即可  
（4）JavaScript this关键字  
面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。  
在方法中，this 表示该方法所属的对象。  
如果单独使用，this 表示全局对象。  
在函数中，this 表示全局对象。  
在函数中，在严格模式下，this 是未定义的(undefined)。  
在事件中，this 表示接收事件的元素。  
类似 call() 和 apply() 方法可以将 this 引用到任何对象。  
2、JavaScript输出  
JavaScript 可以通过不同的方式来输出数据  
使用 window.alert() 弹出警告框。  
使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。  
使用 console.log() 写入到浏览器的控制台。  
3、JavaScript的使用  
（1）JavaScript的输出  
向 id=“demo” 的 HTML 元素输出文本 “hello，独爱空城梦”

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>JavaScript的使用</title> 
    </head>
    <body>
    
    <h1>我的网页</h1>
    <p id="demo">我的第一个段落。</p>
    <script>
    document.getElementById("demo").innerHTML = "hello，独爱空城梦";
    </script>
    
    </body>
    </html>

（2）当点击按钮，两个元素值会改变

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>JavaScript的使用</title> 
    </head>
    <body>
    
    <h1>我的 Web 页面</h1>
    <p id="myPar">我是一个段落。</p>
    <div id="myDiv">我是一个div。</div>
    <p>
    <button type="button" onclick="myFunction()">点击这里</button>
    </p>
    <script>
    function myFunction(){ 
    	document.getElementById("myPar").innerHTML="独爱空城梦";
    	document.getElementById("myDiv").innerHTML="以后的以后，你是谁的某某某";
    }
    </script>
    <p>当点击上面的按钮时，两个元素会改变。</p>
    
    </body>
    </html>

4、JavaScript作用域  
（1）局部变量  
变量在函数内声明，变量为局部作用域。局部变量：只能在函数内部访问。

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>JavaScript的使用</title> 
    </head>
    <body>
    
    <p>局部变量在声明的函数外不可以访问。</p>
    <p id="demo"></p>
    <script>
    myFunction();
    document.getElementById("demo").innerHTML = "carName 的类型是：" +  typeof carName;
    function myFunction() 
    { 
        var carName = "Volvo";
    }
    </script>
    
    </body>
    </html>

（2）全局变量  
变量在函数外定义，即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>JavaScript的使用</title> 
    </head>
    <body>
    
    <p>全局变量在任何脚本和函数内均可访问。</p>
    <p id="demo"></p>
    <script>
    var carName = "Volvo";
    myFunction();
    function myFunction() 
    { 
        document.getElementById("demo").innerHTML =
    		"我可以显示 " + carName;
    }
    </script>
    
    </body>
    </html>

5、JavaScript事件  
（1）HTML事件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70]  
（2）JavaScript能做什么  
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作；如页面加载或关闭时触发事件，用户点击按钮执行动作，验证用户输入内容的合法性等等。  
（3）JavaScript字符串  
转义字符转义的特殊字符  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 1]  
（4）JavaScript操作符  
typeof操作符，可查看JavaScript变量的数据类型，null、数组，对象均为object  
constructor属性，返回所有JavaScript变量的构造函数  
（5）JavaScript正则表达式  
正则表达式是由一个字符序列形成的搜索模式，可用于所有文本搜索和文本替换的操作  
在JavaScript中，正则表达式通常用于两个字符串方法：search()和replace()  
使用ReExp对象，如test()和exec()  
test()用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回true，否则返回false

exec()用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果，如果未找到匹配，则返回值为null  
6、JavaScript异常  
try 语句测试代码块的错误。  
catch 语句处理错误。  
throw 语句创建自定义错误。  
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。  
语法如下：

try { 
        ...    //异常的抛出
    } catch(e) { 
        ...    //异常的捕获与处理
    } finally { 
        ...    //结束处理
    }

7、JavaScript表单  
（1）判断表单字段值是否存在，如果不存在，就弹出信息，阻止表单提交

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script>
    function validateForm() { 
        var x = document.forms["myForm"]["fname"].value;
        if (x == null || x == "") { 
            alert("名字为空，需重新输入名字！");
            return false;
        }
    }
    </script>
    </head>
    <body>
    
    <form name="myForm" action="login.html" 
    onsubmit="return validateForm()" method="post">
    名字: <input type="text" name="fname">
    <input type="submit" value="提交">
    </form>
    
    </body>
    </html>

（2）表单字段的值为空，required属性会阻止表单提交

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <form action="demo_form.php" method="post">
      <input type="text" name="fname" required="required">
      <input type="submit" value="提交">
    </form>
    
    <p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>
    
    </body>
    </html>

![在这里插入图片描述][20200112214858820.png]  
（3）E-mail验证

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript的使用</title>
    </head>
    <head>
    <script>
    function validateForm(){ 
    	var x=document.forms["myForm"]["email"].value;
    	var atpos=x.indexOf("@");
    	var dotpos=x.lastIndexOf(".");
    	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){ 
    		alert("不是一个有效的 e-mail 地址");
      		return false;
    	}
    }
    </script>
    </head>
    <body>
    	
    <form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
    Email: <input type="text" name="email">
    <input type="submit" value="提交">
    </form>
    	
    </body>
    </html>

（4）JavaScript验证API  
约束验证DOM方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 2]  
使用checkValidity()方法验证输入信息是否合法，不合法返回错误信息

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <p>输入数字并点击验证按钮:</p>
    
    <input id="id1" type="number" min="100" max="300" required>
    <button onclick="myFunction()">验证</button>
    
    <p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() { 
        var inpObj = document.getElementById("id1");
        if (inpObj.checkValidity() == false) { 
            document.getElementById("demo").innerHTML = inpObj.validationMessage;
        } else { 
            document.getElementById("demo").innerHTML = "输入正确";
        }
    }
    </script>
    
    </body>
    </html>

约束验证DOM属性  
![在这里插入图片描述][20200112220658785.png]  
Validity属性  
input元素的validity属性包含一系列关于validity数据属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 3]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <p>输入数字并点击验证按钮:</p>
    
    <input id="id1" type="number" max="100">
    <button onclick="myFunction()">验证</button>
    
    <p>如果输入的数字大于 100 ( input 的 max 属性), 会显示错误信息。</p>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() { 
        var txt = "";
        if (document.getElementById("id1").validity.rangeOverflow) { 
            txt = "输入的值太大了";
        } else { 
            txt = "输入正确";
        }
        document.getElementById("demo").innerHTML = txt;
    }
    </script>
    
    </body>
    </html>

8、JavaScript其他  
（1）JavaScript let和const  
let声明的变量只在let命令所在的代码块内有效  
const声明一个只读的常量，一旦声明，常量的值就不能改变  
（2）JavaScript JSON  
JSON 是用于存储和传输数据的格式。  
JSON 通常用于服务端向网页传递数据 。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript的使用</title>
    </head>
    <body>
    
    <h2>为 JSON 字符串创建对象</h2>
    <p id="demo"></p>
    <script>
    //首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：
    var text = '{ "sites" : [' +
    	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
    	'{ "name":"Google" , "url":"www.google.com" },' +
    	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    //然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象: 
    obj = JSON.parse(text);
    //最后，在你的页面中使用新的 JavaScript 对象：
    document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
    </script>
    
    </body>
    </html>

扩展：  
![在这里插入图片描述][20200113213844770.png]  
（3）JavaScript:void(0)  
JavaScript:void(0)中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。  
扩展：  
href="\#"与href="javascript:void(0)"的区别  
\#包含了一个位置信息，默认的锚是\#top 也就是网页的上端。  
而javascript:void(0), 仅仅表示一个死链接。  
在页面很长的时候会使用 \# 来定位页面的具体位置，格式为：\# + id。  
如果你要定义一个死链接请使用 javascript:void(0) 。  
示例如下：

<a href="javascript:void(0);">点我没有反应的!</a>
    <a href="#pos">点我定位到指定位置!</a>
    <br>
    ...
    <br>
    <p id="pos">尾部定位点</p>

（4）JavaScript代码规范  
代码规范通常包括以下几个方面：  
①变量和函数的命名规则  
变量名推荐使用驼峰法来命名，即除第一个单词之外，其他单词首字母大写；  
函数：一条语句通常以分号作为作为结束语  
②空格，缩进，注释的使用规则。  
空格与运算符：通常运算符（±\*、=）前后需要添加空格；  
代码缩进：通常使用4个空格符号来缩进代码块  
③其他常用规范……

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200112195533990.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200112200741765.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA==,size_16,color_FFFFFF,t_70
[20200112214858820.png]: https://img-blog.csdnimg.cn/20200112214858820.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200112220341824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA==,size_16,color_FFFFFF,t_70
[20200112220658785.png]: https://img-blog.csdnimg.cn/20200112220658785.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200112221229474.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA==,size_16,color_FFFFFF,t_70
[20200113213844770.png]: https://img-blog.csdnimg.cn/20200113213844770.png