JavaScript学习笔记-CSDN博客

本文链接：https://blog.csdn.net/mingshengda/article/details/123160037

一、概述
JavaScript是一种脚本语言，它的目标程序是以普通文本形式保存。JS运行在浏览器当中，浏览器中有执行JS代码的内核。与JAVA并无关系。
JavaScript主要用来操作HTML中的节点，产生动态效果。它是一门编程语言。
核心语法：ECMAScript
二、嵌入JS代码的方式
第一种：行间事件。

<html>
    <head>
    </head>
    <body>
        <!--1、用户点击按钮显示对话框
            2、Java是事件驱动型编程语言，通常都是发生某个事件的时候去执行某段代码。在JS中，事件都会对应事件句柄
            3、所有的事件句柄都是以标签的属性形式存在。
            只要有用户点击了下面的按钮对象，此时按钮对象上发生鼠标单击事件。那么注册在onclick事件句柄当中的JS代码
            就会被执行。onclick后面代码实际上是浏览器负责执行的。
            4、onclick后面的代码并不是在浏览器打开的时候就执行。等待该按钮的click事件发生，
            只要发生，后面的代码就被监听器调用
            5、在JS当中有一个内置BOM对象，可以直接拿来用，全部小写：window
            其中window对象有一个方法（函数）叫alert，这个函数专门用来弹对话框。
            6、JS代码可以以分号结尾，也可以不以分号结尾。
            7、window可以省略
    -->
        <input type="button"  value="xiaoke"   onclick="window.alert('我爱小可');" />
        <input type="button"  value="xiaoke2"   onclick="alert('我爱小可2');" />
    </body>
</html>

第二种：脚本块方式。

<html>
 <head>


 </head>
 <body>
     <script type="text/javascript">
/*在这里直接编写JS代码，这些代码在页面打开的时候自上而下的顺序依次执行*/
       alert('hello Kero');
       alert('hello kero 2');
       alert('hello kero 3');


     </script>
 </body>


</html>

第三种：引入外部独立的JS文件

<script type="text/javascript" src="js/xxx.js">
     </script>
xxx.js代表JS文件名。

标识符命名规则和规范按照Java执行。
三、JS中的变量
声明：var 变量名；
赋值：变量名 = 值；
JS语言是弱类型语言，没有编译阶段，直接打开浏览器打开解释执行，在JS中声明变量时不需要指定变量的数据类型，程序在运行过程当中，赋什么类型的值，变量就是什么数据类型，并且变量的数据类型是可以变的。
全局变量：在函数体之外声明的变量。全局变量在浏览器打开的时候分配空间，在浏览器关闭时才销毁。
局部变量：在函数体当中声明的变量。局部变量在函数被调用的时候分配空间，函数执行结束后，内存释放。
四、函数

<html>
 <head></head>
 <body>
     <script type="text/javascript" >
       /*  
       函数定义语法格式：
       function 函数名（形参列表）{
           函数体；
       }
        例子：function sun(a,b){
            return a+b;
        }
        等价于：
        sun=function（a,b）{
            return a+b;
        }
       */
    function sun(a,b){
            alert(a+','+b);
        }
        sun(1,2);
     </script>
 </body>


</html>

