BCSP-玄子前端开发之JavaScript+jQuery入门CH01_JavaScript基础

4.1 JavaScript 介绍

是一种基于对象和事件驱动的、并具有安全性能的脚本语言

特点

向HTML页面中添加交互行为
脚本语言，语法和Java类似
解释性语言，边执行边解释

组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iWg3PSlD-1681960137364)(./assets/image-20230311180052520.png)]

4.1.1 JavaScript 的基本结构

JavaScript 的基本结构

<script type="text/javascript" >
    //  type 指定文本使用的语言类别
    //  JavaScript 语句;
</script >

<script></script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存

4.2 引入 JavaScript 三种方式

内部JavaScript文件
外部JavaScript文件
直接写在HTML标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    document.write("Change The World!");
</script>
<!--内部-->
<br>
<script src="../js/01_xz.js" type="text/javascript"></script>
<!--外部-->
<br>
<input onclick="alert('Change The World!')" type="button" value="单击">
<!--行内-->
</body>
</html>

外部 js 文件：01_xz.js

document.write("Change The World！");

4.2.1 三种方式的区别

内部JavaScript文件

适用于代码量较少的单个页面

外部JavaScript文件

适用于代码量多，且可以重复应用于多个页面
随着后续项目规格增加，最为推荐

直接写在HTML标签中

适用于代码量极少的情况
增加了HTML代码，没有将结构与交互分离开，不推荐使用

4.3 JavaScript 核心语法

4.3.1 变量

声明变量

 var 变量名1[,变量名2, …];

变量名区分英文字母大小写，所以字母大小写不同的变量名则表示不同的变量

变量命名建议

需见名知意，即具有语义化
使用驼峰式命名

var  name;                //声明1个变量
var  userName, age, sex;  //声明3个变量

为变量赋值

先声明变量再赋值

var  变量名 
变量名 = 值;
var naem;
name = "张三";

同时声明和赋值变量

var  变量名 = 值;
var name = "张三";

不声明直接赋值

变量名 = 值;
username = "李四";

变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用

4.3.2 数据类形

基本数据类型

number

var iNum=23;      
//整数
var iNum=23.0;   
//浮点数

不仅包括所有的整型变量，还包括所有的浮点型变量

var num=15;
var num=15.8;

八进制：以0开头，其后的数字可以是任何八进制数字（0~7）
十六进制：以0x或0X开头，其后的数字是任意的十六进制数字和字母（0_9和AF）

var num1=065;    
// 065等于十进制的53
var num2=0X3f;   
// 0X3f等于十进制的63

特殊数据类型

// NaN（Not a Number）：表示非数字

string

var string1="This is a string";
// 一组被引号（单引号或双引号）括起来的文本

属性

string对象.length

常用方法

方法	说明
charAt(index)	返回在指定位置的字符
indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
substring(index1， index2)	返回位于指定索引index1和index2之间的字符串，包括索引index1对应的字符，不包括索引index2对应的字符
split(str)	将字符串分割为字符串数组
replace(regexp/substr, replacement)	在字符串中用一些字符替换另一些字符

字符串对象.方法名();

var str = "this is JavaScript";
var strLength = str.length;    
//长度是18

字符串的基本方法和属性

<script type="text/javascript">
	var str = "123abc456DEF";
	document.write("下标为1的字符是："+str.charAt(1)+'<br>');  
	document.write("把字符串转换成大写："+str.toUpperCase()+'<br>');
	document.write("把字符串转换成小写："+str.toLowerCase()+'<br>');
	document.write("查找abc在str中首次出现的位置："+str.indexOf("abc")+'<br>');
	document.write("查找xyz在str中首次出现的位置："+str.indexOf("xyz")+'<br>');
	document.write("返回索引6和9之间的字符串："+str.substring(6,9)+'<br>');
	document.write("把字符串str分割为字符串数组："+str.split("")+'<br>');
	document.write("把DEF替换成789："+str.replace("DEF","789"));
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KeqdgjdD-1681960137367)(./assets/image-20230311182306347.png)]

+表示拼接符，可以将字符串拼接起来

boolean

var bool =true;
// true 和 false

undefined 和 null

null

// 表示一个空值，与undefined值相等

undefined

var width;
// 变量width没有初始值，将被赋予值undefined

undefined 派生自 null

JavaScript 把它们定义为相等的

alert( null == undefined ); 
// 表达式的值为true

区别
- undefined表示没有为变量设置值或属性不存在
null表示变量是有值的，只是其值为null

4.3.4 typeof运算符

用于判断某个值或变量的数据类型

typeof(值或变量);

返回值的数据类型

