JavaScript基础概念与基本语法

最新推荐文章于 2022-11-02 12:49:00 发布

Selcouther

最新推荐文章于 2022-11-02 12:49:00 发布

阅读量151

点赞数

分类专栏： JavaEE 前端文章标签： javascript html html5

本文链接：https://blog.csdn.net/m0_50609545/article/details/119938123

版权

JavaEE 同时被 2 个专栏收录

46 篇文章 18 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

一、简介

JavaScript通常简称为js或者js脚本

概念：
1、 解释性脚本语言（代码不进行预编译）
2、轻量级的编程语言
3、可插入 HTML 页面的编程代码
（插入HTML页面后由所有的现代浏览器执行）
作用
为网页添加动态功能
为用户提供更流畅美观的浏览效果

通常JavaScript脚本通过嵌入在HTML中来实现自身功能

二、注释

与java的单行和多行注释相同

单行注释：以 // 开头

多行注释：以 /* 开始，以 */ 结尾

三、用法

有三种

1、 HTML页面中的js

必须位于script围堵标签之间

对位置要求不严格（可以放head、body、最后，通常为head或者最后）

必须位于script围堵标签之间

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js位置1</title>					
		<!--
			内部：js位置没有严格的要求
		-->
		<!--写在head-->
		<script>
			alert("hello script111!")
		</script>

	</head>
	<body>
		<!--写在body-->
		<script>
			alert("hello script222!")
		</script>
		
	</body>
</html>
	<!--写在最后-->
	<script>
		alert("hello script333!")
	</script>

2、外部的js

可以把脚本保存到外部文件中，外部 JavaScript 文件的文件扩展名是 .js

1. 外部编写.js文件

function fun1(){
	alert("这是js外部文件");
}

2. 引入js文件（head或者body都可以）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js位置2</title>			
		<!--
			外部：写在js文件中，外部文件不需要script标签
			引入外部script文件
			调用script文件
		-->
		<script type="text/javascript" src="../../js/myScript.js" ></script>
		<script>
			fun1();
		</script>	
			
	</head>
	
	<body>
	</body>
	
</html>

3、标签属性中的js

直接编写在HTML标签的一些属性中，用于简单的JavaScript代码的编写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js位置3</title>			
	</head>
	<body>
		<!--
			行内的js写法
		-->
		<a href="javascript:alert('行内的js写法')">行内的js写法</a>
		
	</body>
</html>

四、显示数据

① window.alert()弹出框

window可以省略，等价于alert(“显示的内容”);

② document.write()将内容写入

document.write(“显示的内容”)

③ innerHTML写入

document.getElementById(“id值”).innerHTML=“显示的内容”
由于加载从上往下，因此需要先加载id值，故将script放在文档最下面

④ console.log写入到浏览器控制台

console.log(“显示的内容”)

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>显示数据</title>
		<script>	
			/*
			1、使用windows弹出框,弹出数据，两种写法都可以
			*/
			alert("hello")
			window.alert("hello again")

			/*
			2、使用document,显示数据
			 */
			document.write("hello document")

			/*
			 3、使用innerHTML写入
			 加载从上往下，因此先获取div1，此时div1还未加载，因此将script放在文档最下面
			 */
			//document.getElementById("div1").innerHTML="hello innerHTML"
			/*
			 4、使用console.log写入到浏览器控制台
			 */
			console.log("hello log")
		</script>
	</head>
	<body>
		<div id = "div1">			
		</div>
	</body>
</html>

<!--
3、使用innerHTML写入
加载从上往下，因此先获取div1，此时div1还未加载，因此将script放在文档最下面
-->
<script>
	document.getElementById("div1").innerHTML="hello innerHTML!"
</script>

五、基本语法

JavaScript 是一个脚本语言，浏览器在读取代码时逐行地执行脚本代码（js语句向浏览器发出的命令，告诉浏览器该做什么）

tips：
一般一行只写一条语句，每句结尾编写分号结束

5.1 变量

5.1.1 基本语法

关键字：var

统一用var进行变量声明，变量根据赋值来确定数据类型

