JavaScript

ECMAScript核心语法

1.js的基础使用方式：

​ 行内js : js代码定义在html元素标签上
​ 内部js : 通过script标签对定义在html中
​ 外部js : 定义在外部的一个js文件中,通过script标签引入

​ 1.1建议使用位置:
​ 1.head中
​ 一幕了然,便于后期维护
​ 有可能获取不到元素
​ 2.body结束之前
​ 肯定能够获取到每一个元素
​ 不便于观察

2.常见调试方式

2.1.alert 弹出框
最先执行
不推荐做调试使用
2.2.document.write(“在文档页面中写入内容”)
当页面内容加载完毕之后,再触发document.write的执行,会覆盖原页面

​ 2.3.console控制台输出 -> 推荐使用
​ console.log()
​ console.info()
​ console.error()
​ console.warn()

3.变量&数组

3.1变量

​ 3.1.1变量的定义

​ 通过var关键字声明
​ 1)声明的同时赋值
​ var 变量名 = 赋值;
​ 2)先声明后赋值
​ var 变量名;
​ 变量名 = 赋值;
​ 3)一行中通过定义多个变量

​ 3.1.2注意

​ js中的变量的类型由值决定
​ js是一门弱类型语言,java是请强类型语言
​ js变量不赋值存在默认值 undefined
​

​ 3.1.3变量的作用域提升:
把当前的通过var定义的变量的声明提升到当前作用域的最上面
​ 在js中变量的定义可以省略var关键字,但是就不存在变量的作用域提升

3.2简单数据类型

​ 3.2.1Number

​ 数值型

​ 直接赋值
​ 通过运算无法得到一个正确的结果 NaN

​ 3.2.2String

​ 字符串

​ 可以通过一对’’,或者一对""定义字符串
​ 可以包含0~n个字符
​ 如果字符串中出现特殊字符,可以通过转义字符进行转义 \

​ 3.2.3Boolean

​ true、false

3.3复杂数据类型

​ 对象型 {}
​ 键值对的集合
​ key : value
​ 每个键值对之间使用,分隔
​ 键与值之间使用:分隔
​ value可以为任意类型的值

4.typeof 判断数据类型

​ typeof 数据
​ typeof(数据)
​ 返回数据类型的小写字符串表现形式

5.类型转换

隐式类型转换 | 自动

​ 在进行一些其他操作运算的时候,目的不是为了发生类型转换,而在运算过程中会默认自动发生类型转换,这种类型转换成为隐式类型转换
​ 一般为四则运算 + - * / …

显示类型转换 | 强制

​ 任意类型都可以转换为一下三种类型 : String Number Boolean
​ Number(数据)
​ String(数据)
​ Boolean(数据)

Number(数据)
        String
            '' 空串                   -> 0
            ' ' 空格字符串             -> 0
            '123' 纯数字字符串         数字
            '123abc' 非纯数字字符串     NaN

        Boolean
            false       ->0
            true        ->1

        Null                -> 0
        Undefined           -> NaN
Boolean()
        String
            ''         false
            ' '        true
            其他字符串  true

        Number
             0,NaN      ->false
            非0数字      ->true

        Null            ->false
        Undefined       ->false

6.运算符

6.1赋值运算符

  ==  是否相等  数据
  === 是否相等  数据+类型
  先比较类型后比较数据值

6.2逻辑运算符

逻辑运算符
// &&运算如果第一个值为true则输出第二个值，第一个值为false则输出false
// 如果第一个值为true输出true，第一个值为false则输出第二个值

7.数组

7.1数组 : 存储多个数据
可变长,长度根据跟随数据的增删动态的改动
索引,可以根据索引操作数组中的数据
数组的索引可以跟随数据的改动进行动态修改
如果数组存在,索引位置存在,但是没有赋值,默认undefined
js中的数组中可以存放任意类型的数据

7.2数组常用方法:
slice 截取（切片）数组，原数组不发生变化
1个参数 起始索引,默认截取到最后
2个参数 起始索引 结束索引 结束索引位置不包含
splice 剪接数组，原数组变化，可以实现前后删除效果
1个参数 起始索引 实现删除与截取的效果
2个参数 起始索引 删除|截取个数 实现删除与截取的效果
3个往上 起始索引 个数 从第三个参数开始后面所有的参数为要替换的新数据 替换,截取

