JavaScript基本概念与语法讲解

1、什么是JavaScript

1.1 概述

JavaScript是一门世界上最流行的脚本语言

一个合格的后端人员，必须精通JavaScript

1.2 历史

ECMAScript它可以理解是JavaScript的一个标准

最新版本已经到es6版本~

但是大部分浏览器还只停留在支持es5代码上！

开发环境—线上环境，版本不一致

2、快速入门

2.1 引入JavaScript

1、内部标签

<script>
    //···
</script>

2、外部引入

abs.js

//···

test.html

<script src="abs.js"></script>

2.2 基本语法入门

浏览器必备调试须知：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dYkYD353-1631156385735)(C:\Users\MSP-002\AppData\Roaming\Typora\typora-user-images\image-20210611093111413.png)]

2.3 数据类型

数值、文本、图形、音频、视频…

变量

var $q
var _sh
// 不能以数字开头

number

js不区分小数和正数，Number

123 // 正数123
123.1 // 浮点数123.1
1.12e3 // 科学计数法
-99 // 复数
NaN // not a number
Infinity // 表示无限大

字符串

‘abc’ “abc”

布尔值

true、false

逻辑运算

&&  // 与运算

||  // 或运算

!  // 非运算

比较运算符

=
==   // 等于（类型不一样，值一样，也会判断为true）
===  // 绝对等于（类型一样，值一样，结果为true）

这是一个JS的缺陷，坚持不要使用==比较

须知：

• NaN===NaN，这个与所有值都不相等，包括自己
• 只能通过isNaN（NaN）来判断这个数是否是NaN

浮点数问题

console.log((1/3)===(1-2/3))

尽量避免使用浮点数进行运算，存在精度问题

Math.abs(1/3-(1-2/3))<0.0000001

null和undefined

• null 空
• undefined 未定义

数组

Java的数组必须是一系列相同类型的对象，JS中不需要

取数组下标：如果越界了，就会

undefined

对象

对象是大括号，数组是中括号

每个属性用逗号隔开，最后一个不需要

2.4 严格检查模式

'use strict';

3、数据类型

3.4 流程控制

1、if 判断

2、while 循环，避免程序死循环

3、for 循环

4、forEach 循环

var age=[1,3,5]
age.forEach(function(value){
    console.log(value)
})

3.5 Map和Set

ES6 新特性

Map：相当于Python中的字典

var map=new Map(["tom",30]["jake",45]);
var name=map.get("tom"); //通过key获得value
map.set("admin",23) //新增
map.delete("tom"); //删除

Set：无需不重复的集合

set.add(2); //添加
set.delete(1);  //删除
console.log(set.has(3));  //是否包含某个元素

3.6 iterator

遍历迭代：for of

遍历数组

var arr=[3,4,5]
for (var x of arr){
    console.log(x)
}

遍历map

var map=new Map([["tom",100],["jack",90]]);
for (var x of map){
    console.log(x)
}

遍历set

var set=new Set([3,6,100]);
for (var x of set){
    console.log(x)
}

4、函数

4.1 定义函数

方法：对象（属性，方法）

绝对值函数

方法一

function abs(x){
    // 函数体
}

一旦执行到return代表函数结束，返回结果!

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs=function(x){
    // 函数体
}

function（x）{···}是一个匿名函数，但是可以把结果赋给abs，通过abs就可以调用函数！

方法一和方法二等价！

5、内部对象

标准对象

5.1 Date

基本使用

var now = new Date();
var time = now.getTime(); // 时间戳 全世界统一 1970 1.1 00：00：00 毫秒数
console.log(new Date(time)); // 时间戳转为时间

转换

5.2 json

json 是什么

• JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON来表示；

格式：

• 对象都用{}
• 数组都用[]
• 所有的键值对都是用key：value

JSON 字符串和 JS 对象的转化

var user={
	name:"zhangsan",
	age:12,
	sex:'男'
}

//json 对象转换为json 字符串{"name":"zhangsan","age":12,"sex":"男"}
var jsonUser=JSON.stringify(user);

//json 字符串转换为对象 参数为 json 字符串
var obj=JSON.parse('{"name":"zhangsan","age":12,"sex":"男"}')

5.3 Ajax

• 原生的 js 写法 xhr 异步请求
• jQuery 封装好的 方法 $(“#name”).ajax(“”)
• axios 请求

6、面向对象编程

6.1 什么是面向对象

• 类：模板
• 对象：具体实例

原型：

//小明的原型是 student
xiaoming._proto_=student;

class 继承

class 关键字是在ES6 引入的

1、定义一个类

//定义一个学生类
class Student{
    constructor(name){
        this.name=name;
    }
    
    hello(){
        aler('hello')
    }
}

var xiaoming=new Student("xiaoming");
var xaiohong=new Student("xiaohong");

xiaoming.hello()

2、继承

本质：查看原型对象

原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5awBDi1C-1631156385737)(C:\Users\MSP-002\AppData\Roaming\Typora\typora-user-images\image-20210611093250504.png)]

7、操作BOM对象

浏览器介绍

JavaScript 诞生就是为了让他在浏览器中运行！

BOM：浏览器对象模型

• IE 6~11
• Chrome
• Safari
• FireFox
• Opera

第三方

• QQ浏览器
• 360浏览器

window

window 代表浏览器窗口

Navigator（不建议使用）

Navigator 封装了浏览器的信息

大多数时候我们不会使用Navigator对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

location

location 代表当前的URL 信息

document