声明变量：
var 变量名称；
命名规则：
1、变量必须以字母开头
2、变量也能以 $ 和 _ 符号开头
3、变量名称对大小写敏感（y 和 Y 是不同的变量）
4、不能使用关键字保留字
命名规范：
1 、见名知意，根据变量的意义去命名
2、驼峰命名，第一个单词的首字母小写，之后每个单词的首字母大写

代码示例：

var myCompany; //声明变量
myCompany='alibaba'; //赋值

var x=5;//声明的同时赋值
var y=6;

var z=x+y;//变量也可以存储表达式

5.1.2 作用域

局部变量
函数内部声明的变量，只能在函数内部使用
全局变量
函数外声明的变量，所有脚本和函数都能访问

5.1.3 生命周期

变量的生命期从被声明的时间开始

局部变量会在函数运行以后被删除，全局变量会在页面关闭后被删除

5.2 数据类型

5.2.1 基本数据类型

字符串String

存储字符的变量

字符串必须使用单引号或双引号

tips：
嵌套中，单引号嵌套双引号or双引号嵌套单引号

代码示例：

var myCompany="alibaba";

//引号嵌套,单引号嵌套双引号or双引号嵌套单引号
var demo1='字符串中嵌套"字符串"。';
var demo2="字符串中嵌套'字符串'。";

数字Number

只有一种数字类型，既可以表示浮点数也可以表示整数

代码示例：

var intValue=11;
var floatValue=11.1;

//极大或极小的数字可以通过科学计数法来书写：
var demo1=666e5; //66600000
var demo2=-666e-5; //-0.00666

布尔Boolean

true or false

代码示例：

var f1=true;
var f2=false;

空Null

表示值为空

将变量的值设置为 null 来清空变量

var isNULL=null;

未定义Undefined

表示变量不含有值

共有4中情况会出现undefined

① 变量声明且没有赋值

var obj;
alert(obj);//obj值为undefined

② 获取对象中不存在的属性

var obj;
alert(obj.name);//报错信息： "Uncaught TypeError: Cannot read property 'name' of
undefined"

③ 函数需要实参，但是调用时没有传值

此时形参为undefined

④ 函数调用没有返回值或者return后没有数据

此时接收函数返回的变量是undefined

代码示例：

function printNum(num){
	alert(num);
}
var result=printNum();//调用函数未传递参数，执行函数的时候num的值是undefined
alert(result);//result的值也是undefined，因为printNum()没有返回值

Symbol

表示独一无二的值

5.2.2 引用数据类型

对象Object

数组Array

函数Function

5.2.3 动态类型（不推荐使用）

动态类型，即相同的变量可用作不同的类型

代码示例：

var param; // param类型为 undefined
param = 5; // param 为数字
param = "alibaba"; // param 为字符串

5.3 运算符

算数运算符
+ 、 - 、 * 、 / 、 % 、 ++ 、 - -
赋值运算符
= 、 += 、 -= 、*= 、 /= 、 %=
字符串的连接符
+
逻辑运算符
&& 、 || 、！
条件运算符
？:
比较运算符
== 、!= 、 > 、 < 、 >= 、 <=
===：绝对等于（值和类型均相等）
!==：不绝对等于（值和类型有一个不相等，或两个都不相等）

代码示例：

var x=5;
var f=(x===5); // true
f=(x==='5');// false
f=(x!==5); // false
f=(x!=='5');// true

5.4 对象

5.4.1 常用对象

String

.length能够获取字符串的长度（ length为属性，非方法，因此调用时不需要加() ）

转移符号的长度算一个，即\'长度为1

方法：

方法	描述
charAt()	返回在指定位置的字符
charCodeAt()	返回在指定的位置的字符的 Unicode 编码
concat()	连接两个或更多字符串，并返回新的字符串
fromCharCode()	将 Unicode 编码转为字符
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置
includes()	查找字符串中是否包含指定的子字符串
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置
match()	查找找到一个或多个正则表达式的匹配
repeat()	复制字符串指定次数，并将它们连接在一起返回
replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串
search()	查找与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为字符串数组
startsWith()	查看字符串是否以指定的子字符串开头
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转换为大写
trim()	去除字符串两边的空白
toLocaleLowerCase()	根据本地主机的语言环境把字符串转换为小写
toLocaleUpperCase()	根据本地主机的语言环境把字符串转换为大写
valueOf()	返回某个字符串对象的原始值
toString()	返回一个字符串

