JavaScript基本语法

最新推荐文章于 2023-01-15 13:49:32 发布

原创最新推荐文章于 2023-01-15 13:49:32 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

本文详细介绍了JavaScript的基本概念，包括其功能、特点及在Web开发中的地位。讲解了如何引入JavaScript，以及变量定义、条件控制和浏览器控制台的使用。接着深入探讨了JavaScript的数据类型，如number、字符串、布尔值、数组和对象，强调了比较运算符的使用注意事项。此外，还简要提到了严格检查模式和流程控制语句。

一、什么是JavaScript

1.概述

JavaScript（简称“JS”）是当前最流行、应用最广泛客户端脚本语言。

功能：用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。
特点 :
- 解释型脚本语言
- 面向对象
- 弱类型（对使用的数据类型没有严格的要求）
- 动态性（不需要借助 Web 服务器就可以对用户的输入做出响应）
- 跨平台（不依赖操作系统，在浏览器中就可以运行）
- JavaScript严格区分大小写

JavaScript与HTML和CSS共同构成了我们所看到的网页，其中：

HTML用来定义网页的内容，例如：标题、正文、图像等；
CSS 用来控制网页的外观，例如颜色、字体、背景等；
JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。

2.引入

内部标签

demo.html:

<head>
	<!--script标签内，写Javascript代码-->
	<script>
		alert('Hello,world!');
	</script>
</head>
<body>
	<!--也可以写在body末尾处-->
</body>

外部引入

先新建一个abc.js文件:

alert('Hello,world!');

demo.html:

<head>
	<script src="abc.js"></script>
</head>

效果：弹出一个Hello,world!窗口
效果图

二、基本语法入门

1. 定义变量

变量类型（var）变量名 = 变量值

<script>
	var num = 1;
	var abc = "world";
	alert(num);
</script>

效果：
在这里插入图片描述

2. 条件控制

<script>
	var scores = 75;
	if (scores > 80 && scores < 100) {
    	alert("A");
	}
	else if (scores > 60 && scores < 80) {
    	alert("B");
	}
	else {
    	alert("C");
	}
</script>

效果：
在这里插入图片描述

3. 浏览器控制台使用

*由于JavaScript严格区分大小写，系统会报错
调试方法：
点击右键—点击审查元素—找到控制台
示例：（以条件控制为例）
元素：
在这里插入图片描述
控制台：

console.log(scores) ----- 在浏览器的控制台打印变量
源代码：

网络：

三、数据类型

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

1. 变量

var 李白 = "诗仙"；

2. number

js不区分小数和整数，Number

123       //整数123
123.1     //浮点数123.1
1.123e3   //科学计数法
-99       //负数
NaN       //not a number
Infinity  //表示无限大

3. 字符串

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

\'
\n
\t
\u4e2d     \u#### unicode字符
\x41              Ascll字符

多行字符串编写

<script>
	'use strict';
		//tab上面 esc键下面
    	var mss =
    		`hello
             world
             你好ya`
</script>

模板字符串

<script>
	'use strict';
		//tab上面 esc键下面
		let name = "qinqiang";
        let age = 3;
        let msg = `你好呀，${name}`;
</script>

字符串长度

console.log(str.length);

大小写转换

//注意：这里是方法，不是属性了
student.toUpperCase()
student.toLowerCase()

4. 布尔值

true
false

5. 逻辑运算

A && B   //两个都为真，结果为真
A || B   //一个为真，结果为真
A!       //真即假，假即真

6. 比较运算符

重要！！！

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

不要使用 == 比较，须知：

NaN===NaN,这个与所用的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

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

尽量避免使用浮点数进行运算

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

7. null 和 underfined

null 空
underfined 未定义

8. 数组

Array可以包含任意的数组类型

Java的数值必须是相同类型的对象，JS中不需要这样

<script>
	var arr = [1, 2, 3, 4, 5, 'hello', null, true];
	alert(arr[8]);
	arr[0] = 1;
</script>

取组数下标，如果越界：（通过下标取值）
在这里插入图片描述

长度

arr.length

注意：加入给 arr.length 赋值，数组大小就会发生变化，如果数组过小，元素可能会丢失。

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

arr.indexOf(2)
1

字符串的 “1” 和数字 1 是不同的

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

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

unshift (), shift () 头部

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

排序sort ()

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

元素反转 reverse ()

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

concat ()

(3) ["C","B","A"]
arr.concat([1,2,3])
(6) ["C","B","A",1,2,3]
arr
(3) ["C","B","A"]

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

连接符 join
打印拼接数组，使用特定的字符串连接

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

多维数组

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

9. 对象

对象是大括号，数组是中括号~~
每个属性之间用逗号隔开，最后一个不用

var person = {
    name: "qinqiang",
    age: 3,
    tags: ['js', 'java', 'web', '...']
}

取对象的值：

person.name
> "qinqiang"
person.age
> 3

若干个键值对

var person = {
	属性名:   属性值,
	属性名:   属性值,
	属性名:   属性值
}

//定义了一个person对象，它有四个属性！
var person = {
	name: "kuangshen",
	age: 3,
	email: "1111111111qq.com",
	score: 0
}

JS中对象，（……）表示一个对象，键值对描述属性××××： ××××，多个属性之间使用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有键都是字符串，值是任意对象！

对象赋值

person.name = "qinjiang"
"qinjiang"
person.name
"qinjiang"

使用一个不存在的对象属性，不会报错，undefined !

person.haha
undefined

动态的删减属性，通过delete删除对象的属性

delete person.name
true
person

动态的添加，直接给新的属性添加值即可

person.haha = "haha"
"haha"
person

判断属性值是否在这个对象中！ ××× in ×××！

'age' in person
true
//继承
'toString' in person
true

判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

四、严格检查模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
        前提：IDEA需要设置支持ES6语法
        'use strict';严格检查模式，预防javascript的随意性导致产生的一些问题
        必须写在javascript的第一行！！！
        局部变量建议使用let去定义
    -->
    <script>
        'use strict';
        let i = 1;

    </script>
</head>

<body>

</body>

</html>

五、流程控制

1. if 判断

var age = 3;
if (age>3){   //第一个判断
	alert("haha");
}else if(age<5){
	alert("kuwa~");
}else{   //否则
	alert("kuwa~");
}

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

while(age<100){
	age = age + 1;
	console.log(age)
}
//另一种写法
do{
	age = age + 1;
	console.log(age)
}while(age<100)

3. for 循环

for (let i = 0; i<100; i++){
	console.log(i)
}

4. forEach 循环

var age = [12,3,12,3,12,3,12,31,23,123];

//函数
age.forEach(function (value){
	console.log(value)
})

5. for…in

//for(var index in object){}
for(var num in age){
	if(age.hasOwnProperty(num)){
		console.log("存在")
		console.log(age[num])
	}
}