Javascript语言基础

最新推荐文章于 2022-09-02 21:51:25 发布

luke9012

最新推荐文章于 2022-09-02 21:51:25 发布

阅读量146

点赞数

分类专栏： web前端基础

本文链接：https://blog.csdn.net/weixin_42194337/article/details/100169098

版权

web前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Javascript语言基础

JavaScript简介

JavaScript发展史

欧洲计算机制造商协会（ECMA）

JavaScript组成：

ECMAScript
DOM
BOM

JavaScript特点及规范

解释性，不需要编译
嵌套在HTML中
弱数据类型，定义变量时，无需指定变量的类型
跨平台
基于对象，不是纯面向对象的，语法相对比较灵活
基于事件驱动

注意以下规范：

浏览器解析JavaScript脚本时，会忽略标识符与运算符之间的空白字符
每条语句单独占一行，并以英文分号（:）结束
代码要有缩进，以增加代码层次感

Javascript使用形式

形式：

行内Javascript脚本
内部Javascript脚本
外部Javascript脚本

行内Javascript脚本

嵌入到HTML标签内使用
内部Javascript脚本

提取出来统一放在<script>，</scrip>
外部Javascript脚本

单独文件进行存放，后缀为.js，然后再HTML页面中通过<script>标签将JS文件引入

基本语法

标识符

名称

规则：

标识符由数字，字母，下划线（_），美元符号($)构成
第一个字母必须是字母，下划线或美元符号
标识符区分大小写，推荐驼峰命名规则
不能与Javascript中的关键字相同

关键字


abstract	arguments	boolean	break	byte	case	catch
char	class	const	continue	debugger	default	delete
do	double	else	enum	eval	export	extends
false	final	finally	float	for	function	goto
if	implements	import	in	instanceof	int	interface
let	long	native	new	null	package	private
protected	public	return	short	static	super	switch
synchronized	this	throw	throws	transient	true	try
typeof	var	void	volatile	while	with	yield

数据类型

数据类型	描述
String	字符串
Boolean	布尔值
Null	声明某个变量为null
Undefined	变量未初始化
Array	变量或函数的集合
Number	数值类型可以是32位整数，64位整数；整数可以是十进制，八进制，十六进制
Function	特殊的对象数据类型，可以被存储在变量，数组，对象中，作为参数传递给其他函数
Object	通过属性和方法定义的软件对象；对象中的命名变量称为属性，函数称为方法

变量

程序储存数据的基本单位，用来保存数据

变量的定义

通过var声明（区分大小写）
```
var name,age;
var type="student";
```
变量的类型

弱数据类型，不需要指明变量的数据类型

通过typeof运算符或**typeof()**函数来获取变量当前的数据类型
变量的作用域
- 全局变量
  
  函数之外变量或者未定义直接使用的变量
- 局部变量
  
  函数内部声明变量，仅对当前函数体有效

注释

单行注释

var age=18;
//定义学生的专业
var major="计算机专业"

多行注释

/*工资统计
 * Base：基本奖金
 * bonus：奖金
 */
 function conutSalary(base,bonus){
 	//省略***
 }

运算符

赋值运算符

运算符	描述
+=	x+=y，x=x+y
-=	x-=y，x=x-y
*=	x=y，x=xy
/=	x/=y，x=x/y
%=	x%=y，x=x%y
&=	x&=y，x=x&y
\|=	x\|=y，x=x\|y
^=	x^=y，x=xy
<<=	x<<=y，x=x<<y
>>=	x>>=y，x=x>>y
>>>=	x>>>=y，x=x>>>y

算术运算符

运算符	描述
+	加
-	减
*	乘
/	除
%	取余
++	自加
–	自减

比较运算符

运算符	描述
>	大于
>=	大于等于
<	小于
<=	小于等于
!=	不等于
==	等于。值相同，则返回true
!==	严格不相等。值或者数据类型不相同，则返回true
===	严格相等。值和数据类型都相等，则返回true

逻辑运算符

运算符	描述
与（&）	同时true，返回true
或（\|\|）	同时false，返回true
非（！）	相反

三元运算符

expression ? value1 : value2

expression表达式为true，返回value1
expression表达式为false，返回value2

流程控制

分支结构

if条件语句
switch多分支语句

if条件语句

if(condition1){
	statement1;
}
[else if(condition2){
	statement2;
}]
...
[else{
	statement3;
}]

switch语句

switch(expression){
	case value1:
		statement1;
		break;
	case value2:
		statement2:
		break;
	...
	default:
		statement;
}

循环结构

while 循环
do while 循环
for 循环
for in 循环

while循环
```
while(expression){
	statement;
}
```
do while 循环

先循环一遍
```
do{
	statement;
}while(expression);
```

for循环

for(initialization;expression;post-loop-expression){
	statement;
}

for in 循环
```
for(property in object){
	statement;
}
```

转移语句

break语句
continue语句
return语句

break语句
- 用在switch结构中，跳出switch分支
- 用在循环，立刻退出，不在执行循环体中任何代码
continue语句

仅仅退出当前循环，然后判断是否满足下一次循环
return语句

