文章目录

前言
简介
- 概述
- 组成部分
- 特点
- 作用
基础语法
- 变量
- 字符串
- 数组
- 对象
- 流程控制
- Map 和 Set
- iterator
函数
- 定义函数
- 调用函数
- 变量的作用域
- 方法
面向对象编程
- 什么是面向对象
- 面向对象原型继承
- 面向对象class继承
操作BOM对象（重点）
操作DOM对象（重点）
- 获得节点
- 更新节点
- 删除节点
- 插入节点
- 创建一个新的标签
- 在前面插入节点：insertBefore
操作表单
- 获取表单信息
- 提交表单
- - iframe
  - submit
  - submit()
  - ajax
  - XHR
后记

前言

本博文专用于软件创新实验室JS学习课堂，很基础但很适用的 JS 相关知识，一篇让你对 JS 得心应手，了如指掌！

简介

概述

JavaScript 是目前 web 开发中不可缺少的脚本语言，JS 不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行 JavaScript 代码。

JavaScript 诞生于1995年，当时的主要目的是验证表单的数据是否合法。

JavaScript 本来应该叫 Livescript，但是在发布前夕，想搭上当时超热的 java 顺风车，临时把名字改为了JavaScript。（也就是说 js 跟 java 没有关系，当时只是想借助 java 的名气）。

组成部分

组成部分	作用
ECMA Script	构成了 js 核心的语法基础
BOM	Browser Object Model 浏览器对象模型，用于操作浏览器上的对象
DOM	Document Object Model 文档对象模型，用于操作网页中的元素

（1）ECMAScript（核心）：这一部分主要是 JS 的基本语法。

（2）BOM：Brower Object Model（浏览器对象模型），主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

（3）DOM：Document Object Model（文档对象模型），此处的文档暂且理解为 html，html 加载到浏览器的内存中，可以使用 JS 的 DOM 技术对内存中的 html 节点进行修改，用户从浏览器看到的是 JS 动态修改后的页面。（增删改查）

特点

1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解析 JS 的浏览器都可以执行，和平台无关）

与 Java 的区别：

Java	JavaScript
面向对象的语言	脚本语言，是基于对象和事件驱动的语言
Java 的源代码在执行之前必须经过编译	JavaScript 的代码可以由浏览器直接解释执行
Java 变量在使用之前必须声明	JavaScript 不需要
Java 是静态类型语言	JavaScript 是动态类型语言
Java 主要在服务端运行	Javascript 主要在客户端浏览器运行

作用

JavaScript 被用来改进设计、验证表单、检测浏览器、创建 cookies，等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比如： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

在目前学习阶段只要记住最常用的二个：
（1）运态修改html及css代码
（2）验证表单

基础语法

变量

定义变量
- var num = 1;
- var name = "idiot";

javascript 严格区分大小写，

console.log(变量名) 在浏览器控制台打印数据，

字符串

正常字符串我们使用单引号，或者双引号包裹，
注意转义字符 \，

\'
\n
\t
\u4e2d    \u##### Unicode字符
\x41      Ascall字符

多行字符串编写，使用撇号，

//tab 上面 esc下面
var msg =`helloworld你好呀nihao`

模板字符串，

let name = 'Tom';
let age = 3;
var msg = `你好，${name}`

字符串长度，

str.length

字符串的可变性，不可变，

var str = "stUdent"
str[0]=1
console.log(str[0])
console.log(str)

大小写转换，

//注意,这里是方法,不是属性了,所以要加括号
str.toUpperCase();
str.toLowerCase();

str.indexOf('t')
substring()，从0开始

str.substring(1)//从第一个字符串截取到最后一个字符串
str.substring(1,3)//[1,3)

数组

Array 可以包含任意的数据类型，

var arr = [1,2,3,4,5,6];//通过下标取值和赋值

长度

arr.length

注意：假如给 arr.length 赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失，

indexOf，通过元素获得下标索引

