《JavaWeb开发-javascript基础》

《JavaWeb开发-javascript基础》

---

1.javascript 引入方式

• 内部脚本:将JS代码定义在HTML页面中。

  • JavaScript代码必须位于标签之间。
  • 在HTML文档中，可以在任意地方，放置任意数量的<script>。
  • 一般会把脚本置于元素的底部，可改善显示速度。

  <script>
  	alert("Hello javaScript")
  </script>
  

• 外部脚本:将JS代码定义在外部JS文件中，然后引入到 HTML页面中。

  • 外部JS文件中，只包含JS代码，不包含<script>标签。
    <script>标签不能自闭合。

  <script src="is/demo.js"></script>
  

  alert("Hello JavaScript")  //保存为demo.js文件
  

---

2.JS-基础语法-书写语法

2.1 书写语法

• 区分大小写:与Java 一样，变量名、函数名以及其他一切东西都是区分大小写的。
• 每行结尾的分号可有可无。
• 注释:
  • 单行注释: // 注释内容
  • 多行注释: /* 注释内容 */
• 大括号表示代码块。

  //判断
  if(count == 3){
  	alert(count);
  }
  

2.2 输出语句

1. 使用 window.alert()写入警告框

2. 使用 document.write()写入 HTML输出

3. 使用 console.log()写入浏览器控制台

   <script>
   window.alert("Hello JavaScript");//浏览器弹出警告框
   document.write("Hello JavaScript");//写入HTML,在浏览器展示
   console.log("Hello Javascript");//写入浏览器控制台
   </script>
   

---

3.JS-基础语法-变量

1. JavaScript 中用 var 关键字(variable 的缩写)来声明变量。

2. JavaScript 是一门弱类型语言，变量可以存放不同类型的值。

   var a= 20;
   a="张三";
   

3. 变量名需要遵循如下规则:

   • 组成字符可以是任何字母、数字、下划线()或美元符号(S)
   • 数字不能开头
   • 建议使用驼峰命名
   • 注意事项
     • ECMAScript6 新增了let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
     • ECMAScript6 新增了 const 键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

---

4.JS-基础语法-数据类型&运算符

4.1 数据类型

• JavaScript中分为:原始类型和引用类型
• 原始类型：
  • number:数字(整数、小数、NaN(Not aNumber))
  • string:字符串，单双引皆可
  • boolean:布尔。true，false
  • null:对象为空
  • undefined:当声明的变量未初始化时，该变量的默认值是 undefined
  • 使用 typeof 运算符可以获取数据类型

  var a=20;
  alert(typeof a);
  

4.2 运算符

• 算术运算符：+，-,*,/,%，++，--赋值运算符:=，+=，-=，*=，/=，%=

• 比较运算符：>，<，>=，<=，!=，== , ===

• 逻辑运算符：&&，|| , !

• 三元运算符：条供表达式 ? true value : false value

• ==会进行类型转换，===不会进行类型转换

  var a =10:
  alert(a == "10"); //true
  alert(a ==="10");//false
  alert(a === 10);//true
  

4.3 数据类型转换

• 字符串类型转为数字
  • 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。
• 其他类型转为boolean:
  • Number:0和NaN为false，其他均转为true。
  • String:空字符串为false，其他均转为true。
  • Null和 undefined:均转为false。

---

5. JS-函数

• 介绍：函数(方法)是被设计为执行特定任务的代码块。

• 定义：avaScript 函数通过 function 关键字进行定义，

