IT小白

这个屌丝很懒，什么也没留下！

热门标签

javaScript基础语法

作者：IT小白 | 2024-03-08 10:23:15

踩

javascript基础

JavaScript基础语法

关注公众号“轻松学编程”了解更多。

一、JavaScript的诞生

JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言
名字起源: Mocha->LiveScript->JavaScript

二、js用途

它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等。可用于开发网站、游戏、移动端app等

三、js语言的组成

javascript = ECMAScript + BOM + DOM

核心(ECMAScript)
浏览器对象模型(BOM)
文档对象模型(DOM)

1、关键字


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

2、保留字


class	enum	extends	super
const	export	import

3、术语

返回值：运算后得到的值
程序的三大流程控制

我们的计算机在执行一个程序的时候，最基本的方式是一条语句接一条语句的执行。但不可能所有的问题都能用顺序执行方式就能解决，总会有一些跳转。采用结构化的程序设计，可以大大提高开发程序的速度、提高程序的可读性、程序运行的速度和效率
- 顺序：从上朝下执行的代码就是顺序
- 分支(选择)：根据不同的情况，执行对应代码
- 循环：重复做一件事情

javascript = ECMAScript + BOM + DOM

核心(ECMAScript)
浏览器对象模型(BOM)
文档对象模型(DOM)

四、js代码的编写位置

html属性
<a href="javascript:alert(100)"></a>

script标签

<script type="text/javascript">
    alert('你好')
</script>
1
2
3

js文件
独立的js文件需要引入页面才能执行
```
 <script type="text/javascript" src="js/common.js"><script>
1
```
script标签属性
- type:类型
- src :js文件路径
  带src属性的script标签内不能写js代码

五、JS变量的定义

变量定义(使用var关键字)：变量是存储数据的容器
var age; //var 是关键字，age是变量名

var obj = / /; 是JavaScript中正则对象的写法
赋值：
age = 20;
定义的同时赋值：
var age=20;
可以一次定义多个变量：
var name="zhangsan", age=18, weight=108;

1、数组Array

一系列数据的集合，每一项可以保存任何类型的数据，称为数组的元素，每个元素之间用逗号隔开

数组格式：[1,2,3]

2、数组创建方式

//1)字面量(推荐)
var arr = [1,2,3];

//2)使用构造函数创建
var arr = new Array();//创建一个空数组
var arr = new Array('王大锤',18 ,'普通青年','广州');
//创建数组并同时写入数据
1
2
3
4
5
6
7

3、数组访问与写入

索引（下标）：从0开始

var arr = ['html5','css3','javascript'];

//访问
arr[0]; //=> 'html5'
arr[2]; //=> 'javascript'

//写入
arr[3] = 'web前端';
1
2
3
4
5
6
7
8

length：表示数组的长度
arr.length; //=> 3

4、数组遍历

for循环

格式：for(变量初始化;判断条件;变量更新){执行语句}

var arr = ['html5','css3','javascript'];
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}
1
2
3
4

5、数组方法

push：往数组尾部添加一个或多个元素，返回数组新的长度
pop：删除数组最后一个元素，返回删除的元素
unshift：往数组开头添加一个或多个元素，返回数组新的长度
shift：删除数组第一个元素，返回删除的元素
splice(start,deleteNum,…items)：在数组中插入、删除、替换的通用方法
- start：起始索引位置
- deleteNum：要删除的数量
- items：插入的元素（可以是多个）
slice(start[,end])：返回数组的片段或子数组，从start开始到end(不包括end所对应的元素)

如果省略end参数，则截取到数组的最后一项
支持负数
sort：将数组中的元素排序，并返回排序后的数组

默认以字符串的排列方式（转换成ASCII码进行对比）
reverse：将数组中的元素颠倒顺序，返回逆序后的数组
join(separator) 返回字符串值，其中包含了连接到一起的数组的所有元素
- separator为分隔符，默认为逗号
indexOf(keyword)

方法返回keyword所在数组中的索引值，如果数组不存在keyword，则返回-1
forEach(fn)
遍历方法，for循环没有太大差别，比for循环方便
map(fn)

返回一个数量相等的数组，内容是什么取决于在fn中返回的值

以上方法都对数组中的每一项运行给定函数fn,，函数中有三个形参分别为
- item：数组中的每一项,
- index：遍历过程中对应的索引值,
- array：对数组的引用

6、对象Object

字面量（推荐）：var obj = {name:'小明',age:18}
构造函数：var obj = new Object();

7、读取属性值

obj.name;//==>小明

如果读取一个不存在的属性，返回undefined

8、添加属性

    obj.sex = '男';
    obj.marry = false;
    obj['weight'] = 60