arr.indexOf(2)
1

字符串的"1"和数字 1 是不同的，

slice() 截取掉 Array 的一部分，返回的一个新数组，类似于 String 中 substring()
push()，pop()

push：压入到尾部
pop：弹出尾部的一个元素

unshift(),shift()

unshift：压入到头部
shift：弹出头部的一个元素

排序 sort()

["B","C","A"]
arr.sort()
["A","B","C"]

元素反转 reverse()

["A","B","C"]
arr.reverse()
["C","B","A"]

concat()

var arr = [1,2,3,4,5,6]
console.log(arr.concat(['a','b']))
console.log(arr)

注意：concat()并没有修改数组，只是会返回一个新的数组，

连接符 join()
多维数组

数组：存储数据（如何存，如何取，方法都可以自己实现！）

对象

若干个键值对，

var 对象名 = {属性名：属性值，属性名：属性值，属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {name:"Tom",age:3,email:"123456798@QQ.com",score:66
}

JS 中，{…} 表示一个对象，键值对描述属性 xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！

JavaScript中的所有的键都是字符串，值是任意对象！

对象赋值，
使用一个不存在的对象属性，不会报错！undefined，
动态的删减属性，通过 delete 删除对象的属性，
动态的添加，直接给新的属性添加值即可，
判断属性值是否在这个对象中！xxx in xxx，
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()，

流程控制

if 判断，
while 循环，避免程序死循环，
for 循环，
forEach 循环，ES5.1特性，
for…in… 下标，for(var index in object){}，

Map 和 Set

ES6的新特性

Map，
Set，

iterator

ES6的新特性

遍历数组，

遍历 Map，

遍历 Set，

函数

定义函数

定义方式一：

function abs(value){if(value >= 0){return value;}else{return -value;}
}

一旦执行到 return 代表函数结束，返回结果；如果没有执行 return，函数执行完也会返回结果，结果就是 undefined，

定义方式二：

var abs = function(value){if(value >= 0){return value;}else{return -value;}
}

function(value){…} 是一个匿名函数，但是可以把结果赋值给 abs，通过 abs 就可以调用函数！方式一和方式二等价！

调用函数

abs(10)    //10
abs(-10)   //10

参数问题：JavaScript 可以传任意个参数，也可以不传递参数，参数进来是否存在问题？假设不存在参数，如何规避？

var abs = function(value){//手动抛出异常来判断if(typeof value !== 'number'){throw 'Not a number';}if(value >= 0){return value;}else{return -value;}
}

Arguments

arguments 代表传递进来的所有参数，是一个数组！

var abs = function(value){console.log("x=>"+x);for(var i=0; i<arguments.length; i++){console.log(arguments.[i]);}if(value >= 0){return value;}else{return -value;}
}

问题：arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数，

Rest

ES6之前，

if(arguments.length>2){for(var i=2; i<arguments.length; i++){...}
}

ES6之后，获取除了已定义的参数之外的所有参数，

function a(a,b,...rest){console.log("a=>"+a);console.log("b=>"+b);console.log(rest);
}

rest 参数只能写在最后面，必须用 … 标识。

变量的作用域

在 javascript 中，var 定义变量实际是有作用域的，

假设在函数体重声明，则在函数体外不可以使用（闭包），

function a(){var x = 1;x++;
}x += 2;    //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部就不冲突，

function a(){var x = 1;x++;
}function b(){var x = 'A';x++;
}

内部函数可以访问外部函数的成员，反之则不行，

function a(){var x = 1;//内部函数可以访问外部函数的成员,反之则不行function b(){var y = ++x;    //2}var z = ++y;        //Uncaught ReferenceError: y is not defined
}

假设内部函数变量和外部函数变量重名，

function a(){var x = 1;function b(){var x = 'A';console.log('inner'+x);}console.log('outer'+x);b()
}
a()

在 JavaScript 中，函数查找变量从自身函数开始，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function a(){var x = "x" + y;console.log(x);var y = "y";
}

结果：x undefined，
说明：js 执行引擎，自动提升了 y 的声明，但是不会提升变量 y 的赋值，

这个是在 javascript 建立之初就存在的特性，养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护，

全局变量

//全局变量
x = 1;function f(){console.log("in-->"+x)
}f()
console.log("out-->"+x)

全局对象 window，默认所有的全局变量都会自动绑定在 window 对象下，

var x = 'test'
alert(x)
alert(window.x)

alert() 这个函数本身也是一个 window 的变量；

var x = 'test'window.alert(x)var old_alert = window.alertwindow.alert = function(){}//失效
window.alert(123)//恢复
window.alert = old_alert
window.alert(456)

失效是因为全局变量 function(){}将原有的内容给覆盖了，

javascript 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 Refrence，

规范

由于我们的所有变量都会绑定到 window 上，如果不同的 js 文件，使用了相同的全局变量，就会产生冲突，那如何减少这样的冲突？

//唯一全局变量
var test = {}//定义全局变量
test.name = 'idiot'
test.add = function(a,b){return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题，

jQuery 中就是使用的该方法：jQuery.name，简便写法：$()，

局部作用域

function f(){for(var i=0; i<10; i++){console.log(i)}console.log(i++)
}

i 在 for 循环作用域外也依旧可以使用，因此可以使用 let 来代替 var 使之成为局部变量，

常量

在 ES6 之前，定义常量：只有用全部大写字母命名的变量就是常量，建议不要修改这样的值，

在 ES6 引入了常量关键字 const，

const PI = '3.14'
console.log(PI)
PI = '123'    //Uncaught TypeError: Assignment to constant variable.
console.log(PI)

方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法，

var person = {name:"idiot",birth:1999,age:function(){return new Date().getFullYear()-this.birth;}
}
//属性
person.name
//方法,一定要带()
person.age()

面向对象编程

什么是面向对象

javascript，java，c# —> 面向对象，但是 javascript 有些区别！

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

面向对象原型继承

原型对象
当创建一个新函数时，系统会根据一组特定的规则为函数创建一个 prototype 属性，该属性会指向一个名为原型对象的对象，在默认情况下，该对象会自动生成一个构造函数（constructor），该构造函数是一个指向函数的指针。而在原型对象中，除了有这个构造函数，我们还可以添加其他的属性和方法。

通俗来讲就是，当我们新建一个函数A时，函数A内部会有一个属性，该属性指向一个对象（名字叫原型对象），而这个对象里面默认有一个构造函数，这个构造函数指向我们最初新建的函数A。然后，我们还可以在原型对象中添加属性和方法。

//①默认情况下，构造函数是空的
function Person（）{//构造函数首字母大写
}//②添加属性和方法
Person.prototype.name="dp";
Person.prototype.doSomething=function(）{alert(this.name);
};//③定义好构造函数和其他属性方法之后，就可以创建实例了
var person1=new Person();
var person2=new Person();

var Student = {name: 'idiot',age: 18,run: function(){console.log(this.name+" is running.")}
}var girl = {name: 'girl'
}//girl 的原型对象是 Student
girl.__proto__ = Student

面向对象class继承

class 关键字是在 ES6 引入的，

添加方法

//给student添加一个方法
//1、先定义一个类、属性、方法
class student{constructor(name){this.name = name;}hello(){alert('hello');}
}//使用方法
var person = new student('小明');
person.hello();

继承

class student{constructor(name){this.name = name;}hello(){alert('hello');}
}class xiaoStudent extends student{constructor(name,grade){super(name);this.grade = grade;}mygrade(){alert('我是一个小学生')}
}//使用
var xiaoStudent = new xiaoStudent("xiaohong",1);

本质：查看对象原型，

原型链，

操作BOM对象（重点）

浏览器介绍

JavaScript 和浏览器关系？
JavaScript 诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型，

IE6~11
Chrome
Safari
Firefox
Opera

window

window 代表浏览器窗口，

window.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919

Navigator

Navigator 封装了浏览器的信息（不建议使用），

navigator . appName
"Netscape"
navigator . appVersion
"5.0 (windows NT 10.0; WOw64) Applewebkit/537.36 (KHTML， like Gecko)
Chrome/63.0.3239.132 Safari/537.36"
navigator . userAgent
"Mozi11a/5.0 (Windows NT 10. 0; WOw64) ApplewebKit/537.36 (KHTML， like :
Gecko) Chrome/63.0. 3239.132 Safari/537.36"
navigator. platform
"Win32"

大多数时候，我们不会使用 navigator 对象，因为会被认为修改！不建议使用这些属性来判断和编写代码，

Screen

代表屏幕尺寸，

screen.width
1920
screen.Height
1080

Location（重要）

代表当前页面的 URL 信息

location 属性：

主机：\host
当前指向的位置：href
协议：protocol
重新加载的方法：f reload() //location.reload() 刷新网页
(设置新的地址:location.assign(‘想要跳转的地址’))

document

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

//获取具体的文档树节点：
<d1 id="app"><dt> Java</dt><dd> JavaSE</dd><dd> JavaEE</dd>
</d1>
<script>var d1 = document. getElementById(' app ');
</script>//获取cookie
document.cookie//劫持cookie原理：把一段能劫持cookie的js代码放在网站上 一点开就能把你的cookie拿了
<script src='劫持cookie.js'></script>
<!-- 获取你的cookie上传到他的服务器 -->

服务器端可以设置 cookie 为 httpOnly，

history（不建议使用）

history代表浏览器的历史记录，

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

操作DOM对象（重点）

核心

浏览器网页就是一个 Dom 树形结构(与 div 包围的标签差不多)，

更新 dom 节点
遍历 dom 节点
删除 dom 节点
添加 dom 节点
要操作一个 dom 节点，就必须先获得这个 dom 节点，

获得节点

<div><h1>标题一</h1><p id='p1'>p1</p><p class='p2'>p2</p>
</div><script>
//对应css选择器
var h1 = document.getElementByTagName('h1'); //这里就是获取到了这个dom节点
var p1 = document.getElementById('p1');
var p2 = document.getElementByClassName('p2');
var father = document.getElementById('father');var childrens = father.children;// 获取父节点下的所有子节点
var childrens = father.children[index]; //获取其中一个节点
//father.firstchild 获取父节点的第一个子节点
//father.lostchild 获取父节点的最后一个子节点
</script>

这是原生代码，之后都用 jQuery，

更新节点

<div id="id1"></div><script>var id1 = document.getElementById('id1')
</script>//操作文本
id1.innerText = '123' //innerText方法修改文本内容
id1.innerHTML = '<strong>123</strong>' //innerHTML解析HTML超文本的 可以修改id的样式//操作css
id1.style.color = 'red' //style.什么：style方法修改css样式,即可以在js里操作修改样式
id1.style.padding = '2em' //属性使用字符串包裹

删除节点

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

<div id="father"><h1>标题一</h1><p id='p1'>p1</p><p class='p2'>p2</p>
</div><script>var self = document.getElementById('p1');var father = p1.parentElement; //找到p1的父节点father.removeChild(self) //通过父节点使用removechild删掉自己(只有标记为id选择器的节点才可以删除)//删除是一个动态的过程：father.removeChild(father.children[0])father.removeChild(father.children[1])father.removeChild(father.children[2])
</script>

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

插入节点

我们获得了某个 dom 节点，假设这个 dom 节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是如果这个 dom 节点已经存在元素，就不能这么干了，因为会发生覆盖，这个时候就使用追加节点的方法：

<p id="js">JavaScript</p><div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div><script>var js = document.getElementById('js'); //获取想要加入的节点var list = document.getElementById('list'); //获取想要加入的父节点list.appendChild(js); //在list节点下追加子节点
</script>

创建一个新的标签

<script>var js = document.getElementById('js');//已经存在的节点var list = document.getElementById('list');//通过JS创建一个新的节点var newP = document.creatElement('p');//创建一个p标签newP.id = 'newP';newP.innerText = 'Hello,idiot';//创建一个标签节点var myScript = document.creatElement('script');myScript.setAttribute('type','text/javascript');//可以创建一个style标签var myStyle = document.creatElement('style');//创建了一个空style标签myStyle.setAttribute('type','text/css');myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容document.getElementByTagName('head')[0].appendChild(myStyle);
</script>

在前面插入节点：insertBefore

var ee = document. getElementById('ee');
var js = document . getElementById('js');
var list = document . getElementById('list');//要包含的节点. insertBefore(newNode, targetNode)
list.insertBefore(js,ee); //在list节点中（list是父节点），在ee节点前加入目标节点js

操作表单

表单 form

文本框 <input type=text>
下拉框 <select></select>
单选框 <input type=radio>
多选框 <input type=checkbox>
隐藏框 <input type=hidden>
密码框 passwd

获取表单信息

<body>
<form action='#' method="post">//文本框<p><span>用户名：</span><input type="text" id="username"></p>//单选框<p><span>性别</span><input type="radio" name="sex" value="man" id="boy">男<input type="radio" name="sex" value="women" id="girl">女</p>
</form>
</body><script>var input_text = document.getElementById('username';)//得到文本框的值input_text.value//修改文本框的值input_text.value='123'var boy_radio = document.getElementById('boy';)var girl_radio = document.getElementById('girl')//对于单选框、多选课等固定的value,boy_radio.value只能去到当前的值boy_radio.checked; //看返回的结果，是否为true，如果为true则被选中boy_radio.checked=true; //赋值
</script>

提交表单

iframe

通过一个隐藏的 iframe 可实现不刷新页面进行提交表单，form 表单的 target 设置为 iframe 的 name 名称，form 提交表单给当前页面的 iframe，则不会刷新页面，

<form action="#" method="post" target="t_i"><input type="text" name="name"/>
</form>
<iframe name="t_i"style="display:none"></iframe>

submit

一般表单提交通过 type=submit 实现，input type="submit"，浏览器显示为 button 按钮，通过点击这个按钮提交表单数据跳转到某个页面，

<form action="#" method="post"><input type="text" name="name"/><input type="submit" value="提交">
</form>

submit()

js 事件触发表单提交，通过 button、链接等触发事件，

<form id="form" action="#" method="post"><input type="text" name="name"/>
</form><script><!--js-->
document.getElementById("form").submit();
<!--jQuery-->
$("#form").submit();</script>

ajax

采用 ajax 异步方式，通过 js 获取 form 中所有 input、select 等组件的值，将这些值组成 Json 格式，通过异步的方式与服务器端进行交互，
一般将表单数据传送给服务器端，服务器端处理数据并返回结果信息等，

<form id="form"  method="post"><input type="text" name="name" id="name"/>
</form><script>var params = {"name", $("#name").val()}
$.ajax({type: "POST",url: "#",data: params,dataType : "json",success: function(msg){}
});</script>

一般配合后端的 @ResponseBody 和 @RequestBody 使用，或者是 @RestController 这样该类里面所有的方法都只会返回 json 字符串了，不用再每一个方法上都添加 @ResponseBody 了；

同时这里要注意的是，不能使用 dataType: "json"，不然会报 parsererror 的错误，因为 dataType: "json" 会试图将 controller 的返回值解析成 JSON ，但当返回值是一个字符串或者其他值时，它并不是一个真正的 JSON，解析器会解析失败的！

ajax 请求中还要一个重要的参数：contentType: "application/json"，表示传入参数的格式，一般会在后面加一个 charset=utf-8，减少乱码。

XHR

AJAX 使用的 XMLHttpRequest 的对象与服务器通信。让我们尝试通过下面显示的图像了解 AJAX 的流程或 AJAX 的工作原理。
　正如在上面的示例中所看到的，XMLHttpRequest 对象起着重要作用。

用户从 UI 发送请求，JavaScript 中调用 XMLHttpRequest 对象。
HTTP 请求由 XMLHttpRequest 对象发送到服务器。
服务器使用 JSP，PHP，Servlet，ASP.net 等与数据库交互。
检索数据。
服务器将 XML 数据或 JSON 数据发送到 XMLHttpRequest 回调函数。
HTML 和 CSS 数据显示在浏览器上。

<script>var money = $("#money").val();var XHR = new XMLHttpRequest();var FD  = new FormData();FD.append("money",money);XHR.open('POST', "#");XHR.send(FD);</script>

后记

掌握了这篇博文的内容后，完全能够胜任一般的 JS 开发，要想更进一步，则需要自己继续钻研，加油，骚年！

软件创新实验室：JavaScript学习相关推荐

【软件创新实验室2021年暑假集训】Java技术培训——Java前置知识学习
[软件创新实验室2021年暑假集训]Java技术培训--Java前置知识学习文章目录 [软件创新实验室2021年暑假集训]Java技术培训--Java前置知识学习前言一.了解计算机 1.计算机的 ...
【软件创新实验室2021年寒假集训】Java技术培训——Java前置知识学习
系列文章目录 [软件创新实验室2021年寒假集训]汇总篇 20级Java培训第一天:[软件创新实验室2021年寒假集训]Java技术培训--Java前置知识学习第二天:Java基础(一) 第三天: ...
【2021软件创新实验室暑假集训】SpringMVC框架（设计原理、简单使用、源码探究）
系列文章目录 20级 Java篇 [2021软件创新实验室暑假集训]计算机的起源与大致原理 [2021软件创新实验室暑假集训]Java基础(一) [2021软件创新实验室暑假集训]Java基础(二) ...
【软件创新实验室2021年寒假集训】Java后端开发漫谈及感悟分享
系列文章目录 [软件创新实验室2021年寒假集训]汇总篇 20级Java培训第一天:[软件创新实验室2021年寒假集训]Java技术培训--Java前置知识学习第二天:Java基础(一) 第三天: ...
软件创新实验室：Spring框架
文章目录前言初识Spring 简介组成创建配置说明别名 Bean的配置 import 思考 IOC 本质理论推导创建对象方式 1. 使用无参构造创建对象(默认) 2. 使用有参构造创建 ...
软件创新实验室：MySQL数据库与简单SQL语句使用
文章目录前言简介特点 SQL DDL:操作数据库.表 DML:增删改表中数据 DQL:查询表中的记录后记拓展范式第一范式 1NF 第二范式 2NF 第三范式 3NF B+树节点结构插 ...
【21届软件创新实验室暑假集训】后端赛道大作业
目录前言一.项目需求 1.背景介绍 2.需求简介 1.前后台(必做) 2.权限管理(必做) 3.评论设计(必做) 4.用户注册(必做) 5.多方式登录(选做) 6.成员信息管理(必做) 7.博文模 ...
【2022软件创新实验室暑假集训】Java环境安装与基础介绍
Java环境安装与基础介绍文章目录文章目录 Java环境安装与基础介绍文章目录 Java 简介主要特性关于语言学习的选择 Python Java Go&Rust Java环境配置 J ...
【软件创新实验室2021年暑假集训】Java技术培训——Java基础（一）
Java基础(一) 前言在学习了Java的前置知识之后,我们真正进入了Java的学习. 今天讲的是Java基础(一),涵盖的内容大致有注释.关键字.标示符.数据类型.常量.变量.作用域那么废话不多 ...

软件创新实验室：JavaScript学习