JavaScript 基础语法 第一阶段

学习目标

1. 掌握JavaScript基础语法的使用
2. 掌握JavaScript注释的使用
3. 掌握JavaScript变量的使用 重点
4. 掌握JavaScript变量的类型和定义和使用
5. 掌握JavaScript运算符的使用 重点 难点
6. 掌握JavaScript函数的简单使用 重点

JavaScript引入

外部样式

使用<script></script>标签引入外部文件

<script src="/js.js" type="text/javascript" charset="utf-8"></script>

内部引入

使用<script></script>标签直接写代码

<script type="text/javascript"  charset="utf-8">
    // 代码
</script>

JavaScript 语句

单行注释

单行注释以 // 开头。//后面的同一行的内容全部变成注释，注释会被浏览器忽略掉，而不执行，一般起解释说明的作用

如：

<script type="text/javascript">
	//单行注释
	//下面这条语句在浏览器中输出并显示“你好”两个字
	document.write("你好");
</script>

多行注释

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

如：

<script type="text/javascript">
	/**
	 * 多行注释
	 * 下面这条语句在浏览器中输出并显示“你好”两个字
	 */
	document.write("你好");
</script>

JavaScript 变量

变量是用于存储信息的"容器"。作用就是用于存储代码中使用到的数据。

就像代数那样

x=5

y=6

z=x+y

变量命名规则：

• 变量只能包含字母、数字、_、$
• 变量必须不能以数字开头，因为大多数浏览器不支持
• 变量名称对大小写敏感（y 和 Y 是不同的变量）

变量创建

创建（声明）变量，可使用var 关键词来声明变量，var可以省略

如：

var carname;

变量声明之后，该变量是空的（它没有值）。

变量赋值

赋值就是存储，将某个值存储这个变量中存储起来，而且可以对一个变量反复赋值。

如：

name = "张三";	// 赋值： 将"张三"存入变量中
name = "李四";	// 赋值： 将"李四"存入变量中

最终变量name的值是最后一次存储的值"你好"

注：也可以在声明变量时对其赋值：

var name = "张三";

给name这个变量设置之为 “张三” ，也可以理解为把 “张三” 这个文字保存在 name 变量中。

变量使用

使用变量可以通过变量的名称直接使用，可以用于计算、输出显示等

变量数据类型

JavaScript 数据类型有以下几种

• 字符串（String）
• 数字(Number)
• 布尔(Boolean)
• 数组(Array)
• 对象(Object)
• 空（Null）
• 未定义（未赋值）（Undefined）

字符串

字符串用来存储字符和文字的变量。使用单引号或双引号：

如：

var name="阿百川";
var name='兵工厂';

您可以在字符串中嵌套使用单双引号，只要不匹配包围字符串的引号即可：

如：

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

数字

数字类型只能用来保存数字：

如：

var x1=34.00;    //使用小数点来写
var x2=34;     //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

如：

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123

布尔

布尔常用于判断或者设置状态，布尔（逻辑）只能有两个值：true 或 false。布尔类型可以转换成0、1、‘0’、"1"等

如：

var x=true; // 1
var y=false; // 0

数组

数组用于保存多个数据，如会员的姓名、用户名、密码、手机号等等。

下面的代码创建名为 user 的数组：

var user = new Array();
user[0]="张三";
user[1]="zhang";
user[2]="123456";
user[3]="13592769132";

或者

var user = new Array("张三"," zhang ","123456","13592769132");

或者

var user = ["张三"," zhang ","123456","13592769132"];

数组下标从0开始，所以第一个是 [0]，第二个是 [1]，以此类推。

对象

对象不仅可以保存普通数据，还可以保存代码操作功能。

class studennt{
    constructor(x,y){
    	this.x = x;
    	this.y = y;
	}
}

Undefined 和 Null

Undefined 表示基本数据类型不含有值。

null 表示引用 数据类型没有值。

JavaScript 运算符

赋值运算符

假设 y = 5;，x = 10

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

算术运算符

