HTML02---javaScript_html2javascript-CSDN博客

本文链接：https://blog.csdn.net/lb634774742/article/details/110245888

HTML02 JavaScript

一 JavaScript概述

1. 什么是JavaScript

JavaScript是因特网上最流行的脚本语言。
脚本语言不能单独使用，必须嵌入到其他语言中组合使用
JavaScript不能单独使用，必须和其他语言（HTML）结合使用
JavaScript由浏览器解释执行（解释一条，执行一条。故写代码时能用一条语句就不要用两条语句）
JavaScript代码：必须效率和可读性
JavaScript代码遇到错误，解析引擎停止

2. 作用及特点

可以控制前端页面的逻辑操作书写规范
可以控制CSS的样式；
JS可以对表单项进行校验, 和后台进行交互
JS可以对HTML元素进行动态控制（非重点）
特点:
- 安全性（没有访问系统文件权限，无法用来做木马病毒）
- 跨平台性（浏览器有JS的解析器，只要有浏览器就能运行JS代码，和平台无关）
- 交互性（JavaScript控制HTML元素）

3. 结合方式

内部使用
- <script type="text/javascript">JavaScript的代码</script>
外部引用
- <script type="text/javascript" src="javascript文件路径"></script>
- 外部引用时script标签内不能有script代码，即使写了也不会执行

二基本语法

1. 变量

JavaScript是一种弱数据类型的编程语言

变量可以用来保存任何类型的数据，定义变量的时候要使用var操作符，后面跟变量名（标识符同java）。

####1.1 基本数据类型

字符串类型String
- 单引号和双引号都是字符串 , 其余用法同java
布尔类型Boolean(同java)
数字类型number
- 包括所有数字
- 特殊number类型 : NaN(not a number) , 注意 : NaN != NaN
空占位符null ( 表示对象不存在 )
值未定义undefined
- 值未定义。即声明变量未赋值，系统会自动赋值undefined
- 变量声明未赋值时使用/对象的属性未赋值时使用都会出现undefined

1.2 引用数据类型

Javascript常用对象-Boolean
Javascript常用对象-Number
Javascript常用对象-Array
Javascript常用对象-String
Javascript常用对象-Date
Javascript常用对象-Math
Javascript常用对象-RegExp

Boolean

对象描述 : 在 JavaScript 中，布尔值是一种基本的数据类型。Boolean 对象是一个将布尔值打包的布尔对象。Boolean 对象主要用于提供将布尔值转换成字符串的 toString() 方法。

对象使用 :

new Boolean(value);	//构造函数
Boolean(value);		//转换函数

参数 : 参数 value 由布尔对象存放的值或者要转换成布尔值的值。
返回值 :
- 当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象。
- 如果作为一个函数（不带有运算符 new）调用时，Boolean() 只将把它的参数转换成一个原始的布尔值，并且返回这个值。
注意 : 如果省略 value 参数，或者设置为0、-0、null、""、false、undefined 或 NaN ，则该对象设置为 false。否则设置为 true（即使 value 参数是字符串 “false”）。

Number

对象描述 : 在 JavaScript 中，数字是一种基本的数据类型。JavaScript 还支持 Number 对象，该对象是原始数值的包装对象。在必要时，JavaScript 会自动地在原始数据和对象之间转换。

对象使用 :

var myNum=new Number(value);
var myNum=Number(value);

参数 : 参数 value 是要创建的 Number 对象的数值，或是要转换成数字的值。
返回值 : 当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。

Array

Array 对象用于在单个的变量中存储多个值。

常用构造方法 :

new Array();//空的
new Array(size);//size为变量个数length
new Array(element0, element1, ..., elementn);//基本同上,不常用

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

Array对象常用方法 :

concat()		---		连接两个或更多的数组,并返回结果.
join()			---		把数组的所有元素放到一个字符串,元素通过指定的分隔符进行分割.
pop() 			--- 	删除并返回数组的最后一个元素.
shift() 		--- 	删除并返回数组的第一个元素.
push()			---		向数组的末尾添加一个或更多元素,并返回新的长度.
reverse()		---		颠倒数组中元素的顺序.
slice()			---		从某个已有的数组返回指定的元素.
sort()			--- 	对数组的元素进行排序.
splice()		---		删除元素,并向数组添加新元素.
toSource()		---		返回该对象的源代码.
toString()		---		把数组转换为字符串,并返回结果.
toLocaleString() ---	把数组转换为本地数组,并返回结果.
unshift()		---		向数组的开头添加一个或者更多元素,并返回新的长度.
valueOf() 		---		返回数组对象的原始值.

String

对象描述 :
- 字符串是 JavaScript 的一种基本的数据类型。
- String 对象的 length 属性声明了该字符串中的字符数。
- JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。所有的方法都是返回新的字符串 , 而不是修改原来的字符串
String常用方法 :

Date

Date 对象用于处理日期和时间。
创建Date对象时 , Date 对象会自动把当前日期和时间保存为其初始值。
Date常用方法 :

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-20ZRv0Ai-1606480565749)(D:\duoyi\01_学习笔记\img\JavaScript-date01.png)]

