小菜鸟之HTML第二课

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.onclick=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.onclick=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+"&nbsp;&nbsp;&nbsp;";
 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+"&nbsp;&nbsp;";
 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>




  1  Html（表现的结构）
  2  CSS（表现的样式）
  3 JavaScript（表现的是一种行为）
  4   运行在浏览器上的一种基于对象和事件驱动的脚本语言。
  5     基于对象（window --document location  history）,便于调用
  6         对象的属性和方法。
  7     事件驱动
  8         键盘和鼠标与浏览器的互动（键盘在输入框输入文字/ 鼠标的点击等）
  9   js的特点
 10     向html页面添加交互行为
 11     脚本语言，语法与java类似
 12     解释性语言，一边执行一边解释
 13   js的模型
 14     BOM模型
 15         browser object model 是指浏览器对象模型，提供操作浏览器的一些方法
 16         window
 17             document
 18             location
 19             history
 20         window的常用方法和属性
 21             location
 22             open()
 23             close()
 24             confirm()
 25             alert()
 26             prompt()
 27             setTimeout()
 28             setInterval()
 29         document的常用方法和属性
 30             write()
 31             getElementById()
 32             getElementsByTagName() 返回是一个对象数组
 33             getElementsByName()    返回的是一个对象数组
 34             innerHTML 读取的<>这里的内容<>
 35     DOM模型
 36         document object model 是指文档对象模型，提供操作html和css的一些方法。
 37    
 39 
 40
posted @ 2019-09-26 16:18  一片风的独白  阅读(156)  评论(0)  编辑  收藏  举报