《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);//设置地址栏的urllocation.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-事件-案例