BCSP-玄子前端开发之JavaScript+jQuery入门CH01_JavaScript基础
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 >
可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存
4.2 引入 JavaScript 三种方式
-
内部JavaScript文件
-
外部JavaScript文件
-
直接写在HTML标签中
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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开头，其后的数字是任意的十六进制数字和字母（09和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)+'
');
document.write("把字符串转换成大写："+str.toUpperCase()+'
');
document.write("把字符串转换成小写："+str.toLowerCase()+'
');
document.write("查找abc在str中首次出现的位置："+str.indexOf("abc")+'
');
document.write("查找xyz在str中首次出现的位置："+str.indexOf("xyz")+'
');
document.write("返回索引6和9之间的字符串："+str.substring(6,9)+'
');
document.write("把字符串str分割为字符串数组："+str.split("")+'
');
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)+"
");
document.write("sex的返回值为："+typeof(sex)+"
");
document.write("age的返回值为："+typeof(age)+"
");
document.write("date的返回值为："+typeof(date)+"
");
document.write("arr的返回值为："+typeof(arr)+"
");
document.write("true的返回值为："+typeof(true)+"
");
document.write("null的返回值为："+typeof(null)+"
");
</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]+"
");
}
4.3.7 循环中断
break
<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++) {
if(i==3) {
break;
}
document.write("这个数字是："+i+"
");
}
</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+"
");
}
</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()方法