• 语法为:

  function functionName(参数1,参数2..){
  //要执行的代码}
  

• 定义(举例)：

  function add(a,b){
  	return a+b;
  }
  

• 注意

  • 形式参数不需要类型。因为JavaScript是弱类型语言
  • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

• 调用:函数名称(实际参数列表）

  var result=add(10,20);
  alert(result);
  

• 定义方法二：var functionName =function(参数1,参数2..){//要执行的代码}

  var add = function(a,b){
     return a+b;
  }
  

---

6. JS-对象-Array数组

• javascript中Array对象用于定义数组

• 定义

  • 定义方式一：var 变量名 = new Array(数组列表)； var arr = new Array(1,2,3,4);
  • 定义方法二：var 变量名 = [元素列表]; arr list = [1,2,3,4];

• 调用：arr[索引] = 值； arr[10] = Hello;

• 注意事项
  JavaScript 中的数组相当于Java 中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据。

• 属性

  • length：设置或返回数组中元素的数量。

        <script>
            var arr = new Array(1,2,3,4,5,6);
            for (let i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
        </script>
    

• 方法

  • forEach()：遍历数组中的每个有值的元素，并调用一次传入的函数

    <script>
        var arr = new Array(1,2,3,4,5,6);
    
        arr[10] = 50;
        // for循环可以遍历数组中的每一个元素
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
    
        console.log("====================");
        
        //forEach循环只遍历数组有值的元素
        arr.forEach(function (e) {
            console.log(e); 
        })
    
        // 使用“箭头函数”可以对forEach中的函数进行优化
        arr.forEach((e) => {
            console.log(e);
            
        })
    </script>
    

• push()：将新元素添加到数组的末尾，并返回新的长度。

• splice()：从数组中删除元素。

      <script>
          var arr = new Array(1,2,3,4,5,6);
          arr[10] = 50;
          
          // 在数组的尾部添加元素
          arr.push(7,8,9);
          console.log(arr);// [1, 2, 3, 4, 5, 6, empty × 4, 50, 7, 8, 9]
  
          //从数组中删除元素
          arr.splice(2,2);
          console.log(arr);//[1, 2, 5, 6, empty × 4, 50, 7, 8, 9]
      </script>
  

---

7. JS-对象-String字符串

• String字符串对象创建方式有两种:
• var 变量名 = new String("..”); //方式一 var str = new String("Hello String");
• var 变量名 = "…"; //方式二 var str = "Hello String" 或 var str = ‘Hello String’;
• 属性
  • length：字符串的长度。
• 方法:
  • charAt()：返回在指定位置的字符，
  • indexof()：检索字符串。
  • trim()：去除字符串两边的空格
  • substring()：提取字符串中两个指定的索引号之间的字符;

      <script>
          // 创建字符串对象
          // var str = new String("Hello String"); //方式一
          var str = "Hello String"; //方式二
          console.log(str);
  
          //length 属性
          console.log(str.length);  //12
          
          //charAt()方法
          console.log(str.charAt(4)); //o
          
          //indexOf()方法
          console.log(str.indexOf("t")); //7
      
          //trim()方法
          console.log(str.trim());//去除字符串两边的空格
          
          //substring()方法
          console.log(str.substring(0,5)); //hello
      </script>
  

---

8. JS-对象-JSON

• JavaScript自定义对象

  定义格式:
  var 对象名 = {
  	属性名1:属性值1，
  	属性名2:属性值2，
  	属性名3:属性值3，
  	函数名称:function(形参列表){}
  	};
  

• 调用格式:

  • 对象名.属性名; console.log(user.name);
  • 对象名.函数名(); user.eat();

• 自定义对象中的函数写法可以进行简化

  定义格式:
  var 对象名 = {
  	属性名1:属性值1，
  	属性名2:属性值2，
  	属性名3:属性值3，
  	函数名称(形参列表){}  //简化后
  	};
  

      <script>
          // JavaScript自定义对象的定义
          // var user = {
          //     name:"Tom",
          //     age:18,
          //     gender:"male",
          //     eat: function(){
          //         alert("吃饭");
          //     }
          // };
  
          // 对函数写法简化后代码
          var user = {
              name:"Tom",
              age:18,
              gender:"male",
              eat(){
                  alert("吃饭");
              }
          };
          //JavaScript自定义对象的调用
          alert(user.name);
          user.eat();
      </script>
  

• JSON-介绍

  • JSON概念：JavaScript Object Notation，javaScript对象标记法。
  • JSON 是通过JavaScript 对象标记法书写的文本。
  • 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
  • JavaScript 对象写法

    {
    	name:"Tom"
    	age:20,
    	gender:"male"
    }；
    

  • JOSN文本写法

    {
    	"name":"Tom"
    	"age":20,
    	"gender" :"male"
    

    }

• JSON基础语法

  • 定义：var 变量名={"key1":value1，"key2":value2}

  • value 的数据类型为:

    • 数字(整数或浮点数)
    • 字符串(在双引号中)
    • 逻辑值(true 或 false)
    • 数组(在方括号中)
    • 对象(在花括号中)
    • nul

  • 示例：var userstr ='{"name":"Jerry","age":18,"addr":["北京”,"上海","西安"]}';

  • JSON字符串转为JS对象
    var jsobject = JSON.parse(userstr);

  • JS对象转为JSON字符串
    var jsonStr =JSON.stringify(jsobject);

        <script>
            //定义一个JSON字符串
            var userstr = '{"name":"Jerry","age":18,"add":["北京","上海","西安"]}';
            alert(userstr.name);
            //JSON字符串转为JS对象
            var jsObject = JSON.parse(userstr);
            alert(jsObject.name);
            // JS对象转为JSON字符串
            var jsonStr = JSON.stringify(jsObject);
            alert(jsonStr);
        </script>
    

9. JS-对象-BOM

• 概念：Browser 0bject Model 浏览器对象模型，允许|avaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。
• 组成:
  • Window:浏览器窗口对象
  • Navigator:浏览器对象
  • Screen:屏幕对象
  • History:历史记录对象
  • Location:地址栏对象
• Window:浏览器窗口对象
  • 介绍:浏览器窗口对象。
  • 获取:直接使用window，其中 window.可以省略。
    • window.alert("Hello Window");
    • alert("Hello window");
• 属性
  • history:对 History 对象的只读引用。请参阅 History 对象。
  • location:用于窗口或框架的 Location 对象。请参阅 Location 对象。
  • navigator:对 Navigator 对象的只读引用。请参阅Navigator 对象。
• 方法
  • alert():显示带有一段消息和一个确认按钮的警告框。
  • confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
  • setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
  • setTimeout():在指定的毫秒数后调用函数或计算表达式。

      <script>
  
          // 1.方法alert():显示带有一段消息和一个确认按钮的警告框。
          window.alert("警告框");//可以省略window
  
          //2.方法confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
         var flag = window.confirm("确认要删除这条记录吗？");
         console.log(flag);
  
         //3.方法setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
          var count = 0;
          window.setInterval(function(){
              count++;
              console.log("定时器执行了" + count + "次");
          },2000);
  
          //4.方法setTimeout():在指定的毫秒数后调用函数或计算表达式。
          window.setTimeout(function () {
              alert("JS")
          },3000)
      </script>
  

• Location:地址栏对象
  • 介绍:地址栏对象。
  • 获取:使用 window.location 获取，其中 window.可以省略,
    • window.location.属性;
    • location.属性;
• 属性:
  • href:设置或返回完整的URL。
  • location.href="https://www.itcast.cn";

      <script>
          //获取当前浏览器的地址
          alert(location.href);
  
          //设置地址栏的url
          location.href = "https://www.itcast.cn";
      </script>
  

10. JS-对象-DOM

• DOM概念:Document Object Model，文档对象模型
• 将标记语言的各个组成部分封装为对应的对象
  • Document:整个文档对象
  • Element:元素对象
  • Attribute:属性对象
  • Text:文本对象
  • Comment:注释对象
• JavaScript 通过DOM，就能够对HTML进行操作
  • 改变 HTML 元素的内容
  • 改变 HTML元素的样式(CSS)
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素
• DOM是 W3C(万维网联盟)的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分
  1. Core DOM-所有文档类型的标准模型
     • Document:整个文档对象
     • Element:元素对象
     • Attribute:属性对象
     • Text:文本对象
     • Comment:注释对象
  2. XML DOM-XML 文档的标准模型
  3. HTMLDOM-HTML文档的标准模型
     • Image: <img>
     • Rutton : <input type='button'>
• HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的
• Document对象中提供了以下获取Element元素对象的函数:
  • 根据id属性值获取，返回单个Element对象
    var h1 = document.getElementById('h1');
  • 根据标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName('div');
  • 根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName('hobby');
  • 根据class属性值获取，返回Element对象数组4
    var clss= document.getElementsByClassName('cls');

      <script>
          //1 获取Element元素
          //1.2 获取元素-根据ID获取
          var img = document.getElementById('h1');
          alert(img);
  
          //1.2获取元素-根据标签获取
          var divs = document.getElementsByTagName('div');
          for (let i = 0; i< divs.length; i++) {
            alert(divs[i]);
             
          }
  
          //1.3获取元素-根据name属性获取
          var inputs = document.getElementsByName('hobby');
          for (let i = 0; i < inputs.length; i++) {
              alert(inputs[i]);            
          }
  
          //1.4获取元素-根据class属性获取
          var inputs1 = document.getElementsByClassName('cls');
          for (let i = 0; i < inputs1.length; i++) {
              alert(inputs1[i]);
          }
      </script>
  

11. JS-对象-DOM-案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM</title>
</head>
<body>
    <img id="h1" src="../html/尤雨溪照片.webp" >

    <div class="cls">传智教育</div>  <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏

    <script>
        //1.改变img便签中src的属性（更换图片）
        var img = document.getElementById('h1');
        alert(img);
        img.src = "../html/秋收.webp";
        
        // 2.将所有div标签的内容后面加上：very good（红色字体）
        var divs = document.getElementsByTagName('div');
        for (let i = 0; i < divs.length; i++) {
            const div = divs[i];
            div.innerHTML = div.innerHTML + "<font color='red'>very good</font>";             
        }

        // 3.使所有的复选框都呈现出被选中状态
        var inputs = document.getElementsByName('hobby');
        for (let i = 0; i < inputs.length; i++) {
            const input = inputs[i];
            input.checked = true;
        }
    </script>
</body>

12. JS-事件-事件绑定&常见事件

1. 事件监听

   • 事件:HTML事件是发生在HTML元素上的“事情”。比如:
     • 按钮被点击
     • 鼠标移动到元素上
     • 按下键盘按键
   • 事件监听:JavaScript可以在事件被侦测到时 执行代码

2. 事件绑定

   • 方式一：通过 HTML标签中的事件属性进行绑定

   <input type="button" onclick="on()" value="按钮1">
   <script>
   	function on(){alert('我被点击了!'};
   </script>
   

   • 方式二:通过 DOM 元素属性绑定

   <input type="button" id="btn" value="按钮2">
   <script>
   	document.getElementById('btn').onclick=function(){
   	alert('我被点击了!);
   	}
   </script>
   

   

3. 常见事件

   • onclick：鼠标单击事件

   • onblur：元素失去焦点

   • onfocus：元素获得焦点

   • onload：某个页面或图像被完成加载

   • onsubmit：当表单提交时触发该事件

   • onkeydown：某个键盘的键被按下

   • onmouseover：鼠标被移到某元素之上

   • onmouseout：鼠标从某元素移开
     

     <body onload="load()">
         <form action="" style="text-align: center;" onsubmit="subfn()">
             
             <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
             
             <input id="b1" type="submit" value="提交" >
     
             <input id="b2" type="button" value="单击事件" onclick="fnl()">
         </form>
     
         <br><br><br>
     
         <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()" >
             <tr>
                 <th>学号</th>
                 <th>姓名</th>
                 <th>分数</th>
                 <th>评语</th>
             </tr>
             <tr align="center">
                 <td>001</td>
                 <td>张三</td>
                 <td>90</td>
                 <td>优秀</td>
             </tr>
             <tr align="center">
                 <td>002</td>
                 <td>李四</td>
                 <td>95</td>
                 <td>很优秀</td>
             </tr>
         </table>
     
         <script>
             //onload:页面、元素加载完成后触发
             function load() {
                 console.log("页面加载完成...");
             }
             //onclick：鼠标点击事件
             function fnl() {
                 console.log("单击事件被点击了...");
             }
             // onblur：失去焦点事件
             function bfn() {
                 console.log("失去焦点...");
             }
             // onfocus：获得焦点
             function ffn() {
                 console.log("获得焦点...");
             }
             //onkeydown:某个键盘的按键被按下
             function kfn() {
                 console.log("键盘被按下了...");
             }
             //onmouseover:鼠标被移动到某元素之上
             function over() {
                 console.log("鼠标移入了...");
             }
             //onmouseout:鼠标被移动到某元素之上
             function out() {
                 console.log("鼠标移出了...");
             }
             //submit:当表单提交时触发该事件
             function subfn() {
                 alert("表单被提交了...");
             }
         </script>
     </body>
     

13. JS-事件-案例