前端之JavaScript
<h1 id="前端之javascript">前端之JavaScript</h1>
<p></p><p></p>
<h2 id="1-javascript-发展历史">1. JavaScript 发展历史</h2>
<p>JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程序设计，指令式编程，以及函数式编程。<br>
它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。<br>
它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。<br>
它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。</p>
<h2 id="2-javascript基础语法">2. JavaScript基础语法</h2>
<h3 id="21-注释">2.1 注释</h3>
<p>在<code>JavaScript</code>中单行注释使用<code>//</code>，多行注释<code>/**/</code></p>
<pre><code class="language-javascript">// 这是单行注释
/*
这是多行注释的第一行，
这是第二行。
*/
</code></pre>
<h3 id="22-变量和常量">2.2 变量和常量</h3>
<p>在JavaScript中使用<code>var</code>和<code>let</code>定义变量:</p>
<ul>
<li>变量必须以字母开头</li>
<li>变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）</li>
<li>变量名称对大小写敏感（y 和 Y 是不同的变量）</li>
</ul>
<p><code>var</code>定义的都为全局变量</p>
<p><code>let</code>可以声明局部变量</p>
<p><strong>声明变量:</strong></p>
<pre><code class="language-javascript">// 定义单个变量
> var name
> name = 'Hans'
//定义并赋值
> var name = 'Hans'
> name
'Hans'
// 定义多个变量
> var name = "Hans", age = 18
> name
'Hans'
> age
18
//多行使用反引号`` 类型python中的三引号
> var text = `A young idler，
an old beggar`
> text
'A young idler，\nan old beggar'
</code></pre>
<p><strong>声明常量:</strong></p>
<p>在<code>JavaScript</code>中使用<code>const</code>定义常量</p>
<pre><code class="language-javascript">> const pi = 3.14
> pi
3.14
>pi = 3.01
Uncaught TypeError: Assignment to constant variable.
at <anonymous>:1:4
</code></pre>
<h3 id="23-基本数据类型">2.3 基本数据类型</h3>
<p><strong>值类型(基本类型)</strong>：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol(表示独一无二的值,ES6引入)。</p>
<p><strong>引用数据类型</strong>：对象(Object)、数组(Array)、函数(Function)。</p>
<h4 id="231-number类型">2.3.1 Number类型</h4>
<pre><code class="language-javascript">> var a = 5
> typeof a //查看变量的类型
number
> var b = 1.3
> typeof b
number
// 不管整型还是浮点型打开出来的结果都是number类型
/*
NaN:Not A Number
NaN属于数值类型 表示的意思是 不是一个数字
*/
parseInt('2345')// 转整型
2345
parseInt('2345.5')
2345
parseFloat('2345.5') // 转浮点型
2345.5
parseFloat('ABC')
NaN
parseInt('abc')
NaN
</code></pre>
<h4 id="232-string类型">2.3.2 String类型</h4>
<pre><code class="language-javascript">> var name = 'Hans'
> typeof name
'string'
//常用方法
// 变量值长度
> name.length
4
// trim() 移除空白
> var a = ' ABC '
> a
' ABC '
> a.trim()
'ABC'
//移除左边的空白
> a.trimLeft()
'ABC '
//移除右边的空白
> a.trimRight()
' ABC'
//返回第n个字符,从0开始
> name
'Hans'
> name.charAt(3)
's'
> name.charAt()
'H'
> name.charAt(1)
'a'
// 在javascript中推荐使用加号(+)拼接
> name
'Hans'
> a
' ABC '
> name + a
'Hans ABC '
// 使用concat拼接
> name.concat(a)
'Hans ABC '
//indexOf(substring, start)子序列位置
> text
'A young idler，\nan old beggar'
> text.indexOf('young',0)
2
//.substring(from, to) 根据索引获取子序列
> text.substring(0,)
'A young idler，\nan old beggar'
> text.substring(0,10)
'A young id'
// .slice(start, end) 切片, 从0开始顾头不顾尾
> name.slice(0,3)
'Han'
// 转小写
> name
'Hans'
> name.toLowerCase()
'hans'
// 转大写
> name.toUpperCase()
'HANS'
// 分隔
> name
'Hans'
> name.split('a')
(2) ['H', 'ns']
</code></pre>
<h4 id="233-boolean布尔值">2.3.3 Boolean布尔值</h4>
<p>在<code>JavaScript</code>中布尔值<code>true</code>和<code>false</code> 都是小写</p>
<p><code>""(空字符串)、0、null、undefined、NaN都是false。</code></p>
<p><strong>null和undefined</strong></p>
<ul>
<li>null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;</li>
<li>undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。</li>
</ul>
<h4 id="234-array数组">2.3.4 Array数组</h4>
<p>使用单独的变量名来存储一系列的值。类似<code>python</code>中的列表。</p>
<pre><code class="language-javascript">> var array1 =
> array1
(6)
> console.log(array1)//console.log打印类似python中的print
3
// length元素个数
> array1.length
6
// 在尾部增加元素，类型append
> array1.push('D')
7
> array1
(7)
// 在头部增加元素
> array1.unshift(0)
8
> array1
(8)
//取最后一个元素
> array1.pop()
'D'
> array1
(7)
//取头部元素
> array1.shift()
0
> array1
(6)
//切片， 从0开始顾头不顾尾
> array1.slice(3,6)
(3) ['a', 'b', 'c']
// 反转
> array1.reverse()
(6) ['c', 'b', 'a', 3, 2, 1]
// 将数组元素连接成字符串
> array1.join() // 什么不都写默认使用逗号分隔
'c,b,a,3,2,1'
> array1.join('')
'cba321'
> array1.join('|')
'c|b|a|3|2|1'
// 连接数组
> var array2 = ['A','B','C']
> array1.concat(array2)
(9) ['c', 'b', 'a', 3, 2, 1, 'A', 'B', 'C']
// 排序
> array1.sort()
(6)
// 删除元素，并可以向数据组中添加新元素(可选)
> array1.splice(3,3)// 删除元素
(3) ['a', 'b', 'c']
> array1
(3)
> array1.splice(3,3,'A','B','C')// 删除元素从添加新元素
[]
> array1
(6)
/*
splice(index,howmany,item1,.....,itemX)
index:必需,必须是数字。规定从何处添加/删除元素。
howmany:必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素
*/
// forEach() 将数组的每个元素传递给回调函数
> array1.forEach(function test(n){console.log(n)})
1
2
3
A
B
C
// 返回一个数组元素调用函数处理后的值的新数组
> array1.map(function(value){return value +1})
(6)
</code></pre>
<h3 id="24-运算符">2.4 运算符</h3>
<h4 id="241-数学运算符">2.4.1 数学运算符</h4>
<p><code>+ - * / % ++ --</code></p>
<pre><code class="language-javascript">> var a = 6
> var b = 3
// 加
> a + b
9
// 减
> a - b
3
// 乘
> a * b
18
// 除
> a / b
2
// 取模(取余)
> a % b
0
// 自增1(先赋值再增1)
> a++
6
> a
7
// 自减1(先赋值再减1)
> a--
7
> a
6
// 自增1(先增1再赋值)
> ++a
7
// 自减1(先减1再赋值)
> --a
6
> a
6
//a++会先赋值再进行自增1运算，而++a会先进行自增运算再赋值,--同理
</code></pre>
<h4 id="242-比较运算符">2.4.2 比较运算符</h4>
<p><code>> >= < <= != == === !==</code></p>
<pre><code class="language-javascript">// 大于
> a > b
true
// 大于等于
> a >= b
true
// 小于
> a < b
false
// 小于等于
> a <= b
false
// 弱不等于
> a != b
true
// 弱等于
> 1 == '1'
true
// 强等于
> 1 === '1'
false
// 强不等于
> 1 !== '1'
true
/*
JS是一门弱类型语言(会自动转换数据类型)，所以用两个等号进行比较时，JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较，所以以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
*/
</code></pre>
<h4 id="243-逻辑运算符">2.4.3 逻辑运算符</h4>
<p><code>&& || !</code></p>
<pre><code class="language-javascript">&& 与
|| or
! 非
</code></pre>
<h4 id="244-赋值运算符">2.4.4 赋值运算符</h4>
<p><code>= += -= *= /=</code></p>
<pre><code class="language-javascript">// 赋值
> var x = 3
// 加等于
> x += 2
5
// 减等于
> x -= 1
4
// 乘等于
> x *= 2
8
// 除等于
> x /= 2
4
</code></pre>
<h3 id="25-流程控制">2.5 流程控制</h3>
<h4 id="251-if">2.5.1 if</h4>
<pre><code class="language-javascript">1， if(条件){条件成立执行代码}
> var x = 3
> if (x > 2){console.log("OK")}
OK
2, if(条件){条件成立执行代码}
else{条件不成立执行代码}
> if (x > 4){console.log("OK")}else{"NO"}
'NO'
3, if(条件1){条件1成立执行代码}
else if(条件2){条件2成立执行代码}
else{上面条件都不成立执行代码}
> if (x > 4){console.log("OK")}else if(x > 5){console.log("OK2")}else{console.log('Ha')}
Ha
</code></pre>
<h4 id="252-switch">2.5.2 switch</h4>
<pre><code class="language-javascript">var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("不在范围")
}
不在范围
</code></pre>
<p>注意:<code>switch</code>中的<code>case</code>子句通常都会加<code>break</code>语句，否则程序会继续执行后续<code>case</code>中的语句。</p>
<h4 id="253-for">2.5.3 for</h4>
<pre><code class="language-python">// for 循环
for(起始值;循环条件;每次循环后执行的操作){
for循环体代码
}
for (var i = 0; i<10; i++){
console.log(i)
}
0
1
2
3
4
5
6
7
8
9
</code></pre>
<h4 id="254-while">2.5.4 while</h4>
<pre><code class="language-javascript">// while 循环
while(循环条件){
循环体代码
}
> var i = 0
> while(i<10){
console.log(i)
i++
}
0
1
2
3
4
5
6
7
8
9
</code></pre>
<h4 id="255-break和continue">2.5.5 break和continue</h4>
<pre><code class="language-javascript">// break
for (var i = 0; i<10; i++){
if (i == 5){break}
console.log(i)
}
0
1
2
3
4
// continue
for (var i = 0; i<10; i++){
if (i == 5){continue}
console.log(i)
}
0
1
2
3
4
6
7
8
9
</code></pre>
<h3 id="26-三元运算">2.6 三元运算</h3>
<pre><code class="language-javascript">> a
6
> b
3
//条件成立c为a的值，不成立c为b的值
> var c = a > b ? a : b
> c
6
// 三元运算可以嵌套
</code></pre>
<h3 id="27-函数">2.7 函数</h3>
<pre><code class="language-javascript">1. 普通函数
> function foo1(){
console.log("Hi")
}
> foo1()
Hi
2. 带参数函数
> function foo1(name){
console.log("Hi",name)
}
> foo1("Hans")
Hi Hans
> var name = "Hello"
> foo1(name)
Hi Hello
3. 带返回值函数
> function foo1(a,b){
return a + b
}
> foo1(1,2)
3
> var a = foo1(10,20)//接受函数返回值
> a
30
4. 匿名函数
> var sum = function(a, b){
return a + b;
}
> sum(1,2)
3
// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
> (function(a, b){
return a + b
})(10, 20)
30
5. 闭包函数
// 内部函数可以使用外部函数的参数，这个内部函数就是个闭包函数
var city = "BJ"
function f(){
var city = "SH"
function inner(){
console.log(city)
}
return inner
}
var ret = f()
ret()
执行结果:
SH
</code></pre>
<p>ES6中允许使用“箭头”（=>）定义函数。</p>
<pre><code class="language-javascript">var f = v => v;
// 等同于
var f = function(v){
return v;
}
</code></pre>
<p><code>arguments</code>参数 可以获取传入的所有数据</p>
<pre><code class="language-javascript">function foo1(a,b){
console.log(arguments.length)//参数的个数
console.log(arguments) // 第一个参数的值
return a + b
}
foo1(10,20)
结果:
2 //参数的个数
10 // 第一个参数的值
30 // 返回相加的结果
</code></pre>
<p><strong>注意:</strong>函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回</p>
<h3 id="28-内置对象和方法">2.8 内置对象和方法</h3>
<p><code>JavaScript</code>中的所有事物都是对象：字符串、数字、数组、日期等。在<code>JavaScript</code>中，对象是拥有属性和方法的数据。</p>
<h4 id="281-date对象">2.8.1 Date对象</h4>
<pre><code class="language-javascript">> var data_test = new Date()
> data_test
Fri Feb 11 2022 21:44:43 GMT+0800 (中国标准时间)
> data_test.toLocaleString()
'2022/2/11 下午9:44:43'
> data_test.toLocaleDateString()
'2022/2/11'
> var data_test2= new Date("2022/2/11 9:44:43")
> data_test2.toLocaleString()
'2022/2/11 上午9:44:43'
// 获取当前几号
> data_test.getDate()
11
// 获取星期几，数字表示
> data_test.getDay()
5
// 获取月份(0-11)
> data_test.getMonth()
1
// 获取完整年份
> data_test.getFullYear()
2022
// 获取时
> data_test.getHours()
21
// 获取分
> data_test.getMinutes()
44
// 获取秒
> data_test.getSeconds()
43
// 获取毫秒
> data_test.getMilliseconds()
290
// 获取时间戳
> data_test.getTime()
1644587083290
</code></pre>
<h4 id="282-json对象">2.8.2 Json对象</h4>
<pre><code class="language-javascript">JSON.stringify()// 序列化, 把对象转换成JSON字符串
JSON.parse()// 反序列化，把JSON字符串转换成对象
// 序列化
> var jstojson = JSON.stringify(person)
> jstojson
'{"Name":"Hans","Age":18}'
// 反序列化
> var x = JSON.parse(jstojson)
> x
{Name: 'Hans', Age: 18}
> x.Age
18
</code></pre>
<h4 id="283-regexp对象">2.8.3 RegExp对象</h4>
<p>正则</p>
<pre><code class="language-javascript">> var reg1 = new RegExp("^{4,7}");
> reg1
/^{4,7}/
> reg1.test("Hans666")
true
> var reg2 = /^{4,7}/// 推荐这种写法使用 /正则/
> reg2
/^{4,7}/
> reg2.test('Hasdfa')
true
全局匹配：
> name
'Hello'
> name.match(/l/)
['l', index: 2, input: 'Hello', groups: undefined]
> name.match(/l/g)
(2) ['l', 'l']
// 正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
全局匹配注意事项:
> var reg2 = /^{4,7}/g
> reg2.test('Hasdfa')
true
>reg2.lastIndex;
6
> reg2.test('Hasdfa')
false
> reg2.lastIndex;
0
> reg2.test('Hasdfa')
true
> reg2.lastIndex;
6
> reg2.test('Hasdfa')
false
> reg2.lastIndex;
0
// 全局匹配会有一个lastindex属性
> reg2.test()
false
> reg2.test()
true
// 校验时不传参数默认传的是undefined
</code></pre>
<h4 id="284-自定义对象">2.8.4 自定义对象</h4>
<p>就相当于是<code>python</code>中的字典</p>
<pre><code class="language-javascript">> var person = {'Name':"Hans", "Age":18}
> person
{Name: 'Hans', Age: 18}
> person.Name
'Hans'
> person["Name"]
'Hans'
// 也可以使用new Object创建
> var person2 = new Object()
> person2.name = "Hello"
'Hello'
> person2.age = 20
20
</code></pre>
<h2 id="3-javascript-bom和dom操作">3. JavaScript BOM和DOM操作</h2>
<p>BOM（Browser Object Model）是指浏览器对象模型，使用js操作浏览器。</p>
<p>DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。使用js操作前端页面。</p>
<h3 id="31-window-对象">3.1 window 对象</h3>
<p>所有浏览器都支持 window 对象。它表示浏览器窗口。</p>
<pre><code class="language-python">//览器窗口的内部高度
window.innerHeight
706
//浏览器窗口的内部宽度
window.innerWidth
1522
// 打开新窗口
window.open('https://www.baidu.com')
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
// 关闭当前窗口
window.close()
//后退一页
window.history.back()
// 前进一页
window.history.forward()
//Web浏览器全称
window.navigator.appName
'Netscape'
// Web浏览器厂商和版本的详细字符串
window.navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
// 客户端绝大部分信息
window.navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
// 浏览器运行所在的操作系统
window.navigator.platform
'Win32'
//获取URL
window.location.href
// 跳转到指定页面
window.location.href='https://www.baidu.com'
// 重新加载页面
window.location.reload()
</code></pre>
<h3 id="32-弹出框">3.2 弹出框</h3>
<p>三种消息框：警告框、确认框、提示框。</p>
<h4 id="321-警告框">3.2.1 警告框</h4>
<pre><code class="language-javascript">alert("Hello")
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225243640-1572156192.png" ></p>
<h4 id="322-确认框">3.2.2 确认框</h4>
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225205414-770035518.png" ></p>
<pre><code class="language-javascript">> confirm("你确定吗?") // 点确认返回true
true
> confirm("你确定吗?")// 点取消返回false
false
</code></pre>
<h4 id="323-提示框">3.2.3 提示框</h4>
<p><code>prompt("请输入","提示")</code></p>
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225311668-600169621.png" ></p>
<p>如果直接点<code>确定</code>后端得收到提示两个字，也可以删除输入自己想输入的内容、</p>
<p>如果直接点<code>取消</code>后端收到<code>null</code></p>
<h3 id="33-计时相关">3.3 计时相关</h3>
<p>在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。</p>
<pre><code class="language-javascript">// 等于3秒钟弹窗
setTimeout(function(){alert("Hello")}, 3000)
var t = setTimeout(function(){alert("Hello")}, 3000)
// 取消setTimeout设置
clearTimeout(t)
</code></pre>
<p><code>setTimeout() </code>方法会返回某个值。在上面的语句中，值被储存在名为 <code>t</code> 的变量中。假如你希望取消这个 <code>setTimeout()</code>，你可以使用这个变量名来指定它。</p>
<h4 id="331-setinterval--间隔指定的毫秒数不停地执行指定的代码">3.3.1 setInterval()间隔指定的毫秒数不停地执行指定的代码</h4>
<pre><code class="language-javascript">每三秒弹出 "hello" ：
setInterval(function(){alert("Hello")},3000);
</code></pre>
<p>取消使用<code>clearInterval() </code>方法.它用于停止 <code>setInterval() </code>方法执行的函数代码。</p>
<pre><code class="language-javascript">var t = setInterval(function(){alert("Hello")},3000);
//取消：
clearInterval(t)
</code></pre>
页:
[1]