JS中函数不能重载，只要出现同名函数，前面的函数就消失了。
五、JS数据类型
typeof运算符：可以在JS代码运行过程中，动态的获取变量的数据类型。
语法格式：typeof 变量名；
运算结果是以下六个字符串之一：undefined,boolean,string,number,object,function。
JS中判断两个字符串是否相等，用‘==’。
undefined类型:只有一个值，就是undefined，当声明变量没有赋值，系统默认为undefined。
null类型：只有一个值，就是null，typeof null运算结果是：object。
number类型：属于原始类型，整数、浮点数都属于number，还有NaN(表示不是一个数字),Infinity。有一个函数叫isNaN()，这个函数最终返回类型是布尔类型，返回false表示是一个数字，返回true表示不是一个数字。还有一个函数叫Number（），可以将不是数字类型的数据转换为数字类型的数据。parsetInt()函数可以将字符串转换为数字并且只取整数位，可以用来向下取整。
boolean类型：属于原始类型，只有两个值，true和false，有一个函数叫Boolean()，可以将不是布尔类型的变量转换为布尔类型。
string类型：属于原始类型，定义string类型有两种方式：var s=“字符串”； var s = new string(“字符串”)；
length属性可获取字符串长度；
object类型：可以将object类型看作是所有对象的超类，在JS当中默认定义的类型，没有特殊说明的话，默认继承object。prototype属性可以给对象动态扩展属性和方法。
JS中怎么定义类new对象调方法：定义类有两种方式：
1、function 类名（形式参数列表）{
this.属性名=参数；
this.方法名 =function（）{}
}
2、类名=function （形式参数列表）{
this.属性名=参数；
this.方法名 =function（）{}
}

<html>
<head></head>
<body>
<script type="text/javascript" >
    function emp(x,y,z){
        //属性
        this.empno=x;
        this.ename=y;
        this.sal=z;
         //方法
        this.work=function(){
            console.log(this.ename+"is working");
        }
    }
    //创建对象
    var e = new emp();
    e.work();
    var e2 = new emp(111);
    e2.work();
    var e3 = new emp(2222,"king");
    e3.work();
    var e4 = new emp (333,'S',800)
    //给emp动态扩展方法
    emp.prototype.getSal = function(){
        return this.sal;
    }
    console.log(e4.getSal());
</script>
</body>
</html>

==，只比较值是否相等
===，既比较值，也比较数据类型是否相等
六、事件
blur:失去焦点
focus：获得焦点

click：鼠标单击
dbclick：鼠标双击

keydown：键盘按下
keyup:键盘弹起

mousedown :鼠标按下
mouseover :鼠标经过
mousemove:鼠标移动
mouseout：鼠标离开
mouseup：鼠标弹起

submit: 表单提交
reset：表单重置

select：文本被选定
change：下拉列表中项改变，或文本框内容改变
load:页面加载完毕
任何一个事件都有对应的事件句柄，事件句柄是在事件名称前添加on。

<html>
<head>
    <style type="text/css">
 input{
     border: 1px solid black;
     width: 300px;
}
    </style>
</head>
<body>
<script type="text/javascript" >
</script>

测试失去焦点事件：<input type="text" onblur="console.log('失去')"/>;
测试获得焦点事件：<input type="text" onfocus="console.log('获取')" />;
测试click事件:<input type="button" value="click" onclick="console.log('单击')"/>；
测试dbclick事件：<input type="button" value="dbclick" ondblclick="console.log('双击')">；

</body>
</html>

事件注册的第一种方式：

<html>
<head>
    <style type="text/css">
  
    </style>
</head>
<body>
<script type="text/javascript" >
  function sayhello(){
      console.log("hello kero")
  }
</script>
  <!--这种注册事件的方式就是第一种方式，在标签中使用事件句柄，在事件句柄后编写JS代码，当事件句柄对应的事件发生之后
注册在事件句柄当中的代码被调用。
onclick只有当click事件发生之后，注册在onclick后的代码会被执行。
-->
    <input type="button" value="hello kero" onclick="sayhello()"/>
</body>
</html>
第二种方式：
<html>
<head>
    <style type="text/css">
  
    </style>
</head>
<body>
    <input type="button" value="hello" id="hellobtn" onclick="" >
<script type="text/javascript" >
    function sum(){
        console.log("sum");
    }
/*根据id获取button对象*/
         var hellobtnElt = document.getElementById("hellobtn");
        //元素有什么属性，就能点什么
        /* 这行代码在页面打开的时候会执行，这行代码的执行意义是，将sum这个回调函数绑定到hellobtn的click事件上*/
        
        hellobtnElt.onclick = sum;
 
</script>
</body>