通常在函数中使用

退出当前函数，不再执行该函数return语句之后的代码

with语句

简化对象操作

大量使用document对象，可以简化

<script type="text/javascript">
	with(document){
		write("<table border='1'>");
		write("<tr>");
		write("<th>ID</th><th>商品编号</th><th>价格</th>");
		write("</tr>");
		var i=1;
		while(i<=4){
			write("<tr>");
			write("<td>"+i+"</td>");
			write("<td>FZ00"+i+"</td>");
			write("<td>"+(Math.random()*100).toFixed(2)+"</td>");
			write("</tr>");
			i++;
		}
		write("</table>")
	}
</script>

注意：虽然可以精简代码，但是会使运行效率变慢，尽量少用

函数

预定义函数
用户自定义函数

预定义函数

预先定义好的函数，内建函数，可直接使用

函数	描述
parseInt()	字符串转换为整数
parseFloat()	字符串转换为浮点数
isNaN()	（is not a number），一个数字时，返回false
isFinite()	是否是无穷，如果是，返回false
escape()	将字符转换为Unicode码
unescape()	解码escape函数编码的字符
eval()	计算表达式的结果
alert()	显示一个提醒对话框，包括一个OK按钮
confirm()	显示一个确认对话框，包括OK和Cancel按钮
prompt()	显示一个输入对话框，提示等待用户输入

parseInt()函数

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

遇到除了数字，符号，小数点，指数符号以外的字符，就停止转换，返回已有的结果

当第一个字符不能转换，则返回NaN（not a number）
```
parseInt(string,[radix])
```
- radix可选，数字基数（几进制），介于2~36之间
- string表示被解析的字符串
- radix为0（或未提供），根据string自动判断
  
  “0x”开头，为十六进制
  
  “0”开头，为八进制
  
  1~9开头，为十进制
parseFloat()函数

解析字符串，返回一个浮点数
```
parseFloat(string)
```
- string表示被解析的字符串
- 首个字符为数字，则解析，到末端为止，并返回结果；否则返回NaN
isNaN()函数

检查是否是一个非数字、
```
isNaN(value)
```
- value为需要检查的值
- value是数字，返回false；否则返回true
eval()函数

将字符串作为脚本代码来执行
```
eval(string)
```
- string是一个要计算的字符串，可以是Javascript表达式或要执行的脚本
- 如果为表达式，将执行表达式，返回计算结果
- 如果为脚本，则执行脚本
对话框函数
- alert()函数用于弹出一个提示对话框
- confirm()函数用于弹出一个确认对话框，单击“确认”，返回true，单击“取消”，返回false
- prompt()函数用于接收用户输入的输入框

自定义函数

自定义函数，不需要声明函数的参数类型，也不需要声明函数的返回类型

命名函数
匿名函数
对象函数
自调用函数

命名函数的定义
```
function funcName([parameters]){
	statementes;
	[return expression];
}
```
- function是定义函数的关键字
- funcName表示函数的名称
- parameters，参数，可选，多个参数之间逗号（,）隔开
- statements，函数体，实现函数功能的脚本
- return，可选，缺省返回undefined

匿名函数的定义

通过表达式的形式定义一个函数

function([parameters]){
	statementes;
	[return expression];
};

没有提供函数名称
函数结尾以分号（;）结束
使用变量对匿名函数进行接收

示例：

<script type="text/javascript">
	var f=function(user){
		alert("欢迎"+user+"来到漫步时尚广场");
	}
	var test=f;
	f("admin");
	test("admin");
</script>

对象函数的定义

Function类，用于定义函数

var funcName=new Function([parameters],statements;);

Function定义函数的关键字，首字母必须大写
parameters，参数，可选，逗号隔开
statements，字符串格式，函数的执行体，分号（;）隔开

示例：

<script type="text/javascript">
	var showInfo=new Function("name","age","authority","address",
		"alert('数据处理中');"+
		"return('姓名'+name+',年龄'+age+',权限:'+authority+',地址:'+address);");
	alert(showInfo("guoqy",30,"管理员","青岛"));
</script>

自调用函数

只有被调用才会被执行
```
(function([paraments]){
	statementes;
	[return 表达式];
})([params]);
```
- 将函数的定义使用小括号"()"括起来，通过小括号说明此部分是一个函数表达式
- 表达式后紧跟一对小括号"()"，表示该函数将被自动调用
- parameters，形参，可选，逗号隔开
- params，实参，函数调用时传入数据
示例：
```
<script type="text/javascript">
	var user="guoqy";
	(function(userData){
		alert("欢迎"+userData+"来到漫步时尚广场");
	})(user);
</script>
```

luke9012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript语言基础

Javascript语言基础JavaScript简介JavaScript发展史欧洲计算机制造商协会（ECMA）JavaScript组成：ECMAScriptDOMBOMJavaScript特点及规范解释性，不需要编译嵌套在HTML中弱数据类型，定义变量时，无需指定变量的类型跨平台基于对象，不是纯面向对象的，语法相对比较灵活基于事件驱动注意以下规范：浏览器解...
复制链接

扫一扫