1
2
3

9、删除属性

    var obj = {name:'laoxie',age:18,gender:'man'}

    //删除age属性
    delete obj.age;
1
2
3
4

10、遍历对象for…in

    var obj = {
        name:'laoxie',
        age:18
        gender:'男'
    }

    //遍历对象
    for(var attr in obj){
        //遍历过程把每次把对象属性赋值给attr
        //所以获取对象属性值为：obj[attr]
        document.write(obj[attr]);//分别输出：'laoxie',18,'男'
    }
1
2
3
4
5
6
7
8
9
10
11
12

11、数组与对象的组合

    [{
        id:'001',
        name:'iphone7 plugs',
        imgurl:'img/ip7.jpg',
        price:5899.00,
        sale:5888.00,
        color:'土豪金'
    },{
        id:'002',
        name:'Note7',
        imgurl:'img/note7.jpg',
        price:3899.00,
        sale:998.00,
        color:'黑色'
    },{
        id:'003',
        name:'荣耀7',
        imgurl:'img/honor7.jpg',
        price:1999.00,
        sale:1899.00,
        color:'白色'
    }]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

六、输出

alert() 弹窗输出
console.log() 输出到控制台
innerHTML 输出到双标签元素内容
value 输出到表单元素

七、JS代码规范:

JS变量的命名规范
- 变量名必须是数字,字母,下划线_和美元符$组成;
- 第一个字符不能为数字
- 不能使用关键字或保留字
代码可读性
- 标识符区分大小写，如：age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。
- 变量命名尽量遵守驼峰原则: myStudentScore
- 变量命名尽量见名知意
- 保持代码缩进
- JS语句的末尾尽量写上分号;
- 运算符两边都留一个空格, 如 var n = 1 + 2;
- 注释
  - 单行注释：//注释内容
  - 多行注释（和CSS注释一样）
    - /*注释内容*/
    - 多行注释不能嵌套

八、JS数据类型

基本数据类型
- Number：数字
  - NaN：是一个特殊的值，即非数值(Not a Number)。数学运算无法得到数字时，就会返回NaN
    - 不代表任何值，也不等于任何值，甚至自己都不等于自己
    - 任何数据与它运算都返回NaN
    - isNaN(a)：用来判断a到底是不是非数字,返回布尔值
- String：字符串
  用引号（单/双引号）括起来的内容
- Boolean: 布尔类型
  Boolean 类型有两个值：true和false
引用数据类型
- Array：数组
- Object：对象
特殊数据类型
- Null
  Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)
- Undefined
  Undefined类型只有一个值，即特殊的 undefined，在使用 var 声明变量，但没有对其赋值，这个变量的值就是 undefined

数据类型判断

typeof

typeof 'html5'; //=>string
typeof 100; //=>number
typeof true //=>boolean
typeof null //=>object
1
2
3
4

数据类型转换
- 基本数据类型转换：利用内置函数进行转换(主动)
```
    var str = '10';//string
    Number(str);//10,number
    Boolean(str);//true
1
2
3
```
- 隐式转换(被动)
  - 如果运算不能进行下去，内部就会尝试进行数据类型的转换
  - 支持隐式转换的运算：逻辑运算、关系运算、算术运算

九、运算

1、算术运算：

+, -, *, /, %:加,减,乘,除,取余(取模)

toFixed(num): 在数字后面调用，num为小数位，有四舍五入的功能，得到一个字符串
parseInt()：取整:获取到第一个不为数字的字符为止
parseFloat()：取小数

+ 的特殊用法：字符串拼接

+号两侧只要有一个是字符串则为字符串拼接

2、赋值操作：

=
var num1=10;//表示把10赋值给num1变量
+=：在原来的内容基础上追加内容
str += 'test' <==> str = str + 'test'
-=：
var n=10; n -= 2 <==> n = n - 2
*=,/=,%=

3、关系运算（返回布尔值）

==(等于), !=(不等于)
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)
===、恒等于/全等于，比较的时候要求值和类型都相等（不会进行类型隐式转换）
!==、不全等于
关系运算符的比较规则:
\1. 数字和数字比较, 直接比较大小
\2. 数字和字符串比较, 字符串转换为数字后再比较
\3. 字符串和字符串比较, 进行字符的ASCII码值比较

4、逻辑运算（返回布尔值）

&&: 逻辑与

&&比||优先级高
||：逻辑或
!: 逻辑非
```
!true //=> false
!false //=> true
1
2
```

5、一元运算

