Bootstrap

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 >

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


4.2 引入 JavaScript 三种方式

  1. 内部JavaScript文件

  2. 外部JavaScript文件

  3. 直接写在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开头,其后的数字是任意的十六进制数字和字母(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)+'<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描述了一组具有特定用途的关键字

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

关键字
breakdeleteifthiswhile
casedointhrowwith
catchelseinstanceoftry
continuefinallynewtypeof
debuggerforreturnvar
defaultfunctionswitchvoid

4.3.10 保留字

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

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

保留字
abstractdebuggerfloatlongshort
booleandoublegotonativestatic
byteenumimplementspackagesuper
charexportimportprivatesynchronized
classextendsintprotectedthrows
constfinalinterfacepublictransient
volatile

4.4 系统对话框

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

  • alert():警告对话框
alert("提示信息");

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

  • confirm():消息对话框
alert("你好,JavaScript");
  • prompt():提示对话框
var date=prompt("请输入今天是几月几号","");

4.5 程序调试

Chrome开发人员工具

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

;