更新日志:

2021.9.17：根据狂神说的视频整理出该笔记

2022.4.21：由于学校前端选修课要考试了，根据教学ppt做了一些修订和补充

JavaScript基础

简介

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。被广泛应用于各种客户端Web程序尤其是HTML开发中，能给HTML网页添加动态功能，响应用户各种操作，实现诸如欢迎信息、数字日历、跑马灯，显示浏览器停留时间等特殊效果，提高网页的可观性。决定WEB页面的行为，具有客户端数据验证、用户交互等功能

1. JavaScript放置

<script>
   alert('JSnb')
<!--可以直接在这里面写-->
</script>
<!--这个写js的标签放在头部或者身体都可以-->


<script src = "js1.js">

<!--也可以新建一个js文件然后导入-->

</script>

JavaScript代码放置有4种情形:

头部;
主体;
单独的js文件;
直接在事件处理代码中。

<!-- edu_12_1_4.html -->
<html>
  <head>
  <title>直接在事件处理代码中加入JavaScript代码</title>
   </head>
  <body>
   <form>
    <input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接调用JavaScript代码">
    </form>
   </body>
</html>

JavaScript程序本身不能独立存在，它是依附于某个HTML页面，在浏览器端运行的。

注：如果引入引入了外部js文件，在<script></script>标记之间的所有JS语句都被忽略，不会执行

2. 消息对话框

JavaScript中的消息对话框分为告警框、确认框和提示框。

警告框

alert (message)

<!DOCTYPE html>
<!-- edu_12_2_1.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>告警消息框使用实例</title>
</head>
<body>
<script>
  alert("这是告警消息框！");
</script>
</body>
</html>

注：确定按钮必须响应，否则屏蔽一切操作。告警信息为纯文本信息或字符串，不能含有HTML标记

确认框

confirm (message)

<!-- edu_12_2_2.html -->
<html>
<head>
    <meta charset="UTF-8">
<title>确认框使用实例</title>
<script>
    function show_confirm() {
        var r=confirm("请选择按钮!");
        if (r==true){
            alert("您按了确定按钮！");
        }
        else{
            alert("您按了取消按钮！"); 
        }
    }
</script>
</head>
    <body>
         <input type="button" onclick="show_confirm()" value="显示确认框" />
    </body>
</html>

注：确认按钮的返回值，类型为逻辑值，确定true，取消false

提示框

prompt (text, defaultText)

<!-- edu_12_2_3.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>提示框使用实例</title>
  <script >
    function disp_prompt() {
      var name=prompt("请输入您的姓名","李大为");
      if (name!=null && name!="") {
        document.write("您好，" + name + "!"); 
      }
    }
  </script>
</head>
<body>
      <input type="button" onclick="disp_prompt()" value="单击显示提示框" />
</body>
</html>

注：选择“确定”返回输入的值，选择“取消”返回null。

3. 命令规范

标识符

标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符就是一个名字，JavaScript关于标识符的规定如下：

必须使用字母或者下划线开始。
必须使用英文字母、数字、下划线组成，不能出现空格或制表符。
不能使用JavaScript关键字与JavaScript保留字。
不能使用JavaScript语言内部的单词，比如Infinity，NaN，undefined等。
大小写敏感，如name和Name是不同的两个标识符。

关键字

关键字是JavaScript中已经被赋予特定意义的一些单词，关键字不能作为标识符来使用。

JavaScript的关键字
break	case	catch	continue	default
delete	do	else	finally	for
function	if	in	instanceof	new
return	switch	this	throw	try
typeof	var	void	while	with

JavaScript的保留字
abstract	boolean	byte	char	class
const	debugger	double	enum	export
extends	final	float	goto	implements
import	int	interface	long	native
package	private	protected	public	short
static	super	synchronized	throws	transient
volatile

4. 数据类型

所有的变量直接使用var声明就行如 var a = 1; 输出是console.log();

js不区分小数和整数

123
123.1
1.23e3
-99
NaN     //not a number
Infinity  //表示无限大

