第七篇：复习JavaScript

张箫剑

已于 2024-05-02 16:18:10 修改

阅读量949

点赞数 22

文章标签： javascript 开发语言 ecmascript

于 2024-02-23 19:28:05 首次发布

本文链接：https://blog.csdn.net/2302_76696304/article/details/136257800

版权

一、什么是JavaScript

JavaScript简介：

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

二、JS基础

1. JS引入方式

<script>
alert("Hello JavaScript");
</script>

浏览器会解释并执行位于<script>和</script>之间的JS代码

1.1 内部脚本

内部脚本：

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

<script>标签:
如果需要在HTML页面插入JavaScript，需要用<script>标签，因为<script>标签会告诉JavaScript在何处开始和结束，并且之间的代码行包含了JavaScript

1.2 外部脚本

外部脚本：

将JS代码定义在外部JS文件中，然和引入到HTML页面内
外部JS文件中，只包含JS代码，不包含<script>标签
<script>标签不能自闭和，如果自闭和了，引入的JS文件也会失效

外部JS文件，例如：

alert("Hello JavaScript")

引用JS文件，例如：

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

2. JS基础语法

2.1 书写语法

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

if(count == 3){
	alert(count)
}

2.2 输出语句

使用window.alert() 写入警告框 (window.)可以省略
使用document.write() 写入HTML输出
使用console.log() 写入浏览器控制台

例如：

<script>
	window.alert("hello alert")	// 浏览器弹出警告框

	document.write("hello write") // 写入HTML在浏览器展示

	console.log("hello log") // 写入浏览器控制台
</script>

效果如下：
在这里插入图片描述

在这里插入图片描述

2.3 变量

JS用var关键字来声明变量
js是一个弱类型语言，变量可以存放不同类型的值
变量名需要遵循以下规则
- 组成字符可以是任何字母，数字，下划线_，或者美元符号$
- 数字不能开头
- 建议使用驼峰命名

// var定义变量
var a = 20;
a = "张三";

alert(a)
//结果为 张三(因为后面的值把前面的覆盖掉了)：

使用 var 定义变量有两个特点

作用域比较大，全局变量
可以重复定义一个变量

{
       var x = 1;
       var x = "A";
   }
   alert(x)
   // 也可以输出 A

注意：

ECMAScript6 新增了let来定义变量，类似var但是声明的变量只在代码块内有效
新增了const来声明一个只读对的常量，不能改变

下面用两个例子来解释：

{
	// let 局部变量
    let x = 1;
  }
  	alert(x)
  // 得不到 1

// const 常量：不能被改变
const pi = 3.14;
pi = 3.15   // 控制台会报错
alert (pi)

2.4 数据类型

Javascript中分为：原始类型和引用类型

number 数字（整数，小数，NaN(not a number) )
string 字符串单双引号
Boolean 布尔 true或者false
null 空
undefined 变量未初始化时，该变量默认值时undefined
使用 typeof运算符可以获取数据类型

alert(typeof 3)     //number
alert(typeof 3.14)

alert(typeof "A")   //string
alert(typeof 'hello')

alert(typeof true)  //boolean
alert(typeof false)

alert(typeof null)  //object    

var a ;
alert(typeof a)     //undefined

2.5 运算符

基础运算符都一致：

算数运算符：+,-,*,/,%,++,–
赋值运算符: =,+=,-=,*=，/=，%=
比较运算符: >,<,>=,<=,!=,==,===
逻辑运算符:&&,||,!
三元运算符: 条件表达式？ true_value :false_value

== 比较时会进行类型转换
=== 不会将进行类型转换

  var a = 10;
    alert(a == '10') // true
    alert(a === '10') //false
    alert(a === 10) //true

类型转换
将字符串的面值转换成数字:

如果不是数字，则转为NaN

    alert(parseInt('12')) // 12 
    alert(parseInt('12A45')) // 12 转换到字母停下
    alert(parseInt('A45'))  //NaN

其他类型转boolean:

number：0和NaN为false 其他未true
string：空字符串为false，其他为true
null和undefined:均转为false

    if(0){	// false 
        alert('0转换为false')
    }
    if(NaN){ // false 
        alert('NaN转换为false')
    }
    if(-1){	// true
        alert('除0和NaN其他数字都是true')
    }
    if(""){	// false 
		alert('空字符串为false 其他都是true')
	}
	if（null）{ // false
		alert('null 转换为false')
	}
	if(underfined){ // false
		alert('underfined 转化为false')
	}

2.6 流程控制语句

和Java一致

if else
switch
for
while
do…while

三、JS-函数

介绍：函数（方法）时被设计为执行特定任务的代码块

定义：JavaScript函数通过function关键字进行定义

   function 名字 ( 参数1 参数2 ...){
           // 代码块
       }