</html>
事件案例：
<html>
<head>
</head>
<body>    
<script type="text/javascript" >
  window.onload = function(){
      //给id="btn1"的元素绑定鼠标单击
      var btn1Elt=document.getElementById("btn1");
    btn1Elt.onclick = function(){
        console.log("1被单击");
    }
    //给id="btn2"的元素绑定鼠标单击
    var btn2Elt=document.getElementById("btn2");
    btn2Elt.onclick = function(){
        console.log("2被单击");
    }
  } 
</script>
   <input type="button" id="btn1" value="button1"/>
   <input type="button" id="btn2" value="button2"/>
</body>
</html>

七、void运算符、JS控制语句、内置对象
语法格式：void (表达式)
执行表达式，不返回任何结果，即使表达式有执行结果，但是经过void后就什么都没了。
选择结构：if，switch
循环结构：for ,while,do…while
转向语句：break,continue,return
JS种特殊语句（不常用）：
for…in语句
with语句

<html>
<head>
</head>
<body>
<script type="text/javascript" >
    //数组建立使用中括号
  var arr = [1,24,5,65,76,7];
  //for....in语句
   for(var index in arr){
       //index是数组元素中的下标
       console.log(index);
       //console.log(arr[index]);
   }
   //for...in语句还可以取对象的属性值
   Employee = function(empno,ename){
       this.empno=empno;
       this.ename=ename;
   }
   var e = new Employee(700,'kero');
   console.log(e.empno+','+e.ename);


</script>
</body>
</html>
内置对象array:
<html>
<head>
</head>
<body>
<script type="text/javascript" >
 /*
 1、怎么创建数组对象
 2、怎么遍历数组
 3、怎么修改数组中的某个元素
 4、怎么读取数组中的某个元素 
 */
//创建数组的第一种方式
var a=[1,2,3,4,5];
//创建数组的第二种方式
var arr= new Array(5);//创建长度为5的数组
var arr2 = new Array(1,2,3,4,5);
</script>
</body>
</html>
添加元素：数组名.push(添加元素)并且是添加到末尾。
pop（）：将数组末尾元素弹出，并且长度减一。
reverse（）：翻转数组。
内置对象date:
var time =new Date();

八、DOM编程案例
BOM是浏览器对象模型：通过BOM的对象和方法可以完成浏览器窗口的操作。顶级内置对象是window。
DOM是文档对象模型：通过DOM对象和方法，可以完成网页中元素的增删改，产生动态效果，顶级内置对象是document。
innerHTML和innerText的区别：

<html>
<head>
  <style type="text/css">
 #div1{
     background-color: antiquewhite;
     border: 1px solid red;
     width: 200px;
 }


  </style>
</head>
<body>
    <script type="text/javascript">
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            //设置div中的内容
           var divElt= document.getElementById("div1");
           //通过元素的innerHTML属性来设置内部的内容
           //innerHTML属性会将后面的字符串当作一段HTML代码来解释并执行
           //divElt.innerHTML = "<font color ='red'>  用户名不能为空</font>";
           //innerText会看作普通的字符串，不会解释执行。
           divElt.innerText = "<font color ='red'>  用户名不能为空</font>";
        }
    }    
    </script>
    <input type="button" id="btn" value="ssss"/>
<div id="div1">
</div>
<span id="span1">
</span>
</body>
</html>
复选框的全选和取消全选：
<html>
<head>
  <style type="text/css">
  </style>
</head>
<body>
    <script type="text/javascript" >
        window.onload = function(){
            //给id="firstChk"元素绑定click
           var firstChkElt= document.getElementById("firstChk");
           firstChkElt.onclick = function(){
              //获取所有的复选框对象
              var vtb = document.getElementsByName("vtb");
              if(firstChkElt.checked){
//遍历数组
for(var i =0 ;i<vtb.length;i++){
                  var vtbChk = vtb[i];
                  vtbChk.checked = true
              }
              }else{
                  //遍历数组
              for(var i =0 ;i<vtb.length;i++){
                  var vtbChk = vtb[i];
                  vtbChk.checked = false;
              }
              }
           }
        }
    </script>
    <input type="checkbox" id="firstChk">
    <br>
    <input type="checkbox" name="vtb" value="xiaoke"/>xiaoke
    <br>
    <input type="checkbox" name="vtb" value="az"/>az
    <br>
    <input type="checkbox" name="vtb" value="nanami"/>nanami
    <br>