++: 自增1（在原来的数值基础上加1）
–：自减1（在原来的数值基础上加1）
前置：
```
var num = 10;
++num;--num;
1
2
```
返回值：返回值是减1（加1）之后的值
后置：
```
var num = 10;
num++;num--
1
2
```
返回值：返回值是没减1（加1）之前的值

十、条件判断语句

if语句

if单分支：

if(条件){
    //条件成立(返回true)时，执行这里的代码，否则不执行
}
1
2
3

if双分支：
当if括号内的表达式结果成立，执行执行语句1，否则执行执行语句2

    if(条件){
        语句1
        //条件成立(返回true)时，执行这里的代码，忽略以下代码
    }else{
        语句2
        //条件不成立(返回false)时，执行这里的代码
    }
1
2
3
4
5
6
7

if多分支：
从上往下，满足哪个条件就执行其相对应的语句，都不满足时，执行最后的else的语句，只能进入其中之一

if(条件1){
    //条件1成立(返回true)时，执行这里的代码，忽略以下代码
}else if(条件2){
    //条件2成立(返回true)时，执行这里的代码，忽略以下代码
}else{
    //以上条件都不成立(都返回false)时，执行这里的代码
}
1
2
3
4
5
6
7

1、三元运算

格式：条件 ? 条件成立代码 : 条件不成立代码

var a=20;
var b = 50;
var sum = a>b ? a-b : a+b;
1
2
3

2、switch语句