代表当前的页面，HTML DOM 文档树

• 获取具体的文档树节点

• 获取 cookie

  document.cookie
  

• 劫持 cookie 原理

  <script src="aa.js"></script>
  <!--恶意人员；获取你的 cookie 上传到他的服务器-->
  

• 服务器端可以设置 cookie ：httpOnly

history（不建议使用）

history.back() //后退
history.forword()  //前进

代表浏览器历史记录

8、操作DOM

核心

DOM：文档对象模型

浏览器网页就是一个DOM 树形结构

• 更新：更新DOM节点
• 遍历DOM节点：得到DOM节点
• 删除：删除一个DOM节点
• 添加：添加一个新的DOM节点

要操作一个DOM节点，就必须先获得这个DOM节点

获得dom节点

// 对应CSS选择器
var h1=document.getElementByTagName('h1');
var p1=document.getElementById('p1');
var father=document.getElementById('father');

var childrens=father.children; //获取父节点下的子节点
// father.firstChild
// father.lastChild

更新dom节点

<div id="id1">
    
</div>

<script>
    var id1=document.getElementById('id1');
</script>

操作文本：

• id1.innerText='345' //修改文本的值
  

• id1.innerHTML='<strong>123</strong>' //可以解析HTML文本标签
  

操作JS

id1.style.color='yellow';  //属性使用 字符串
id1.style.fontSize='20px';  // - 转 驼峰命名问题
id1.style.padding='2em';

删除节点

删除节点步骤：先获取父节点，再通过父节点删除自己

var self=document.getElementById('p1');
var father=p1.parentElement;\
father.removeChild(p1);

注意：删除多个节点的时候，children 是在时刻变化的，删除结点的时候一定要注意！

插入节点

创建一个新的标签

9、操作表单

表单是什么 form DOM树

• 文本框 text
• 下拉框 select
• 单选框 radio
• 多选框 checkbox
• 隐藏域 hidden
• 密码框 password
• …

表单的目的：提交信息

获得要提交的信息

<script>
    var input_text = document.getElementById('userCode');
	var man_radio = document.getElementById('man');
    // 得到输入框的值
    input_text.value;
    // 修改输入框的值
	input_text.value = '123';
	man_radio.value;
    // 对于单选框，多选框等固定的值，man_radio.value只能取到当前的值
	man_radio.checked; // 查看返回的结果是否为 true ，如果为 true，则被选中
	man_radio.checked=true; // 赋值
</script>
<!--多选框的值，就是定义好的 value -->
<p>
    <input type="radio" name="sex" value="man" id="man">男
	<input type="radio" name="sex" value="women" id="women">女
</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6PSzu2df-1631156385739)(C:\Users\MSP-002\AppData\Roaming\Typora\typora-user-images\image-20210611094857414.png)]

提交表单，MD5加密密码,表单优化

 <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
  <script>
    function login(){
      var userCode = document.getElementById('userCode');
      var password = document.getElementById('input-password');
      var md5password = document.getElementById('md5-password');

      // password.value = md5(password.value);
      md5password.value = md5(password.value);
      // 可以检验判断表单内容，true 就是通过提交，false，阻止提交
      return true;
    }
  </script>

</head>
<body>
<h1>登录</h1>

<!--表单绑定提交事件
onsubmit = 绑定一个提交检测的函数，true,false
将结果返回给表单，使用 onsubmit 接收
-->
<form class="loginForm" name="actionForm" id="actionForm" action="https://www.csdn.net/" method="post" onsubmit="login()">
  <div class="info">${error}</div>
  <div>
    <label>用&nbsp&nbsp&nbsp户：</label>
    <input type="text" id="userCode" name="userCode" placeholder="请输入用户名" required/>
  </div>
  <div>
    <label>密&nbsp&nbsp&nbsp码：</label>
    <input type="password" id="input-password" placeholder="请输入密码" required/>
  </div>
  <input type="hidden" id="md5-password" name="password">
  <div>
    <input type="submit" value="登录">
    <input type="reset" value="重置">
  </div>
</form>

10、jQuery

jQury库，里面存在大量的 JavaScript 函数

jQury查询

获取 jQury

<!--
公式：$(selector).action();选择器就是CSS选择器
-->

选择器

$('p').click(); // 标签选择器
$('#id1').click(); // id 选择器
$('.class1').click(); // class 选择器

事件

鼠标事件，键盘事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-un4mZ2Gg-1631156385741)(C:\Users\MSP-002\AppData\Roaming\Typora\typora-user-images\image-20210607141737493.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RVezvySg-1631156385742)(C:\Users\MSP-002\AppData\Roaming\Typora\typora-user-images\image-20210607141836679.png)]

操作DOM

$('#test-u1 li[name=python]').text(); // 获取值
$('#test-u1 li[name=python]').text('123'); // 设置值
$('test-u1').html(); // 获得值
$('test-u1').html('<strong>123</strong>'); // 设置值

CSS的操作

$(selector).css(name); // 返回第一个匹配元素的 CSS 属性值。
$(selector).css(name,value); // 设置所有匹配元素的指定 CSS 属性。

元素的显示和隐藏

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

ajax():

<script>
	// 通过 AJAX 加载一段文本
	$(document).ready(function(){
  		$("#b01").click(function(){
  		htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  		$("#myDiv").html(htmlobj.responseText);
  		});
	});
</script>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>

小技巧

1、巩固 JS (看 jQuery 源码)

2、巩固HTML、CSS （扒网站，全部 down 下来，然后对应修改看效果）