JavaScript-date02

JavaScript-date03

Math

Math 对象用于执行数学任务。
注意：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。
您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
常用方法 :

JavaScript-math01

RegExp

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
创建 RegExp 对象的语法：
```
new RegExp(pattern, attributes);
```
参数 :
- 参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
- 参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。
返回值 :
- 一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。
- 如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

2. 运算符

2.1 算数运算符

加号 : 除两个number类型相加为数字 , 其余情况下为字符串连接符
其他运算符使用后，返回的结果都为number类型。
不能转换成标准number类型的，转换为NaN（包括undefined），NaN参与运算，结果均为NaN
null自动转换为0
true转换为1；false转换为0

2.2 赋值运算符

同java

2.3 比较运算符

== 比较值
- === 比较值和类型。如果变量值和变量类型都相同，那么true,只要有一个不同 false
  - !=比较值
  - !==全不等。比较值或比较类型，有一个不同即为不同，true. 值和类型都相同，那么false

2.4 逻辑运算符

&& 逻辑与 ；|| 逻辑或 ；！非 与java相同
所有数据类型都会自动转换为Boolean类型进行运算
0、-0、null、""、false、undefined 或 NaN，为false , 否则为true

2.5 条件运算符(三元运算符)

var val=(表达式)?value1:value2

条件运算符最终都是为了赋值
表达式，最终都是boolean类型的运算

3. 流程控制语句

if语句、switch语句和for语句，均与java相同
for…in 循环：
- 类似于Java的增强for循环（但有本质区别）
- java中的变量是数组或集合中的元素
- JavaScript中for in循环的变量是索引

4. JavaScript函数

####4.1 与java中方法的区别

JavaScript的函数可以理解位java中的方法
面向函数编程思想 : 函数和方法的意义是一样的 , 但是函数可以作为对象的形式单独存在,可以作为方法的参数传递
JavaScript函数没有方法重载，一是定义方法时不必确定参数类型；二是调用方法时，可以传入多于定义数量的参数，方法体内按需使用，不会报错
关于返回值：如果需要返回值，在方法体中直接添加return，便可直接使用；如不需要可不写

4.2 创建与调用函数

在javascript中有一个特殊的对象arguments,我们可以通过它来获取所有函数中的参数。

<script type="text/javascript">
	//创建函数
	function add(a, b) {
		//在函数中如果要获取所有参数列表中的信息可以使用argument来操作
		for(var i=0;i<arguments.length;i++){
          	//以网页弹窗的形式打印
			alert(arguments[i]);
		}
	}
	add(1,2,3,4);
</script>

##三 JS的DOM对象

1. DOM定义

DOM — Document Object Module数据对象模型
JS可以通过DOM将HTML中的一切节点，转化为对象，对其进行操作
基本DOM结构模型如下:

###2. DOM节点基本属性

文档节点 : 一个HTML文件便是一个文档节点
元素节点 : 每个HTML标签都是一个标签节点(包括html标签)
属性节点 : 标签的各种属性就是属性节点
文本节点 : 标签外的文本内容就是文本节点

3. DOM常用方法

JS为我们提供了一个现成的获取DOM模型的一个入口：Document对象

我们可以通过Document对象获取其他对象

//返回对拥有指定 id 的第一个对象的引用 
document.getElementsById()
//返回对拥有指定 name 的第一个对象的引用 
document.getElementsByTagName()
//返回对拥有指定 class 的对象的引用 
document.getElementsByClass()

document.write("写到页面");

四 JavaScript事件

1. JS事件介绍

JavaScript事件便是记录用户在浏览器上的操作行为（包括用户在浏览器上可能会单击 , 双击 , 鼠标滑过 , 输入框获得焦点 , 失去焦点操作）
事件和方法绑定才有意义: 事件绑定
事件通常与函数配合使用，这样我们可以通过发生的事件来驱动函数执行.

2. 常见事件

3. 事件绑定

方法一：在事件发生的标签内，直接绑定

<body>
  	<button onclick="hid()">点击隐藏图片</botton>
	<img id="oneimg" src="url"/>
</body>

<script>
      function hid(){
      //使用DOM获取图片对象
      var img = document.getElementById("oneimg")
      img.hidden = true
    }
</script>

方法二：将事件绑定写入到JavaScript中

<body>
  	<button id="onebt">点击隐藏</button>
	<img id="oneimg" src="url" />
</body>

<script>
	//定义隐藏图片的方法
    function hid(){
	var img = document.getElementById("oneimg")
    img.hidden = true
    }
    
    //进行事件绑定
    document.getElementById("onebt").onclick = function(){
        hid()
    }
</script>

五 JS对Cookie的操作

<script>
    //cookie是以键值对的形式存在，设置(添加)cookie
    document.cookie="userId=828";
    document.cookie="userName=hulk";
  
    //调用document.cookie方法,取出所有的cookie
    var cookies=document.cookie;
    //取出的cookie以字符串的形式存在
    document.writeln(cookies)//userId=828; userName=hulk

    //可以通过indexOf方法寻找键所在的索引
    var  cName = document.cookie.indexOf("userName=");//12
</script>