Array

数组，用于在变量中存储多个值

.length 能够获取数组的长度

三种方式：

	//方法一
	var letters = new Array();
	for(var i = 0; i < 4; i++) {
		letters[i] = "letter" + i;
	}
	for(var i = 0; i < letters.length; i++) {
		document.write(letters[i] + "<br/>");
	}
	
	//方法二	
	var numbers = [1,2,3,4,5];
	for(var i = 0; i < numbers.length; i++) {
		document.write(numbers[i] + "<br/>");
	}
	
	//方法三	
	var classes = new Array("class1","class2","class3");
	for(var i = 0; i < classes.length; i++) {
		document.write(classes[i] + "<br/>");
	}

方法：

方法	描述
concat()	连接两个或更多的数组，并返回结果
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中
entries()	返回数组的可迭代对象
every()	检测数值元素的每个元素是否都符合条件
fill()	使用一个固定值来填充数组
filter()	检测数值元素，并返回符合条件所有元素的数组
find()	返回符合传入测试（函数）条件的数组元素
findIndex()	返回符合传入测试（函数）条件的数组元素索引
forEach()	数组每个元素都执行一次回调函数
from()	通过给定的对象中创建一个数组
includes()	判断一个数组是否包含一个指定的值
indexOf()	搜索数组中的元素，并返回它所在的位置
isArray()	判断对象是否为数组
join()	把数组的所有元素放入一个字符串
keys()	返回数组的可迭代对象，包含原始数组的键(key)
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置
map()	通过指定函数处理数组的每个元素，并返回处理后的数组
pop()	删除数组的最后一个元素并返回删除的元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度
reduce()	将数组元素计算为一个值（从左到右）
reduceRight()	将数组元素计算为一个值（从右到左）
reverse()	反转数组的元素顺序
shift()	删除并返回数组的第一个元素
slice()	选取数组的一部分，并返回一个新数组
some()	检测数组元素中是否有元素符合指定条件
sort()	对数组的元素进行排序
splice()	从数组中添加或删除元素
toString()	把数组转换为字符串，并返回结果
unshift()	向数组的开头添加一个或更多元素，并返回新的长度
valueOf()	返回数组对象的原始值

Date

创建日期对象：

//返回当前日期
var date1 = new Date();

//milliseconds：1970-1-1~现在的毫秒数
var date2 = new Date(milliseconds);

//符合日期类型的字符串（年月日-时分秒）
var date3 = new Date(dateString);

//月份取值为0~11，周日~周六取值为0~6
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

常用方法：

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。

其他方法：

方法	描述
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear()	已废弃。请使用 getFullYear() 方法代替。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	setTime() 方法以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds()	setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear()	已废弃。请使用 setFullYear() 方法代替。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	已废弃。请使用 toUTCString() 方法代替。
toISOString()	使用 ISO 标准返回字符串的日期格式。
toJSON()	以 JSON 数据格式返回日期字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，把 Date 对象转换为字符串。实例： var today = new Date(); var UTCstring = today.toUTCString();
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

Math

属性：

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）
LN2	返回 2 的自然对数（约等于0.693）
LN10	返回 10 的自然对数（约等于2.302）
LOG2E	返回以 2 为底的 e 的对数（约等于 1.4426950408889634）
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）
PI	返回圆周率（约等于3.14159）
SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）
SQRT2	返回 2 的平方根（约等于 1.414）

常用方法：

方法	描述
ceil(x)	对数进行上舍入
floor(x)	对 x 进行下舍入
round(x)	四舍五入
pow(x,y)	返回 x 的 y 次幂
max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值
min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值
random()	返回 0 ~ 1 之间的随机数

其他方法：

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值
asin(x)	返回 x 的反正弦值
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）
cos(x)	返回数的余弦
exp(x)	返回 Ex 的指数
log(x)	返回数的自然对数（底为e）
sin(x)	返回数的正弦
sqrt(x)	返回数的平方根
tan(x)	返回角的正切