8.函数

​ 定义功能的实现
​ 函数声明 :
​ function 函数名(参数列表){
​ 函数体;
​ return 返回值;
​ }

​ 函数的调用:
​ 1)函数名(实参) -> 执行函数中的代码
​ 2)把函数声明转为函数表达式进行自调用
​ 转换方式: 在函数声明的开始位置添加!,~,+,-

​ 函数表达式
​ var 变量名 = function 函数名(形参){

​ };

​ 函数的调用:
​ 1)变量名(实参);
​ 2)在函数的最后直接添加()进行自调用

注意:
1.在js中所有的函数都存在返回值,没定义返回值默认undefined
2.形参与实参可以不一一对应,如果没有对应的实参,形参的默认值undefined
3.函数表达式中的函数名一般省略不写,不可用来调用函数,只有在发生递归的时候有用

作用域 : 函数

​ 函数的作用域提升 : 把函数声明方式定义的函数提升到当前作用域的最上面
​ 变量的作用域提升 : 把通过var定义的变量的变量的声明,提升到当前作用域的最上面

​ 注意:
​ js中的函数可以任意嵌套块: {} 具有语义化的特点

9.JSON

对象 Object
{}
键值对的集合
键 : 值
键值对之间通过 ,进行分隔
所有的键默认都是字符串 “”
如果key符合标识符的命名规范.可以省略""
value可以为js中任意类型

​ 操作对象的属性:
​ 根据key获取value
​ 1)对象名.属性名
​ 2)对象名[“属性名”]
​ js中对象的创建方式:
​ 1.字面量的创建方式 {}
​ 2.new Object() 空对象
​ JSON : JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
​ 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
​ JSON 与 JS 对象的关系
​ JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

常见的json数据:
‘{“name”: “John Doe”, “age”: 18, “address”: {“country” : “china”, “zip-code”: “10000”}}’
key都是通过""定义的字符串
value : 数值型,字符串,对象{},数组[],boolean,null
js对象与json串之间的转化问题
序列化 : 将对象转为可存储或者可传输的数据的形态的过程

BOM对象

window对象方法

​ 浏览器通过（实际是window对象的方法）alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息

​ （1）消息框:alert， 常用。

​ alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
（2）输入框:prompt，返回提示框中的值。
​ prompt() 方法用于显示可提示用户进行输入的对话框。
​ 参数（可选）：
​ 第一个参数：要在对话框中显示的纯文本。
​ 第二个参数：默认的输入文本。
​ （3）确认框:confirm，返回 true/false.
​ confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

打开窗口

​ window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口

关闭窗口

​ window.close()：关闭窗口。

时间函数

setTimeout() :

​ 在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识；也可以通过返回的标识cliearTimeout(id)： 来清除指定函数的执行。

// 延迟3 秒后出现 alert
function hello() {
 alert("对不起, 要你久候");
}
setTimeout("hello()", 3000);
 
  // 时间显示器
var timeout;
  function init(){
 // 拿到当前时间
 var date = new Date();
 var time = date.toLocaleString();
 // 拿到相应对象
 var h1 = document.getElementById('h1');
 // 根据需求添加样式
 if(0==date.getSeconds()){ // 当时间的秒数变成0时，显示红色字体
 h1.innerHTML = '<span style="color:red">' + time + '</span>';
 } else {
 h1.innerHTML = time;
 }
 /*
 * 定时操作，只执行一次
 第一个参数：执行的方法；第二个参数：定时，单位是毫秒
 * */
  setTimeout(init,1000);  // 等多少时间来执行
}
// window.setTimeout(init,1000);// 只执行一次
// 停止操作
function stopShow () {
    clearTimeout(timeout);
 }
</script>
<body onload="init();">
<h1 id="h1"></h1>
  <button onclick="stopShow()">时间停止</button>
</body>

​ 在times毫秒后执行function指定的方法，执行之前也可以取消

setInterval():

​ 可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

var id = setInterval(function,times);
clearInterval(id);
function test(){
	console.log(".....");
}
// window是一个全局对象，通过全局对象调用setInterval()函数
window.setInterval(test,1000);

