JavaScript
运行在浏览器上的一种基于对象和事件的驱动的脚本语言
基于对象（windows – document location histroy
便于调用对象属性和方法
事件驱动
键盘和鼠标与浏览器互动
js特点
向html页面添加交互行为
脚本语言，语法与java类似
解释性语言，一边执行，一遍编译
js的模型
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js引入的三种方式</title> 6 <link type=""> 7 <script type="text/javascript"> 8 function m1() { 9 alert("hello world2"); 10 } 11 </script> 12 <script type="text/javascript" src="js/myjs.js"></script> 13 </head> 14 <body> 15 <!--行间事件驱动 给事件属性赋值--> 16 <div> 17 <input type="button" name="btn" value="点击" onclick="alert('hello world')"> 18 </div> 19 20 <!--页面嵌入script标签进行交互--> 21 <div> 22 <input type="button" name="btn1" value="点击1" onclick="m1()"> 23 </div> 24 25 <!-- 外部引入进行交互--> 26 <div> 27 <input type="button" name="btn2" value="点击2" onclick="m2()"> 28 </div> 29 </body> 30 </html>
HTML表现型
CSS表现型
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS的介绍</title> 6 <link type=""> 7 <script type="text/javascript"> 8 function ml() { 9 alert("hello") 10 // 提示框显示“hello 11 } 12 </script> 13 <script type="text/javascript" src="myjs.js"></script> 14 </head> 15 <body> 16 <!--行间事件驱动 给属性赋值--> 17 <div> 18 <input type="button" name="btn" value="点击" onclick="alert('hello')"> 19 </div> 20 <!--页面嵌入script标签进行交互--> 21 <div> 22 <input type="button" name="btn2" value="点击1" onclick="ml()"> 23 </div> 24 <!--外部引用--> 25 <div> 26 <input type="button" name="btn3" value="点击3" onclick="m2()"> 27 </div> 28 </body> 29 </html>
m2外部引用
1 function m2() { 2 alert("123") 3 4 }
js语法与注释
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js语法与注释</title> 6 <script type="text/javascript"> 7 //注释 /**/ 8 /** 9 * 10 **/ 11 //如何声明变量 12 13 var s; 14 var s1=1; var s2="abc";var s3=null; 15 var s1l=1,s22="abc",s33=null; 16 </script> 17 </head> 18 <body> 19 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数据类型的判断</title> 6 <script type="text/javascript"> 7 //声明一些变量 8 var str="abc";//string 9 var num=123;//number 10 var datc=new Date();//object 复合类 11 var flag=true;//boolean 12 var arr=new Array(4);//数组
//typeof（）是js内置常用的方法
//一般情况下，在执行过程中取不到的情况下，返回null
var o;
13 //typeof（）是js内置常用的方法 14 document.write("str "+typeof (str)+"<br>"); 15 document.write("num "+typeof (num)+"<br>"); 16 document.write("str "+typeof (datc)+"<br>"); 17 document.write("num "+typeof (flag)+"<br>"); 18 document.write("str "+typeof (arr)+"<br>"); 19 20 </script> 21 </head> 22 <body> 23 24 </body> 25 </html>
网页结果
1 str string 2 num number 3 str object 4 num boolean 5 str object
变量和函数的预解析
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>变量和函数的预解析</title> 6 <script type="text/javascript"> 7 method(); 8 //编译执行的顺序是从上往下 9 alert("num为"+num); 10 var num=123;//number 11 //函数的定义 12 function method() { 13 alert("abc") 14 15 } 16 </script> 17 </head> 18 <body> 19 20 </body> 21 </html>
行间事件调用和提取行间事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>行间事件调用和提取行间事件</title> 6 <script type="text/javascript"> 7 //行间事件调用 8 function method1(){ 9 alert("测试行间事件调用"); 10 } 11 //提取行间事件，然后调用 12 window.onload=function(){ 13 var oBtn=document.getElementById("id1"); 14 oBtn.οnclick=method2;//执行点击事件:调用method2方法 15 function method2() { 16 alert("测试提取行间事件"); 17 18 } 19 } 20 </script> 21 </head> 22 <body> 23 <!--提取行间事件，然后调用--> 24 <input type="button" name="btn1" value="点击1" id="id1"> 25 </div> 26 <div> 27 <!--行间事件 就是 onclick事件--> 28 <input type="button" name="btn" value="点击" 29 onclick="method1()"> 30 </div> 31 <div> 32 33 34 </body> 35 </html>
匿名函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>匿名函数</title> 6 <script type="text/javascript"> 7 //匿名函数 ：没有函数名的函数 8 window.onload=function () { 9 var oBtn=document.getElementById("btn1"); 10 //匿名函数的好处：是代码更加简洁 11 oBtn.οnclick=function(){ 12 alert("test"); 13 }; 14 15 } 16 </script> 17 </head> 18 <body> 19 <div><input type="button" value="点击" id="btn1"></div> 20 21 </body> 22 </html>
有参函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>有参函数</title> 6 <script type="text/javascript"> 7 function method(count) { 8 for(var i=0;i<count;i++){ 9 document.write("学习js"+"<br>"); 10 } 11 } 12 </script> 13 </head> 14 <body> 15 <div><input type="button" value="点击" 16 onclick="method(prompt('请输入次数',''))"></div> 17 18 </body> 19 </html>
条件语句
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>条件语句</title> 6 <script type="text/javascript"> 7 //条件语句: if /if-else/ if-else-if/ if的嵌套/ switch 8 /* var a=1; 9 if(a==1){ 10 alert("test1"); 11 }else if(a==2){ 12 alert("test2"); 13 }else if(a==3){ 14 alert("test3"); 15 }*/ 16 //switch 17 var a=12; 18 switch(a){ 19 case 1: 20 alert("test1"); 21 break; 22 case 2: 23 alert("test2"); 24 break; 25 case 3: 26 alert("test3"); 27 break; 28 default: 29 alert("test4"); 30 break;//可写可不写 31 } 32 </script> 33 </head> 34 <body> 35 36 </body> 37 </html>
循环语句
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>循环语句</title> 6 <script type="text/javascript"> 7 //while do-while for 8 for (var i=0;i<4;i++){ 9 document.write("for输出序号："+(i+1)+"<br>"); 10 } 11 /*+++++++++++++++++++++++++++++++*/ 12 var j=0; 13 while(j<4){ 14 document.write("while输出序号："+(j+1)+"<br>"); 15 j++; 16 } 17 /*=====================================*/ 18 var k=0;// 0 1 2 3 4取不到 19 do { 20 document.write("do-while输出序号："+(k+1)+"<br>") 21 k++; 22 }while (k<4);//false 23 24 </script> 25 </head> 26 <body> 27 28 </body> 29 </html>
break与continue与return的使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>break与continue与return的使用</title> 6 <script type="text/javascript"> 7 //break : 终止当前循环 8 // 如果有循环嵌套，当前循环是指终止最近的循环 9 for(var j=0;j<4;j++){ 10 for(var i=0;i<10;i++){ 11 document.write("输出:"+(i+1)+"<br>"); 12 if(i==5){ 13 break; 14 } 15 } 16 //代码 17 //代码 18 } 19 //代码 20 //代码 21 //continue的使用 22 for(var k=0;k<10;k++){ 23 if(k==5){ 24 continue; 25 } 26 document.write("输出:"+(k+1)+"<br>"); 27 } 28 //return 29 function method() { 30 alert("test1"); 31 return; 32 alert("test2"); 33 } 34 method(); 35 </script> 36 </head> 37 <body> 38 39 </body> 40 </html>
函数return的用法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>函数return的用法</title> 6 <script type="text/javascript"> 7 //定义一个有参函数 8 function add(a,b) { 9 var c=a+b; 10 alert("test1"); //会输出 11 return c; //通过return关键字结束函数 12 alert("test2"); //不会输出 13 14 } 15 //之间调用/执行函数 16 var result=add(1,2); 17 alert(result); 18 </script> 19 </head> 20 <body> 21 22 </body> 23 </html>
数组的用法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数组的用法</title> 6 <script type="text/javascript"> 7 //数组的声明和赋值 8 //方法一 9 var arr=new Array(4); 10 arr[0]=1; 11 arr[1]=2; 12 arr[2]=3; 13 arr[3]=4; 14 //方法二 15 var arr1=new Array(1,2,3,4); 16 //方法三 17 var arr2=[1,2,3,4]; 18 //数组的常用方法 19 alert("数组arr2的长度为："+arr2.length); 20 //数组中的元素分别是什么 21 alert(arr2[0]); 22 /* alert(arr2[1]); 23 alert(arr2[2]); 24 alert(arr2[3]);*/ 25 //将数组元素通过分隔符号连成字符串 26 alert(arr2.join("-")); 27 alert(arr2); 28 //push（）在数组最后位置添加数组元素 29 arr2.push(5); 30 alert("添加元素后输出："+arr2); 31 //pop（）删除数组中的最后一个元素 32 arr2.pop(); 33 alert(arr2); 34 // unshift()和shift（） 在数组的头部添加和删除元素 35 arr2.unshift(0); 36 alert(arr2); 37 arr2.shift(); 38 alert(arr2); 39 //将数组反转 40 arr2.reverse(); 41 alert(arr2); 42 //如何知道数组元素对应的下标（索引值） 43 alert(arr2.indexOf(2)); 44 //splice() 从索引为2开始（包含2），删除一个元素，添加 7，8，9 45 arr2.splice(2,1,7,8,9); 46 alert(arr2); 47 48 49 </script> 50 </head> 51 <body> 52 53 </body> 54 </html>
window对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>window对象</title> 6 <script type="text/javascript"> 7 function location1() { 8 //打开一个网页,此网页覆盖最初的网页 9 window.location="01.html"; 10 } 11 //打开新的网页 12 function open1() { 13 window.open("01.html"); 14 } 15 //关闭当前网页 16 function close1() { 17 window.close(); 18 } 19 //window常用的方法 confirm() 确认框 20 function confirm1() { 21 var flag=window.confirm("你确定要删除此消息吗？");//返回 boolean类型 22 if(flag==true){ 23 alert("删除成功"); 24 }else{ 25 alert("删除取消"); 26 } 27 } 28 </script> 29 </head> 30 <body> 31 <div><input type="button" onclick="location1()" value="location按钮测试"></div> 32 <div><input type="button" onclick="window.location='01.html'" value="location按钮测试1"></div> 33 34 <div><input type="button" onclick="open1()" value="open按钮测试"></div> 35 <div><input type="button" onclick="window.open('01.html')" value="open按钮测试1"></div> 36 37 <div><input type="button" onclick="close1()" value="close按钮测试"></div> 38 <div><input type="button" onclick="window.close()" value="close按钮测试1"></div> 39 40 <div><input type="button" onclick="confirm1()" value="confirm按钮测试"></div> 41 42 43 44 45 </body> 46 </html>
setTimeout函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>setTimeout函数</title> 6 <script type="text/javascript"> 7 //setTimeout函数 ，设置一定时间（毫秒为单位）后调用某个函数 8 function timer() { 9 setTimeout("alert1()",3000); 10 } 11 12 function alert1() { 13 alert('3秒后输出警示框'); 14 } 15 </script> 16 </head> 17 <body> 18 <!-- 编写一个按钮，点击按钮，调用函数--> 19 <div><input type="button" value="定时器" onclick="timer()"></div> 20 </body> 21 </html>
实现时钟的特效
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>实现时钟的特效</title> 6 <script type="text/javascript"> 7 function myClock() { 8 var now=new Date(); 9 var str= "现在是："+now.getHours()+"时"+now.getMinutes()+"分"+now.getSeconds()+"秒"; 10 document.getElementById("id1").innerHTML=str; 11 } 12 var intervalId; 13 //表示 每一秒钟调用一次此函数 14 function start() { 15 intervalId=setInterval("myClock()",1000); 16 } 17 //让时钟暂停 18 function stop() { 19 clearInterval(intervalId); 20 } 21 </script> 22 </head> 23 <body> 24 <div><input type="button" value="start" onclick="start()"></div> 25 <div><input type="button" value="stop" onclick="stop()"></div> 26 27 <div id="id1"></div> 28 </body> 29 </html>
document对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document对象</title> 6 <script type="text/javascript"> 7 //获得html中id="div1" 的对象 8 window.onload=function () { 9 var oDiv=document.getElementById("div1"); 10 alert(oDiv.innerHTML); 11 } 12 13 </script> 14 </head> 15 <body> 16 <div id="div1">这是一个div元素</div> 17 18 </body> 19 </html>
document操作属性（读取和写入）</
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <link href="css1.css" rel="stylesheet" type="text/css"> 5 <meta charset="UTF-8"> 6 <title>document操作属性（读取和写入）</title> 7 <script type="text/javascript"> 8 window.onload=function () { 9 var oInput=document.getElementById("input1"); 10 //通过属性名，读取到属性值 11 var text1=oInput.type; 12 var name1=oInput.name; 13 var class1=oInput.className; 14 var value1=oInput.value; 15 //如何时document对象实现这样的样式设计：style="color:red;font-size: 50px 16 var oA=document.getElementById("link1"); 17 oA.style.color="red"; 18 var oInput2=document.getElementById("input2"); 19 var value2=oInput2.value; 20 oA.style[value2]=value1; 21 //属性的写入 22 // oA.style.fontSize=value1; 23 } 24 </script> 25 </head> 26 <body> 27 <div> 28 <input type="text" class="className" name="setsize" id="input1" value="50px"> 29 <input type="text" class="className" name="setsize" id="input2" value="fontSize"> 30 <input type="text" class="className" name="setsize" id="input3" value="color"> 31 <a href="http://www.baidu.com" id="link1" >百度</a> 32 <div>html内容</div> 33 34 </div> 35 </body> 36 </html>
innerHTML和innerText的区别
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>innerHTML和innerText的区别</title> 6 <script type="text/javascript"> 7 window.onload=function () { 8 var oDiv=document.getElementById("div1"); 9 //读取到标签对中间的内容 10 //innerHTML可以识别标签，而innerText不能 11 var str= oDiv.innerHTML; 12 alert(str); 13 /* var str1=oDiv.innerText; 14 alert(str1);*/ 15 16 //如何写入 17 var oDiv2=document.getElementById("div2"); 18 oDiv2.innerText="<a href='http://www.baidu.com'>点击</a>"; 19 } 20 </script> 21 </head> 22 <body> 23 <div id="div1"><h1>这是一个div元素</h1></div> 24 <div id="div2"></div> 25 </body> 26 </html>
dom模型的其他方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>dom模型的其他方法</title> 6 <script type="text/javascript"> 7 function changeBookName() { 8 //getElementsByName(),返回的是一个对象数组，数组内只有一个对象元素 9 var newBookNames=document.getElementsByName("addBookName"); 10 document.getElementById("book").innerHTML=newBookNames[0].value; 11 } 12 13 function outputSeason() { 14 //getElementsByName(),返回的是一个对象数组，数组内有4个对象元素 15 var seasons=document.getElementsByName("season"); 16 var str=""; 17 //数组遍历，for遍历 18 for(var i=0;i<seasons.length;i++){ 19 //累加 20 str+=seasons[i].value+" "; 21 22 } 23 document.getElementById("outputSeason").innerHTML=str; 24 25 } 26 function outputZM() { 27 //getElementsByTagName(),返回的是对象数组 28 var zms=document.getElementsByTagName("p"); 29 var str=""; 30 for(var i=0;i<zms.length;i++){ 31 //累加 32 str+= zms[i].innerHTML+" "; 33 } 34 document.getElementById("div1").innerHTML =str; 35 } 36 function clearAll() { 37 document.write(""); 38 } 39 </script> 40 </head> 41 <body> 42 <div id="book">java编程思想</div> 43 <div><input name="addBookName" type="text" value=""></div> 44 <div><input type="button" value="改变书名" onclick="changeBookName()"></div> 45 46 <div> 47 <input type="text" name="season" value="春"> 48 <input type="text" name="season" value="夏"> 49 <input type="text" name="season" value="秋"> 50 <input type="text" name="season" value="冬"> 51 </div> 52 <div id="outputSeason"></div> 53 <div><input type="button" value="输出四季" onclick="outputSeason()"></div> 54 55 <div> 56 <p>a</p> 57 <p>b</p> 58 <p>c</p> 59 <p>d</p> 60 </div> 61 <div id="div1"></div> 62 <div><input type="button" value="输出字母" onclick="outputZM()"></div> 63 64 <div><input type="button" value="清空所有内容" onclick="clearAll()"></div> 65 </body> 66 </html>
扫一扫
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