5.4.2 自定义对象

对象是变量的容器，里面可以定义多个变量

定义

定义属性：
变量以键值对形式进行存储（name : value）
不同属性以逗号分隔，可换行可不换行
定义方法：
方法名称后面直接跟function

代码示例：

var people = {name:"SelcouthAI",age:20,codeYear:"1年"};
			
var student = {
	name:"SelcouthAI",	
	age:20,
	//方法后面直接跟function
	job:function(){
		alert("正在被包工头支配的新生代农民工");
	}			
}

调用

调用属性
第一种方式：类名.属性名
第二种方式：类名[“属性名”]
调用方法
类名.方法

代码示例：

var name = people.name;
document.write("name:"+name);
			
var age = people["age"];
document.write("age:"+age);
			
student.job();

5.5 函数

5.5.1 常用全局函数

isNaN(param)

tips：
全局属性NaN：非数值（Not a Number）

用于检查其参数是否是非数字值，不是数值返回true

代码示例：

console.log(isNaN(666));//false
console.log(isNaN(6+66));//false
console.log(isNaN("hello"));//true

parseFloat(String)

解析字符串，并返回一个浮点数

tips：
只返回字符串中第一个数字，开头和结尾允许空格
如果字符串的第一个非空字符不能被转换为数字，则返回 NaN

代码示例：

console.log(parseFloat("66"));//66
console.log(parseFloat("666.66"));//666.66
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 666 "));//666
console.log(parseFloat("1年"));//1
console.log(parseFloat("码龄1年"));//NaN

parseInt(string,radix)

解析一个字符串，返回整数

string ：必要参数，被解析的字符串
radix ：表示要解析的数字的基数（ 2 ~ 36 ）

当参数 radix 的值为 0或没有设置参数时，根据 string 来判断数字的基数：
“0x” 开头，其余部分解析为十六进制的整数
以 0 开头，其余部分解析为八进制或十六进制的数字
以 1 ~ 9 开头，解析为十进制的整数
tips：
只返回字符串中第一个数字，开头和结尾允许空格
如果字符串的第一个非空字符不能被转换为数字，则返回 NaN

代码示例：

console.log(parseInt("66"));//66
console.log(parseInt("666.6"));//666.6
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt("1年"));//1
console.log(parseInt("码龄1年"));//NaN

console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16

5.5.2 自定义函数

关键字：function

tips：
不需要声明类型，直接写参数名称
函数是否有返回值取决于函数体中是否有return关键字
返回值的类型取决于return中内容的类型

function 自定义函数名称(参数列表){
	...
}

代码示例：

	//无参无返回值的函数
	function print(){
		document.write("无参无返回值的函数");
	}
	print();
	
	//有参无返回值的函数
	function print1(num){
		document.write("有参无返回值的函数，参数为" + num);
	}
	print1(666);
	
	//有参有返回值的函数
	function print2(a,b){
		document.write("有参有返回值的函数，参数分别为"+a+"和"+b);
		return a+b;
	}
	var sum = print2(1,6);

5.5.3 匿名函数

把函数赋给一个变量，再调用变量

代码示例：

	//无参无返回值的函数
	var fun = function(){
		document.write("无参无返回值的函数");
	}
	fun();
	
	//有参无返回值的函数
	var fun1 = function(num){
		document.write("有参无返回值的函数，参数为" + num);
	}
	fun1(6);
	
	//有参有返回值的函数
	var fun2 = function(a,b){
		document.write("有参有返回值的函数，参数分别为"+a+"和"+b);
		return a+b;
	}
	var sum = fun2(1,6);
	alert(sum);

Selcouther

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript基础概念与基本语法

文章目录一、简介二、注释三、用法1、 HTML页面中的js2、外部的js3、标签属性中的js四、显示数据五、基本语法5.1 变量5.2 数据类型5.2.1 基本数据类型字符串String数字Number布尔Boolean空Null未定义UndefinedSymbol5.2.2 引用数据类型对象Object数组Array函数Function5.2.3 动态类型（不推荐使用）5.3 运算符5.4 对象5.4.1 String5.4.2 Array5.4.
复制链接

扫一扫