js笔记
JavaScript
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
实例：
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <h1>my first javascript program.</h1> <script> document.write("<h1>this is a title.</h1>") </script> <p id="demo">this is a paragraph.</p> <button type="button" onclick="displayDate()">显示日期</button> </body> </html> <!DOCTYPE html> <html> <meta charset="utf-8"> <body> <h1>my first javascript program.</h1> <script> document.write("<h1>this is a title.</h1>") </script> <button type="button" onclick="alert('欢迎!')">点我</button> </body> </html> <!DOCTYPE html> <html> <meta charset="utf-8"> <body> <script> function changeImage() { element=document.getElementById("myimage"); if (element.src.match("bulbon")) { element.src="image/pic_bulboff.gif"; } else { element.src="image/pic_bulbon.gif" } } </script> <img id="myimage" onclick="changeImage()" src="image/pic_bulboff.gif" width="100" height="100"> <p>点击灯泡可以关闭或打开这盏灯</p> </body> </html> <!DOCTYPE html> <html> <body> <p id="demo">this is some text.</p> <script> function changeText() { x=document.getElementById("demo"); x.style.color="#ff0000"; } </script> <button type="button" onclick="changeText()" >click me</button> </body> </html> <!DOCTYPE html> <html> <meta charset="utf-8"> <body> <input id="demo" type="text"> <script> function myFunction() { var x=document.getElementById("demo").value; if (x==""||isNaN(x)) { alert("不是数字"); } } </script> <button type="button" onclick="myFunction()">click here</button> </body> </html>
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中
可以把脚本保存到外部文件中,外部脚本不能包含 <script> 标签。
document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "Paragraph changed." 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
作用域：
变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> //var carname="volvo"; myFunction(); document.getElementById("demo").innerHTML="I can display "+window.carname; function myFunction() { carname="volvo"; //document.getElementById("demo").innerHTML="I can display "+ carname; } </script> </body> </html>
事件：
<!DOCTYPE html> <html> <body> <button onclick="this.innerHTML=Date();">the time is?</button><br><br> <button onclick="displayDate()">the time is?</button> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
<!DOCTYPE html> <html> <body> <p id="demo"></p> <button onclick="myFunction()">fuck me </button> <script> function myFunction() { var x; var time=new Date().getHours(); if (time<10) { x="good morning"; } else if(time>10 && time<20) { x="good day" } else { x="good evening" } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
switch：
<!DOCTYPE html> <html> <body> <button onclick="today()">fuck me</button> <p id="demo"></p> <script> function today() { var x; var day=new Date().getDay(); switch(day) { case 0: x="Today it's sunday"; break; case 1: x="Today it's monday"; break; case 2: x="Today it's tuesday"; break; case 3: x="Today it's wednesday"; break; case 4: x="Today it's thursday"; break; case 5: x="Today it's friday"; break; case 6: x="Today it's saturday"; break; default: x="looking forward to the weekend"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
break 和 continue：
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
<!DOCTYPE html> <html> <body> <script> var x=" ",i=0; for(i=0;i<=10;i++) { if(i==3) continue; x=x+"the number is "+ i +"<br>"; } document.write(x); </script> </body> </html>
正则：
<html> <body> <button onclick="myFunction()">click me</button> <p id="demo">visit w3cschool!</p> <script> function myFunction() { var str="visit w3cschool!"; //var n=str.search(/w3cschool/i); var res=str.replace("w3cschool","google"); document.getElementById("demo").innerHTML=res; } </script> </body> </html> <!DOCTYPE html> <html> <body> <script> //var patt1=new RegExp("e"); document.write(/e/.exec("The best things in life are free")); </script> </body> </html>
异常：
<!DOCTYPE html> <html> <meta charset="utf-8"> <body> <script> var txt=""; function message() { try { alert("welcome guest!"); } catch(err) { txt="本页有一个错误。\n\n"; txt+="错误描述："+err.message+"\n\n"; txt+="点击确定继续。\n\n"; alert(txt); } } </script> <input type="button" value="查看消息" onclick="message()"> </body> </html> <!DOCTYPE html> <html> <body> <script> function myFunction() { try { var x=document.getElementById("demo").value; if(x=="") throw "empty"; if(isNaN(x)) throw "not a number"; if(x>10) throw "too high"; if (x<5) throw "too low"; if (5<=x<=10) throw "right"; } catch(err) { var y=document.getElementById("mess"); y.innerHTML="error: "+err+"."; } } </script> <p>please input a number between 5 and 10:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">test input</button> <p id="mess"></p> </body> </html>
javascript:void(0) 含义:
我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？
javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
href="#"与href="javascript:void(0)"的区别:
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<a href="javascript:void(alert('warning!!!'))">click me</a>
<a href="#pos">click me</a>
<br><br><br><p id="pos">bottom</p>
<script>
</script>
</body>
</html>