这里就是多了NaN (not a number类型和Infinity 无限大的类型, 再说一下比较运算符有点不一样

比较运算符

= 赋值
== 等于(类型不一样，值一样，也会判断为true)
=== 绝对等于(类型一样，值一样，结果为true)

须知

NaN===NaN 这个于所有的之都不相等，包括自己
只能通过isNaN(NaN)来判断是不是NaN
还有就是老生长谈的精度问题,不要直接比较浮点数

<script type="text/javascript">
    var i = 304;
    var f = 3.87;
    var s = 8.1e3;
    var o = 034;
    var h = 0x2A;
    document.write("十进制整型数304的输出结果："+i+"<br>");
    document.write("十进制浮点型数3.87的输出结果："+f+"<br>");
    document.write("十进制数科学计数法8.1e3的输出结果："+s+"<br>");
    document.write("八进制整型数034的输出结果："+o+"<br>");
    document.write("十六进制整型数0x2A的输出结果："+h+"<br>");
</script>

5. 数组

基本和Java类似,不详谈,不一样的就是什么类型都可以装,有点像集合

1
2
3

var arr = [1,2,3,"hello",null,true];
//或者
new array(1,2,3,"hello",null,true);

数组越界会undefined

同时数组还有一些方法如sort(),reverse(),concat();都是数组名.方法名();

来调用,就是多了一个join连接符

1
2
3

["C" "B" "A"]
arr.join('-')
"C-B-A"

多维数组

1
2
3

arr =  [[1,2],[3,4],["5","6"]];
arr[1][1]
4

6. 对象

js是一个面向对象的语言，因此也有对象这个概念

声明一个对象

var person{
  name:"niubi",
  age:3,
  tags:['js','is','niubi']
}

这里注意,对象是大括号,数组是中括号.而且对象的前几个属性使用逗号隔 ( , ) 开,最后一个不用符号
调用的话直接person.age 就行了

严格检查模式

在< script > 标签里第一句写上 'use strict’就行
这样局部变量就只能使用let声明 (局部变量推荐使用let声明)

7. 字符串

和Java类似,不同的多了一个多行字符串的编写

var msg = `chen
shuai
niu
bi`

这个符号声明的符号就是tab键上面的那个键
字符串是不可以变的,就像是Java里的String一样

8. 流程控制

for-in循环

语法

for(变量 in 对象)
    {
        在此执行代码
    }

感觉就是for-each循环，这里的变量可以是数组元素，也可以是对象的属性

例如

var age = [1,2,3,4,5,6,7];

for(var num in age){
   console.log(num);
}

9. map和set集合

和Java没啥区别

map集合

var map = new Map([["tom",100],["jack",90],["haha",80]]);
var name = map.get("tom");//通过key来获取value
map.set("admin",123456);
console.log(name);
map.delete("tom");

set集合

set: 无序不重复的集合

var set = new Set([3,1,1,1,1,1,1]);//set是可以去重的
> Set(2) {3, 1}       //前面的2是指长度，后面的是含有的元素

set.add(2);     //添加
set.delete(1);  //删除
> Set(2) {3, 2}

console.log(set.has(3)); //
true

遍历

同时遍历的方法多了个for-of循环…就是把 in 改成了 of 然后没有啥区别

var map = new Map([["tom",100],["jack",90],["haha",80]]);

for(let x of map){ console.log(x) }
(2) [100, 'tom']
(2) [90, 'jack']
(2) [80, 'haha']

//set遍历同理

10. 函数来一点点

函数相关

JavaScript函数分为系统内部函数和系统对象定义的函数及用户自定义函数。
函数就是完成一个特定的功能的程序代码。函数只需要定义一次，可以多次使用，从而提高程序代码的复用率，既减轻开发人员的负担，以降低了代码的重复度。
函数需要先定义后使用，JavaScript函数一般定义在HTML文件的头部head标记或外部JS文件中，而函数的调用可以在HTML文件的主体body标记中任何位置。
常用系统内部函数又称为内部函数（内部方法），与任何对象无关，可以直接使用。

基本语法

function 函数名(参数1, 参数2, … 参数N) {函数体；}

语法说明：

可以没有参数，但括号必须保留、以及包含在大括号内的由若干条语句构成的函数体。
不能在其他语句或其自身中嵌套function语句，也就是说，每个函数声明都是独立的。
函数名（参数），形参是用来接收函数调用者传递过来的实参。
调用实参与形参要一一对应，主要表现在类型、顺序、数量、内容要一致。

定义函数

//第一种方式
function abs(x){
   if(){
   ...
      }else{
   ...
    }
}

//第二种方式
var abs = function(x){
     if(){
   ...
      }else{
   ...
    }
}

//两种定义的方式是等价的

调用

1 2	`abs(-10) abs(10)`

ES6引入的新特性

rest类似于Java中的可变参数

ES6引入的新特性，获取除了已经定义的参数之外的所有参数，ES6新特性中还可以使用const定义常量

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

rest参数只能写在最后面，且必须使用…标示

11. 方法

定义一个方法

var chenshuai = {
   name:chen,
   age:19,
   run:function(){
    ....//一些方法体
   }
//方法要写在对象里面

}

chenshuai.name//直接点就可以进行调用

12. date对象的使用

var now = new Date();//获取date对象
now.getFullyear();//年
now.getMonth();//月
now.getDate();//日期
now.getDay();//星期几
now.getHours();//小时
now.getMinutes();//分钟
now.getSeconds();//秒

now.getTime();//时间戳

console.log(new Date(1595555665))  //时间戳转换为时间

13. 初识Json

这里只是简单的了解一下json，后面我会出专门的json篇
简单的三点

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

来一点代码理解

var user  = {
   name:"chenshuai",
   age:3,
   sex:'男'
}

//对象转换为json对象{"name":"chenhsuai","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

var obj = JSON.parse('{"name":"chenhsuai","age":3,"sex":"男"}')

//注意这里如果里面是双引号,外面就要用单引号.反之亦然

关于js和Json的区别

1 2	`var obj = {a:'hello',b:'hellob'}; //js var obj = {"a":"hello","b":"hellob"}; //json`

14. 原型

相当于Java中的继承

var student = {
   name:"chenhsuai",
   age:19,
   run:function(){
     console.log("student");
  }

} 

var xiaoming = {
   name:"xiaoming",
   age:19,
} 

xiaoming._proto_ = student;
//将xiaoming的原型设置为student，相当于继承，这个时候小明就可以调用student中的run方法

小明的原型是student 然后就可以使用student的方法了.在这里student也是一个对象

原型链：不深入了解

15. 操作BOM对象

javascript由三部分组成

核心：描述了javascript的语法和基本对象。
文档对象模型（DOM）：是处理网页内容的方法和接口，是HTML和xml的应用程序接口（API）。
浏览器对象模型（BOM）：各个浏览器厂商根据DOM在各个浏览器上的实现。

bom对象就是浏览器的对象模型，核心是对window的操作，主要针对浏览器窗口交互，BOM包含了DOM

bom对象模型图

window对象

代表浏览器窗口

页面跳转和重定向

1 2	`window.location.href = "url"; window.location.replace("url");`

Navigator对象

封装了浏览器的信息（大多数时候不会使用这个对象，因为会被认为的修改
所以不建议使用这些属性来判断和编写代码
）

screen对象

screen.width 获取屏幕的宽度

screen.height 获取长度

location

代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload() //刷新网页
//设置新的地址
location.assign('https://blog.mercury.com/')

document

document对象是客户端JavaScript最为常用的对象之一，在浏览器对象模型中，它位于window对象的下一层级。
document对象包含一些简单的属性，提供了有关浏览器中显示文档的相关信息，例如：该文档的URL、字体颜色，修改日期等。
document对象还包含一些引用数组的属性，这些属性可以代表文档中的表单、图象、链接、锚以及applet。
同其他对象一样，document对象还定义了一系列的方法，通过这些方法，可以使JavaScript在解析文档时动态地将HTML文本添加到文档中。

获取具体的文档树结点

<dl id = "app">
    <dt>java</dt>
    <dt>javaSE</dt>
    <dt>javaEE</dt>
</dl>

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

getElementById

通过getElementById方法可以快速访问某个HTML元素，而不必通过DOM层层遍历。
使用getElementById方法时如果元素的ID不是唯一的，那么会获得第一个符合条件的元素。

getElementsByName

getElementsByName方法用于返回HTML元素中指定name属性的元素数组，而且仅用于像input,radio,checkbox等表单元素对象。

getElementsByTagName

getElementsByTagName方法返回指定HTML标记名的元素数组
通过遍历这个数组获得每一个单独的子元素

定义多个P标记元素，通过getElementsByTagName(“p”)方法选中HTML标记是

的元素，返回是一个对象数组，可以通过下标访问这个数组。

appendChild

appendChild方法向当前节点对象追加节点，经常用于给页面动态的添加内容。

removeChild

removeChild方法是删除当前节点下的某个子节点，并返回被删除的节点。

其他方法

cloneNode();
replaceChild(newChild,oldChild);
inserBefore(newElement,targeElement);

获取cookie

例如： document.cookie

1 2	`document.cookie "buvid3=C1B1E27B-2C84-63F6-4A26-B4E8B02E8F6161085infoc"`

//你先要在html中设置那个标签的id是'h1'，以下相同
var h1 = document.getElementByTagName('h1');
var p1 = document.getElementByID('p1');
var p2 = document.getElementByclassName('p2');
var father = document.getElementByID('father');

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

获取页面标题

1 2	`document.title "百度一下，你就知道"`

注意

通过getElementById方法可以快速访问某个HTML元素，而不必通过DOM层层遍历。
使用getElementById方法时如果元素的ID不是唯一的，那么会获得第一个符合条件的元素。
getElementsByName方法用于返回HTML元素中指定name属性的元素数组。而且仅用于像input,radio,checkbox等表单元素对象

history

1
2
3

history.back() //后退

history.forward() //前进

16. 操作DOM对象节点

DOM简介

DOM是一个发展中的标准，它指定了JavaScript等脚本语言访问和操作HTML或者XML文档各个结构的方法，随着技术的发展和需求的变化，DOM中的对象、属性和方法也在不断地变化

对于大多数HTML文档来说，主要由以下几个节点构成：

•元素节点 (Element Node ),元素节点构成了DOM基础。在文档结构中，<html>,<head>、<body>、<h1>、<p>,<ul>等标签都是元素节点。

•文本节点(Text Node),文本节点包含在元素节点内，如h1、p、li等节点就可以包含一些文本节点。

•属性节点(Attribute Node),属性节点总是被包含在元素节点当中，可以通过元素节点对象调用getAttribute( )方法来获取属性节点。

DOM应用实例

方法名	说明
createElement(tagname)	创建标记名为tagname的结点
createTextNode(text)	创建包含文本text的文本结点
creatDocumentFragment()	创建文档碎片
removeChild(node)	删除一个名为node的子节点
appendChild(node)	添加一个名为node的子节点
insertBefore(node B ,node A)	在名为nodeA节点前插入一个名为nodeB的节点
replaceChild(node B ,node A)	用一个名为nodeB节点替换另一个名为nodeA节点
cloneNode(boolean)	克隆一个节点，它接收一个boolean参数，为true时表示该节点带文字；false表示该节点不带文字

更新节点

在DOM中有两个很重要的属性，这两个属性分别是innerText和innerHTML，通过这两个属性，可以更方便的进行文档操作。

在DOM中，如果需要动态地获取及设置节点属性的话，可以通过getAttribute( )方法setAttribute( )方法来处理

先获取一个节点,然后进行相应的操作

<div id = "id1">


</div>


<script>
   var id1 = document.getElementById("id1");
   id1.innerText = '456'                     // 修改文本的值
   id1.innerHTML = '<strong>123< strong>'   // 向标签中添加HTML语句
</script>

删除节点

需要通过父节点来删除子节点

<div id = "father">
   <h1> 标题</h1>
   <p id = "p1">p1</p>
   <p class = "p2">p2</p>
<div>

<script>
   
    var self = document.getElementById('p1');      //获得p1这个节点
    var father = p1.getElementById;                //获得p1的父亲节点

//第一种    
    father.removechild(p1);                        //通过父亲节点来删除儿子节点
//第二种
    father.removeChild(father.child[0]);           //通过数组的形式来删除
    father.removeChild(father.child[1]);
    //需要注意的是这种方式是动态的，删除了0号，1号就变成了0号；
</script>

插入节点

1. 追加

可以通过append方法来追加

<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.getElemntById('js');
    var list = document.getElementById('list');
    list.appendChild(js);        //追加到后面
</script>

2. 通过js创建一个新的节点

1
2
3

var newp = document.creatElement('p')//创建一个p标签
newp.id = 'newp';
newp.innerText = 'hello chengshuai'

插入到前面

 <div id = "list">
    <p id = "se">JavaSE</p>
    <p id = "ee">JavaEE</p>
    <p id = "me">JavaME</p>
</div>


<script type="text/javascript">
    var list = document.getElementById("list");
    var newnode = document.createElement("p");//创建一个p标签
    newnode.innerHTML = "hello chengshuai";
    let ee = document.getElementById("ee");

    list.insertBefore(newnode,ee);//将list插入到ee到前面  list必须是父标签
   // list.insertBefore(newnode,list.childNodes[0]);
</script>

3. 通过函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建节点举例</title>
    <script>
        function creatp(){
            var op = document.createElement("p");
            var otext = document.createTextNode("hello world");
            op.appendChild(otext);
            document.forms[0].appendChild(op);
        }
    </script>
</head>
<body>
    <form name = "from1">
        <input type = "button" value="点击创建节点" onclick="creatp()">  
        <!--这里主要是要记住可以在标签里加入 onclik 事件，然后在里面放函数，就会执行函数的内容-->
    </form>
</body>
</html>

4. 操作css

1
2
3

id1.style.color = 'yellow';
id1.style.fronSize = '20px';
id1.style.padding = '2px';

前端

#JavaScript

JavaScript基础

http://example.com/2021/09/17/JavaScript/

作者

Mercury

发布于

2021年9月17日

许可协议

HTML 上一篇

Java进阶下一篇