switch(值) {
    case value1: //要求value1与值恒等
        //如果表达式的值恒等于value1，代码从这里开始执行
        break;
    case value2:
        //如果表达式的值恒等于value2，代码从这里开始执行
        break;
    case value3: 
        //如果表达式的值恒等于value3，代码从这里开始执行
        break;
    case value4: 
        //如果表达式的值恒等于value4，代码从这里开始执行
        break;
    default: 
        如果以上条件都不成立，默认执行这里的代码
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

switch语句在比较值时使用的是全等操作符，因此不会发生类型转换
case: 当符合条件时，会从符合条件的那一条case语句开始，依次顺序向下执行
break: 跳出switch语句
default: 当所有的case都不满足的情况下会执行defalut下面的语句

十一、循环语句

循环就是重复做一件事, 在JS中指的是循环执行某部分代码.
循环结构是程序中一种很重要的结构，其特点是在给定条件成立时，反复执行某程序段，直到条件不成立为止

只要条件成立，就会不断地执行花括号里的语句
编写条件时，要避免出现死循环

1、while循环

//变量初始化
while(条件){
    //条件成立就会不断地执行这里的代码，直到条件不成立
    //所以这里一般会伴随着条件的更新
}
1
2
3
4
5

2、do…while

//变量初始化
do {
    //不管条件是否成立，先执行一次这里的代码，再进行条件判断，
    如果条件依然成立，则再次执行这里的代码，依此类推
    //所以这里一般会伴随着条件的更新
} while(条件)
1
2
3
4
5
6

3、for循环

for(变量初始化; 条件判断; 变量更新){
    //循环条件成立，则执行这里的代码
}
1
2
3

两个分号必须写

十二、函数

1、函数的定义

关键字声明（声明式）：
格式：function 函数名(){}
```
function sum(){}
1
```
函数的声明会提前 ==> 解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）;
函数表达式(赋值式)
```
var sum = function(){}
1
```

2、函数的执行

手动调用:
sum();
事件驱动:
格式：元素.事件 = 函数名;
buton.onclick = sum;
1. 事件发生都是一瞬间的

3、常见事件触发函数

onclick：点击事件
ondblclick：双击事件
onmouseover：鼠标移入事件
onmouseout:鼠标移开事件
onchange：内容改变事件（一般用于表单元素）
onkeyup：键盘按键弹起事件
onkeydown: 键盘按下时触发（会连续触发）

4、作用域

俗称“使用范围”，即能够使用某个变量的范围，分<全局作用域>和<局部作用域>

全局变量与局部变量
- 全局变量：在全局作用域下声明的变量，可以在任意地方中使用，作用范围比较大，我们称为全局变量
- 局部变量：在函数内（局部作用域）声明的变量，只在函数中可以使用，作用范围较小，我们称之为局部变量
变量的访问规则
- 就近原则（如查找变量a）：
  - 使用变量a时先从当前函数查找，如果当前函数有变量a则使用;
  - 如果当前函数无变量a,则往父级函数查找，如果找到则使用，并停止查找;
  - 如果在父级函数还是无法找到，则继续往上一层函数查找，以此类推，直到最顶层(全局作用域)，如果还是没找到，则报not defined错误;
- 作用域链：每个函数在定义时就形成了局部作用域，如果存在多个函数嵌套，他们之间就会建立起某种联系，直到全局作用域，这种联系称之为作用域链。当函数访问变量时，根据就近原则在这个作用域链中从内到外查询变量【声明提前：提前到当前作用域最顶部】。
```
比如：
var name = 'liang';
function show(){
	console.log(name);
	var name = 'xiao';
} 
由于js的声明提前，name会提前到函数show内的最顶部，
1
2
3
4
5
6
7
```

执行语句console.log(name)时会输入undefined。
```

5、函数的参数

形参，就是局部变量
形参与实参的区别:
- 形参：声明函数时圆括号内定义的变量
- 实参：函数执行时传入的参数
  
  形参和实参的数量可以不同
arguments
函数内部隐藏的对象（是一个类数组），保存着实参的信息
- length: 实参的数量
引用数据类型与基本数据类型的传参（引用传递与值传递）
- 函数作为参数传递

6、函数返回值

终止函数的执行,return后的代码不会执行
return后如果有值，则把这个值返回到函数执行的地方

如果函数没有return,执行完后返回undefined

7、函数中的this

函数中的this是一个关键字，表示当前对象，而当前对象是谁，取决于谁调用了这个函数。

十三、文档对象模型 DOW

节点操作
* 操作属性
* 设置css样式
* 操作内容

绑定事件
生成
- document.createElement()
插入
- 父级元素.appendChild(添加的元素) : 追加
获取节点:
- document.getElementById();//node
- getElementsByClassName();//[node,node]
- getElementsByTagName();//[node,node]
获取元素的捷径
- html: document.documentElement
- body: document.body
- a : document.links //[]
- image: document.images //[]

<body>
	<h1 class="title">节点操作</h1>
	<div id="list">
		<a href="#">Google</a>
		<a href="#" id="baidu">Baidu</a>
		<a href="#">Yahoo</a>
	</div>
	<a href="#">360</a>
	<script>

        var baidu = document.getElementById('baidu');
        //node
        console.log(baidu);

        var title = document.getElementsByClassName('title');
        //[node]
        console.log(title);

        var link = document.getElementsByTagName('a');
        console.log(link);

        var list = document.getElementById('list');
        var list_link = list.getElementsByTagName('a');
        console.log(list_link);

        // 生节成点
        var h2 = document.createElement('h2');
        h2.id = 'subTitle';
        h2.innerHTML = '人工智能';

        // 获取body
     // var body = document.getElementsByTagName('body')[0];
     //[body]
        var body = document.body;
        body.appendChild(h2)

	</script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

十四、浏览器对象模型 BOM

window 可省略

不建议省略window的场景
- 事件
- 属性
事件
- onload 页面所有元素(包括DOM,图片等资源文件)加载完成后执行
函数(方法)
- alert() 弹出框
- parseInt() 字符转为整型
- parseFloat() 字符转为浮点型
- Number()
- String()
- Boolean()
浏览器可视区域的宽高:
- window.innerWidth
- window.innerHeight
自动:
- 设置定时器:var timer = setInterval(fn,duration)
  - 每个duration时间(ms),执行一次fn,返回一个定时器标识
- clearInterval(timer) :清除定时器
对象
document

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>02函数的执行</title>
	<style>
		#box{width:200px;height:100px;background-color: #f00;}
	</style>
	<script>

		 window.onload = function(){
		 	var box = document.getElementById('box');//节点(对象)
  		//节点(对象)

			function show(){
				console.log('laoxie');
			}
			// 手动执行(主动)
			show();
			// 事件驱动执行(被动)
			box.onclick = show;
			box.onmouseover = function(){
				console.log('over');
			}
			box.onmouseout = function(){
				console.log('out')
			}
			// document.onkeyup = function(event)
			{console.log(event.keyCode,event.key)
			// 	// 事件对象:event
			// 	console.log('upupup')
			// }
			// document.onkeydown = function(event){
			// 	// 事件对象:event
			// 	if(event.keyCode === 38){
			// 	}
			// 	console.log('down')
			// }
            // 表单改变事件onchange
  			username.onchange = function(){
  				console.log(666)
  			}
  		}
  	</script>
  </head>
  <body>
  	<div id="box"></div>
  	<input type="text" id="username">
  </body>
  </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

后记

【后记】为了让大家能够轻松学编程，我创建了一个公众号【轻松学编程】，里面有让你快速学会编程的文章，当然也有一些干货提高你的编程水平，也有一些编程项目适合做一些课程设计等课题。

也可加我微信【1257309054】，拉你进群，大家一起交流学习。
如果文章对您有帮助，请我喝杯咖啡吧！

公众号

赞赏码

关注我，我们一起成长~~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/209409