javascript

xiaoxiao2021-02-28 102

JavaScript

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

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

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

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

JavaScript 很容易学习。

JavaScript：写入 HTML 输出

结果

JavaScript：对事件作出反应（四种）

后面同上，只是不同功能（一定要亲手打一下看一下效果）

JavaScript：改变 HTML 内容

JavaScript：改变 HTML 图像

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

比较运算符

<!DOCTYPE html> <html> <body> <p id="demo"> JavaScript 能改变 HTML 元素的样式。 </p> <script> function testA(){ alert(isNaN(2)); alert(isNaN(3.2)); alert(isNaN("2")); alert("判断================================="); var a=0; alert(a = 2); alert(a == "2"); alert(a === "2"); } </script> <button type="button" οnclick="testA()">点击这里</button> </body> </html> 运算结果： false，false，false，2，true，false

变量：

<html> <body> <script> function testB(){ var a,b,c a=1; b=4; c=a+b; alert(c); } </script> <button type="button" οnclick="testB()">点击这里</button> </body> </html> 运算结果： 5 数组： <html> <body> <script> function testC(){ var i; var cars=new Array(); cars[0]="goupeng"; cars[1]="gouhuo"; cars[2]="goubi"; for(i=0;i<cars.length;i++){ document.write(cars[i]+"</br>"); } } </script> <button type="button" οnclick="testC()">点击这里</button> </body> </html> 运算结果： goupeng，gouhuo，goubi JavaScript的对象： <html> <body> <script> function testA(){ var student={ userId:1, username:"gouhuo", sex:1, password:"21313", flag:1 } alert(student.userId); alert(student.username); alert(student.sex); alert(student.password); alert(student.flag); } </script> <button type="button" οnclick="testA()">点击这里</button> </body> </html> 运算结果： 1，gouhuo，1，21313,，1 switch： <html> <body> <script> function testF(){ var x; var d=new Date().getDay(); switch (d) { 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; } alert(x); } </script> <button type="button" οnclick="testF()">点击这里</button> </body> </html> 运算结果： Today it's Tuesday

JavaScript 支持不同类型的循环： for - 循环代码块一定的次数 for/in - 循环遍历对象的属性 while - 当指定的条件为 true 时循环指定的代码块 do/while - 同样当指定的条件为 true 时循环指定的代码块

for： <html> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; for (var i=0;i<cars.length;i++) { document.write(cars[i] + "<br>"); } </script> </body> </html> for/in： <html> <body> <p>点击下面的按钮，循环遍历对象 "person" 的属性。</p> <button οnclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x; var txt=""; var person={fname:"Bill",lname:"Gates",age:56}; for (x in person) { txt=txt + person[x]; } document.getElementById("demo").innerHTML=txt; } </script> </body> </html>

while ：

<html> <body> <p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p> <button οnclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x="",i=0; while (i<5) { x=x + "The number is " + i + "<br>"; i++; } document.getElementById("demo").innerHTML=x; } </script> </body> </html> do/while： <html> <body> <p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p> <button οnclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x="",i=0; do { x=x + "The number is " + i + "<br>"; i++; } while (i<5) document.getElementById("demo").innerHTML=x; } </script> </body> </html> ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

break：

<html> <body> <p>点击按钮，测试带有 break 语句的循环。</p> <button οnclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x="",i=0; for (i=0;i<10;i++) { if (i==3) { break; } x=x + "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html> continue ：

<html> <body> <p>点击下面的按钮来执行循环，该循环会跳过 i=3 的步进。</p> <button οnclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x="",i=0; for (i=0;i<10;i++) { if (i==3) { continue; } x=x + "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>

HTML 事件属性

<html> <body> <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p> <button οnclick="displayDate()">点击这里</button> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>

onload 和 onunload 事件

<html> <body οnlοad="checkCookies()"> <script> function checkCookies() { if (navigator.cookieEnabled==true) { alert("已启用 cookie") } else { alert("未启用 cookie") } } </script> <p>提示框会告诉你，浏览器是否已启用 cookie。</p> </body> </html>

onmouseover 和 onmouseout 事件

<html> <body> <div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div> <script> function mOver(obj) { obj.innerHTML="谢谢" } function mOut(obj) { obj.innerHTML="把鼠标移到上面" } </script> </body> </html>

onmousedown、onmouseup 以及 onclick 事件

<html> <body> <div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div> <script> function mDown(obj) { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="请释放鼠标按钮" } function mUp(obj) { obj.style.backgroundColor="green"; obj.innerHTML="请按下鼠标按钮" } </script> </body> </html>

添加和删除节点（HTML 元素）。

增加：

<html> <body> <script> function testB(){ var div1=document.getElementById("div1"); var p=document.createElement("p"); p.innerHTML="我是新创建的"; div1.appendChild(p); } </script> <input type="button" value="增加" οnclick="testB()"/> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> </body> </html> 删除：

<html> <body> <script> function testC(){ var div1=document.getElementById("div1"); var p=document.getElementById("p1"); div1.removeChild(p); } </script> <input type="button" value="删除" οnclick="testC()"/> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> </body> </html>

Window 尺寸

<html> <body> <script> function testE(){ var w=window.innerWidth var h=window.innerHeight x=document.getElementById("hw"); x.innerHTML="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。" alert("完成"); } </script> <input type="button" value="gao" οnclick="testE()"/> <p id="hw"></p> </div> </body> </html>

Window Location

<html> <body> <script> function testAA(){ alert(location.hostname ); alert(location.pathname); alert(location.port); alert(location.protocol); } </script> <input type="button" value="aaaaaaaa" οnclick="testAA()"/> </div> </body> </html>

function testBB(){ var username=document.getElementById("name").value; location.href="https://www.baidu.com?name="+username; }

Window History

<html> <body> <script> function testCC() { window.history.back() } </script> <input type="button" value="转转" οnclick="testCC()"/> </div> </body> </html> 运行结果：转到上一页

eval选择的转化成代码：

<html> <head></head> <body> <script> function testB(){ eval("x=10;y=20;document.write(x*y)") document.write(eval("2+2")) var x=10 document.write(eval(x+17)) } </script> <input type="button" value="A" οnclick="testB()"/> </body> </html> 转移字符型：

<html> <head></head> <body> <script> function testC(){ var a="狗"; a=escape(a); alert(escape(a)); a=unescape(a); alert(a); } </script> <input type="button" value="A" οnclick="testC()"/> </body> </html> 验证不能为空：

<html> <head></head> <body> <script> function testAA(){ var aa=true; var pwd=document.getElementById("pwd"); var email=document.getElementById("email"); if(email.value==""){ alert("邮箱不能为空"); return false; }else{ alert(email.value); } if(pwd.value==""){ alert("密码不能为空"); return false; }else{ alert(pwd.value); } } </script> <form id="loginBaiDu" name="loginBaiDu" method="get" οnsubmit="return testAA()" > 邮箱： <input type="text" id="email" name="email"/> <br> 密码： <input type="text" id="pwd" name="pwd"/> <br> <input type="submit" value="登录"/> <input type="reset" value="清空"/> </form> </body> </html> 重置：

<html> <head></head> <body> <script> function testCC(){ var logo=document.getElementById("logo"); logo.reset(); alert("清空"); } </script> <form id="logo" name="logo" method="get" " > 邮箱： <input type="text" id="email" name="email"/> <br> <input type="reset" value="清空"/> </form> </body> </html>

转载请注明原文地址: https://www.6miu.com/read-43209.html

技术

最新回复(0)