注意
- 形式参数不需要类型，因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接用return返回
调用：函数名称(实际参数列表)

实例(定义)：

// 函数定义方法一
function add(a,b){
	return a + b
	}

// 函数定义方法二
var add = function(a,b){
   	return a + b
 	}

实例(调用)：

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

注意：JS中，函数调用可以传递任意个数的参数

四、JS-对象

1. Array 数组

JavaScript中Array用于定义数组

Array定义:

var 变量名 = new Array(元素列表) // 方法1
var arr = new Array(1,2,3,4)

var 变量名 = [元素列表] // 方法2
var arr = [1,2,3,4]

访问：

arr[索引] = 值；
arr[10] = ‘hello’

类似于Java中的集合
- 长度可变
- 类型可变

    var arr = [1,2,3,4,5];
    arr[10] = 50;
    arr[9] = "A";
    arr[8] = true
    alert(arr[10])	// 50
    console.log(arr[9])  // A 
    console.log(arr[8])	// true
	console.log(arr[7]) // underfined

array中的常见属性和方法
属性：

属性	描述
length	设置或者返回数组中的元素数据

方法：

方法	描述
forEach()	遍历数组中的每个有值的元素，并调用一次传入的函数
push()	将新元素添加到数组末尾，返还新的长度
splice()	从数组中删除

实例：

var arr = [1,2,3,4];
// forEach 遍历输出（仅仅遍历有值的元素）如果想要全部遍历，使用for循环
arr.forEach(function(e){
 console.log(e);
})
// ES6 箭头函数：(...) => (...)
arr.forEach((e) => {
 console.log(e);
})

// push 添加元素到数组末尾
 arr.push(7,8,9)
 console.log(arr)

// splice 删除   两个元素    第一个从哪里开始删，第二个删几个
 arr.splice(2,2) //  从下标2开始删（包括2，删两个）
 console.log(arr)

运行结果如下：
在这里插入图片描述

2. String 字符串

字符串对象的创建方式有两种：

var 变量名 = new String(“…”) // 方法一
var str = new String(“hello String”)

var 变量名 = " " // 方法二
var str = “hello String”

String中的常见属性和方法
属性：

属性	描述
length	字符串的长度

方法：

方法	描述
charAt()	返回在指定位置的字符
indexOf()	检索字符串
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符

例如：

  var str = "  hello String  "
    console.log(str)
    
    // length 字符串的长度
    console.log(str.length)   
    
    // charAt 返回在指定位置的字符
    console.log(str.charAt(4))
    
    // indexOf 检索字符串
    console.log(str.indexOf("lo"))
    
    // trim 去除字符串两边的空格
    var a = str.trim()
    console.log(a)
    
    // substring 提取字符串中两个指定的索引号之间的字符
    console.log(a.substring(0,5)) // 含头不含尾

运行结果如下：
在这里插入图片描述

3.JSON JS对象

自定义对象：
定义格式：

// 格式
var 对象名 = {
     属性1 : 属性值1 
     属性2 : 属性值2 
     函数名称: function（形参）{ // 冒号和function可以省略
         代码块
     }
 }
// 例子
var user = {
    name : "tom"
    age : 20
    gender : "male"
    eat (){
        console.log("吃饭")
    }
}

调用格式：

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

JSON介绍

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

{
	"name" : "XiaoJian"
	"age" : "19"
	"gender" : ""male
};

JSON定义：

// 格式
var 变量名 = '{"key1":value1, "key2":value2}';
// 例子
var jsonstr = '{"name" : "tom" , "age" : 18 , "address" : ["北京","上海","西安"]}';

value的数据类型为：

数字：（整数或者浮点数）直接使用
字符串： “需要在双引号中”
逻辑值：写True或者False
数组：[ 在方括号中 ]
对象：在花括号中

JSON字符串转化为JS对象

var jsObject = JSON.parse(jsonstr);
// 转化为JS对象之后，打点可以得到对应的值
alert(jsObject.name)

JS对象转化为JSON字符串

var jsonstr = JSON.stringify(jsObject)

4. BOM 浏览器对象模型

概念：Browser Object Model 浏览器对象模型，允许Javascript与浏览器对话，Javascript将整个浏览器的各个组成部分封装为对象

组成：

Window:浏览器窗口对象
Navigator:浏览器对象（版本内核）
Screen:屏幕对象
History:历史记录对象
Location:地址栏对象

4.1 Window

Window 浏览器窗口对象 Window.可以调用其他属性和方法

例如window.history()

window.alert("Hello Window");
alert("Hello Window")
// 两者效果一样
// window. 可以省略

属性	描述
history	历史记录对象
location	地址栏对象
navigator	获取浏览器对象

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息，一个确认按钮以及取消按钮的对话框
setInterval()	按照指定的周期来调用函数或计算表达式每隔多长时间
setTimeout()	在指定的毫秒数之后调用函数或计算表达式隔多长时间