</span>
</body>
</html>
获取文本框的value：
<html>
<head>
  <style type="text/css">
  </style>
</head>
<body>
    <script type="text/javascript" >
 window.onload= function(){
     document.getElementById("btn").onclick = function(){
         //获取文本框对象
         var usernameElt =document.getElementById("username");
         //获取value
         var username = usernameElt.value;
         alert(username);
     }
 }
    </script>
    用户名:<input type="text" id="username"/>
    <br>
    <input type="button" id="btn" value="xiaoke">
</span>
</body>
</html>
获取下拉列表选中项的value：
<html>
<head>
  <style type="text/css">
  </style>
</head>
<body>
  <select id="iiii" onchange="alert(this.value)"><!--代表当前下拉列表对象-->
      <option value="">数字</option>
      <option value="001">1111</option>
      <option value="002">2222</option>
      <option value="003">3333</option>
      <option value="004">4444</option>
  </select>


    <script type="text/javascript">
        window.onload = function(){
            document.getElementById("iiii2").onchange = function(){
                alert(this.value)
            }
        }
    </script>


  <select id="iiii2" >
    <option value="">数字</option>
    <option value="001">1111</option>
    <option value="002">2222</option>
    <option value="003">3333</option>
    <option value="004">4444</option>
</select>
</span>
</body>
</html>
周期性调用函数、网页时钟：
<html>
<head>
  <style type="text/css">
  </style>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
    document.getElementById("displayTimeBtn").onclick= function(){
        //返回值是一个可以取消周期性调用的value
      v= window.setInterval("displayTime()",100)
    }
    document.getElementById("stoptimeBtn").onclick= function(){
       window.clearInterval(v);
    }
    }
  function displayTime(){
       //获取系统当前时间，把时间显示到div中
       var nowTime = new Date();
        //显示到div
        document.getElementById("timediv").innerHTML = nowTime.toLocaleString();
  }


    //window.setInterval("display()",100);
</script>


<input type="button" value="showtime" id="displayTimeBtn">
<input type="button" value="stop" id="stoptimeBtn">
<div id="timediv" ></div>
</body>
</html>

九、BOM编程案例
窗口的开启和关闭：

<html>
<head>


</head>
<body>


     <input type="button" value="开启百度" onclick="window.open('http://www.baidu.com')"/>
     <input type="button" value="开启百度2" onclick="window.open('http://www.baidu.com' ,'_self')"/>


     <input type="button" value="关闭窗口" onclick="window.close()"/>


</body>
</html>

alert和confirm:
alert：弹出消息框
confirm:弹出确认框
十、JSON

<html>
<head>
</head>
<body>
    <script type="text/javascript">
        /*
        1、JSON：JavaScript Object Notation(JavaScript标记对象)
        是一种轻量级的数据交换格式。
        体积小，但表示的数据可以很多。
        JSON和XML都是标准的数据交换格式。XML体积大，解析难度大。JSON语法相对松散。
        2、在JavaScript中JSON是以对象的形式存在
        3、在JavaScript定义JSON格式对象：
        语法格式：
        var jsonObj = {
            “属性名”：属性值，
            “属性名”：属性值，
            “属性名”：属性值，
            “属性名”：属性值，
            ......
        }；
        */
  var emp = {
      "empno":7379,
      "ename":"xiaoke",
      "sal":9999
  }；
  //怎么访问对象属性
  console.log(emp.empno)//第一种方式
  console.log(emp["empno"])//第二种方式
  
    </script>
</body>


</html>