number：整数或浮点数
string：使用单引号或双引号声明的字符串
boolean：true或false
object：空类型，或者是一种引用类型：如对象、函数、数组
undefined：未定义数据类型的变量

查看指定的变量值的数据类型

<script type="text/javascript">
    var userName,sex="男", age=18;
    var date = new Date();  //获取时间日期对象
    var arr = new Array();  //定义数组
    document.write("userName的返回值为："+typeof(userName)+"<br>");
    document.write("sex的返回值为："+typeof(sex)+"<br>");
    document.write("age的返回值为："+typeof(age)+"<br>");
    document.write("date的返回值为："+typeof(date)+"<br>");
    document.write("arr的返回值为："+typeof(arr)+"<br>");
    document.write("true的返回值为："+typeof(true)+"<br>");
    document.write("null的返回值为："+typeof(null)+"<br>");
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BwnkHxyk-1681960137368)(./assets/image-20230407213305524.png)]

4.3.5 运算符

类型	运算符
算术运算符	+ - ***** / % ++ —
比较运算符	> < >= <= == != === !==
逻辑运算符	&& \|\| !
赋值运算符	= += -=

==：用于一般比较，在比较时会自动进行数据类型隐式转换

===：用于严格比较，只要数据类型不匹配，就返回 false

"1"==true;  //返回true
"1"===true; //返回false

4.3.6 逻辑控制语句

if

if(条件表达式) {
    //条件为真时要执行的代码
} else {
    //条件为假时要执行的代码
}

var age = 18;
if (age > 18) { 
	alert("你已经是成年人了");
} else if (age == 18) { 
	alert("恭喜您成为成年人");
} else{  
	alert("你还是未成年人");
}

switch

switch (条件表达式) {
    case 常量1 : 
        //JavaScript语句1;
	  break;
    case 常量2 : 
        //JavaScript语句2;
 	  break;
     ...
    default : 
        //JavaScript语句3;    
}

var age = 18;
switch(age) {
    case 20:
        alert("你已经是成年人了")
	break;
    case 18:
	alert("恭喜您成为成年人");
	break;
    default:
	alert("你还是未成年人");
}

for

for(初始化;  条件表达式;  增量) {
    //JavaScript代码;
}

whilie

while(条件表达式) {
    //JavaScript代码;
}

do…while

do {
    //循环体
}while (条件表达式);

for in

for (变量 in 对象) {
    //循环体
}

var fruit=["apple","orange","banana","peach"];
for(var i in fruit) {
    document.write(fruit[i]+"<br>");
}

4.3.7 循环中断

break

<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++) {
    if(i==3) {
        break;
    }
    document.write("这个数字是："+i+"<br/>");
}
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n4clBZiG-1681960137368)(./assets/image-20230407213855201.png)]

continue

<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++) {
    if(i==3) {
        continue;
    }
    document.write("这个数字是："+i+"<br/>");
}
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cw6KyhHv-1681960137368)(./assets/image-20230407213859369.png)]

4.3.8 注释

单行注释

以 // 开始，以行末结束

多行注释

以 /* 开始，以 / 结束，符号 /…… */ 之间是该程序的注释

//定义age变量为20
var age=20;

/*
定义age变量且初始值为18
判断当age变量大于等于18时，弹出“您已经成年啦”
*/
var age=18;
if(age>=18) {
    alert("您已经成年啦");
}

4.3.9 关键字

ECMA-262描述了一组具有特定用途的关键字

可用于表示控制语句的开始或结束，或者用于执行特定操作等

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

4.3.10 保留字

ECMA-262还描述了一组不能用作标识符的保留字

在这门语言中还没有任何特定的用途，但有可能在将来被用作关键字

保留字
abstract	debugger	float	long	short
boolean	double	goto	native	static
byte	enum	implements	package	super
char	export	import	private	synchronized
class	extends	int	protected	throws
const	final	interface	public	transient
volatile

4.4 系统对话框

向用户显示消息
与浏览器中显示的网页没有关系，其不包含HTML和CSS
对话框外观由操作系统及浏览器设置来决定
都是同步和模态的
- 显示对话框时代码会停止执行，而关掉对话框后代码又会恢复执行

alert()：警告对话框

alert("提示信息");

在点击对话框“确定”按钮前，不能进行任何其他操作消息对话框通常可以用于调试程序与document.write()相似，消息对话框输出的内容可以是字符串或变量

confirm()：消息对话框

alert("你好，JavaScript");

prompt()：提示对话框

var date=prompt("请输入今天是几月几号","");

4.5 程序调试

Chrome开发人员工具

排除语法错误
排除逻辑错误
- 设置调试断点
- 单步调试，不进入函数体内部
- 单步调试，进入函数体内部
- 跳出当前函数
- 禁用所有的断点，不做任何调试
alert()方法