假设 y = 5;

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法（商）	x=y/2	2.5	5
%	取模（求余数）	x=y%2	1	5
++	自增	x=++y	6	6
		x=y++	5	6
--	自减	x=--y	4	4
		x=y--	5	4

比较运算符

运算符	描述	比较	返回值
==	等于（值）	x==8	false
		x==5	true
===	绝对等于（值和类型均相等）	x==="5"	false
		x===5	true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true
		x!==5	false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

逻辑运算符

运算符	描述	例子
&&	And 与	(x < 10 && y > 1)为 true
| |
!	Not 非	!(x==y) 为 true

条件运算符

条件运算符可以用于艰简单的判断

语法

var name = condition ? value1 : value2; 

如：

如果变量 age 中的值小于 18，则向变量 voteable 赋值 “年龄太小”，否则赋值 “年龄已达到”。

var teable = ( age <18 ) ? "年龄太小" : "年龄已达到";

运算类型	运算符
圆括号	( )
成员访问	.
需计算的成员访问	[ ]
new (带参数列表)	new ( )
函数调用	( )
new (无参数列表)	new
后置递增(运算符在后)	a++
后置递减(运算符在后)	a--
逻辑非	!
前置递增	++a
前置递减	--a
typeof	typeof
void	void
delete	delete
await	await
幂	**
乘法	*
除法	/
取模	%
加法	+
减法	-
按位左移	<<
按位右移	>>
无符号右移	>>>
小于	<
小于等于	<=
大于	>
大于等于	>=
in	in
instanceof	instanceof
等号	==
非等号	~=
全等号	===
非全等号	!==
按位与	&
按位异或	^
按位或	`
逻辑与	&&
逻辑或	`
条件运算符	? :
赋值	=
+=	+=
-=	-=
*=	*=
/=	/=
%=	%=
<<=	<<=
>>=	>>=
>>>=	>>>=
&=	&=
^=	^=
| =
yield	yield
yield*	yield*
展开运算符	...
逗号	,

如：

//1、定义（申明）变量
var a;
var b;
var c;
var t;

//2、赋值
a = "1";//string
b = 45;//number
c = true;//1

//3、使用
// 1
t = (!c || a > 100) || b < 100 && b > a || a >= 6 && b !== a;
document.write(t);//true

//2
t = c && (a != c && b < 100 || b > 1 && (!c || a == c) && a === c)?a++ - --b:!c;
document.write(t);//false

JavaScript 函数基础

函数就是包裹在花括号中的代码块，使用了关键词 function：关键词 function 必须是小写的

function functionname(){
	执行代码
}

函数的使用，通过方法名+括号来使用方法，如：

functionname();

这句代码就是使用方法名为**functionname**的方法，必须加上(),()是函数的标志，不可不写。

方法最简单的功能就是将一部分代码放到一起，组成一个代码快，在需要的时候直接执行。因此，方法在写好后是不会自动执行的，除非使用方法，方法里面的代码才会被执行

可以在HTML元素的点击事件中使用方法，HTML的点击事件就是onclick属性。如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--在onclick属性中使用方法-->
		<button onclick="sum()">点击可计算10+20的结果</button>
	</body>
	<script type="text/javascript">
		//通过关键字function来定义方法，方法名后面必须跟（）
		function sum(){
			var a = 10;
			var b = 20;
			var c = a + b;
			alert(c)
		}
	</script>
</html>

JavaScript与HTML

JavaScript只有配合HTML才能发挥其最大的作用，而document对象就是JavaScript和HTML相互结合的关键点。通过document对象可以获取和设置HTML元素，实现各种功能。如：

通过ID属性获取HTML元素，只能获取第一个：

var e = document.getElementById('name');

如果是表单输入元素，使用value属性来获取和设置元素的值：

var v = document.getElementById('name').value;
document.getElementById('name').value ='张三465';

如果是普通双标签，则使用innerHTML或者innerText来获取和设置元素的内容

var v = document.getElementById('name').innerHTML;
document.getElementById('name').innerHTML = '张三';

或者

var v = document.getElementById('name').innerText;
document.getElementById('name').innerText = '张三';