DOM对象

Document Object Model 文档对象模型

​ 要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就是
DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的
节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对
HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过
window.document 属性对其进行访问。

节点

​ 加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构

理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：

​ html --> 文档节点
​ div --> 元素节点
​ title --> 属性节点
​ 测试 Div --> 文本节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-quo6CXzj-1630159620730)(JavaScript.assets/image-20210828204845914.png)]

操作元素的节点

​ 当HTML文档在被解析为一颗DOM树以后，里面的每一个节点都可以看做是一个一个的对象，我们称为DOM对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我们的页面在特定时机、特定的事件下执行特定的变换。

获取节点

​ 在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过Document对象提供的方法，查找、定位某个对象（也就是我们说的节点）。
​ 注意：操作 dom 必须等节点初始化完毕后，才能执行。
​ 处理方式两种:
​ （1）把 script 调用标签移到html末尾即可；
​ （2）使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。

方法	描述
getElementById()	根据id获取dom对象，如果id重复，那么以第一个为准
getElementsByTagName()	根据标签名获取dom对象数组
getElementsByClassName()	根据样式名获取dom对象数组
getElementsByName()	根据name属性值获取dom对象数组，常用于多选获取值

创建节点和插入节点

​ 很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新节点。

创建节点

方法	描述
createElement()	创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()	创建一个文本节点，可以传入文本内容
innerHTML	也能达到创建节点的效果，直接添加到指定位置了

插入节点

方法	描述
write()	将任意的字符串插入到文档中
appendChild()	向元素中添加新的子节点，作为最后一个子节点
insertBefore()	向指定的已有的节点之前插入新的节点newItem：要插入的节点exsitingItem： 参考节点 需要参考父节点

间接查找节点

方法|属性	描述
childNodes	返回元素的一个子节点的数组
firstChild	返回元素的第一个子节点
lastChild	返回元素的最后一个子节点
nextSibling	返回元素的下一个兄弟节点
parentNode	返回元素的父节点
previousSibling	返回元素的上一个兄弟节点

删除节点

​ removeChild()： 从元素中移除子节点

表单

​ 表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应
该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。

获取表单元素

​ 1. 获取input元素

​ 如 text password hidden textarea等，前两种常用。

1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称;   name属性值
3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始

获取单选按钮

​ 前提：将一组单选按钮设置相同的name属性值

​ (1)获取单选按钮组：

​ document.getElementsByName(“name属性值”);

​ (2)遍历每个单选按钮，并查看单选按钮元素的checked属性

​ 若属性值为true表示被选中，否则未被选中

​ 选中状态设定： checked=‘checked’ 或 checked=‘true’ 或 checked
​ 未选中状态设定： 没有checked属性 或 checked=‘false’

获取多选按钮

​ 操作方式与单选同理，不同之处在于可以多选

var ufav = document.getElementsByName("ufav");
var favstr = "";
  for (i = 0;i < ufav.length; i++){
    if(ufav[i].checked){
      favstr += ufav[i].value+",";
   }
 }
favstr = favstr.substr(0,favstr.length-1);

获取下拉选项

（1）获取 select 对象：

​ var ufrom = document.getElementById(“ufrom”);

（2）获取选中项的索引：

​ var idx = ufrom.selectedIndex;

（3）获取选中项 options 的 value属性值：

​ var val = ufrom.options[idx].value;

​ 注意：当通过options获取选中项的value属性值时，
​ 若没有value属性，则取option标签的内容
​ 若存在value属性，则取value属性的值

（4）获取选中项 options 的 text：

​ var txt = ufrom.options[idx].text;

​ 选中状态设定：selected=‘selected’、selected=true、selected
​ 未选中状态设定：不设selected属性

提交表单

表单提交方式
(1) buttom按钮 + submit() buttom按钮绑定一个点击事件,触发函数校验表单元素的数据是否满足要求,满足调用submit()提交表单
(2) submit提交按钮 + 点击事件 onclock = “return func_submit()”->通过函数的返回值,实现提交请求的拦截 返回true->提交 返回false->拦截
(3) 表单的onsubmit事件+ “return func_submit()” ->通过函数的返回值,实现提交请求的拦截 返回true->提交 返回false->拦截