操作实例：

// 	  alert 弹出警告框
   window.alert("hello BOM")
   alert("hello BOM Window")


 //   confirm   有返回值的
    var flag = confirm("hello BOM Confirm")
    alert(flag)


//    setInterval 定时器，周期性的执行某一个函数 
    var i = 0
    setInterval(function(){
            i++;
            console.log("定时器执行了"+i+"次")
    },2000) // 2000指的是 2 秒 ， 1000是一秒


//    setTimeout 定时器 延迟指定时间执行一次
    setTimeout(function(){
        console.log("嘿嘿")
    },3000)


    // 地址栏对象 使用window.location获取 Window可以省略
    // href 设置或返回完整的url地址
    var result = confirm("是否要跳转百度");
    if (result == true){
        location.href = "https://www.baidu.com"
    }
    else{
        alert("切，爱去不去")
    }
    // 直接跳转到输入的路径地址

5. DOM 文档对象模型

概念：Document Object Model ，文档对象模型

将标记语言的各个组成部分封装为对应的对象：
- Document 整个文档对象
- Element 元素对象
- Attribute 属性对象
- Text 文本对象
- Comment 注释对象
  当HTML被浏览器加载和解析之后，就会封装成以上五种对象，也会生成一个DOM树

例如：
在这里插入图片描述
Javascript通过DOM，就可以对HTML进行操作

改变HTML元素
改变HTML元素样式（css）
对HTML DOM事件作出反应
添加和删除HTML元素

Document Object Model,文档对象模型
将标记语言的各个组成部分封装为相应的对象
1.Core DOM 所有文档类型的标准模型

Document 整个文档对象
Element 元素对象
Attribute 属性对象
Text 文本对象
Comment 注释对象

2.XML DOM - XML 文档的标准模型

3.HTML DOM - HTML 文档的标准模型

Image <img>
Button <input type = “button”>

在DOM中如何获取Element元素对象？
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

Document对象中提供了Element元素对象的函数：

1.根据id属性获取，返回单个Element对象

var h1 = document.getElementById("h1")

2.根据标签名获取，返回Element对象数组

var divs = document.getElementsByTagName("div")

3.根据name属性获取，返回ELement对象数组

var names = document.getElementsByName("name")

4.根据class属性获取，返回ELement对象数组

var class = document.getElementsByClassName("className")

操作实例：


<html>
    <head>
        <title>JS-对象-DOM</title>
    </head>
    <body>
        <img id="img" src="./img/off.png" ><br><br>

        <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">游戏
    </body>

    <script>
        // 1.获取Element元素
        // 1.1获取元素-根据ID获取
        var img = document.getElementById("img")
        alert(img)
        console.log(img)

        // 1.2获取元素-根据标签获取
        var divs = document.getElementsByTagName("div")
        for (let i = 0; i < divs.length; i++) {
            alert(divs[i])
            console.log(divs[i])
        }

        // 1.3获取元素-根据name获取
        var names = document.getElementsByName("hobby")
        for (let i = 0; i < names.length; i++) {
            alert(names[i])
            console.log(names[i])
        }

        // 1.4获取元素-根据class获取
        var classes = document.getElementsByClassName("cls")
        for (let i = 0; i < classes.length; i++) {
            alert(classes[i])
            console.log(classes[i])
        }
    </script>
</html>

获得到元素之后，参考手册，属性方法

手册地址如下：https://www.runoob.com/jsref/dom-obj-document.html

五、JS-事件监听

事件：HTML事件是指发生在HTML元素上的”事情“。比如：

按钮被点击
鼠标移动到元素上
按下键盘按键
事件监听：JavaScript可以在事件被侦测是执行代码

1. 事件绑定

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

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

方式二：通过DOM元素进行绑定

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

2. 常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	莫个页面或者图像被完成加载
onsubmit	当表单被提交时触发该页面
onkeydown	某个键盘的键被按下时
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

下面请看一段代码实例：

<html>
    <head>
        <title>常见事件</title>
    </head>
<body onload="load()">
        <form action="" style="text-align: center;" onsubmit="subfn()">
            <input type="text" name="username"  placeholder="请输入姓名" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
            
            <input type="password" name="password" placeholder="请输入密码" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">

            <input type="submit" id="b1" value="提交">

            <input type="button" id="b1" value="单击事件" onclick="fn1()">
         
        </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>150</td>
                <td>真牛逼</td>
            </tr>
        </table>
    </body>
    <script>
        // onload 页面/元素加载完后触发
        function load(){
            console.log("页面加载完成...")
        }

        // onclick 鼠标点击事件
        function fn1(){
            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("鼠标移出了...")
        }

        // onsubmit 提交表单事件
        function subfn(){
            console.log("表单提交成功")
        }
    </script>
</html>