一、JS简介
JavaScript是一种运行在客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
浏览器就是一种运行JavaScript脚本语言的客户端,JavaScript的解释器被称为JavaScript引擎,为浏览器的一部分。
二、JS的基础知识
1、JS的编写位置
(1) 将JS写到外部文件
可以将js写到外部文件,然后通过script标签引入
注:script 一旦引入外部标签就不能在内部写
如果需要则创建一个新的script标签
(2) 将js写到script标签中
<script type="text/javascript">
alert("在script标签中");
</script>
(3) 将js代码编写到onclick属性中
可以将js代码编写到onclick属性中
当我们点击按钮时,js代码执行
注:虽然可以写到属性中,但是他们属于结构与行为耦合,不方便维护
<button onclick="alert('讨厌,点我干嘛')">点我一下</button>
特别
<!--
可以将js代码写在超链接的href属性中,
这样当点击超链接时会执行js代码
-->
<a href="javascript:alert('让你点你就点!');">也点我一下</a>
2、JS基本知识
JS的基本语法
/*
多行注释
*/
// 单行注释
/*
* 1、在js中严格执行大小写
* 2、js中每一条语句以分号结尾
* 如果不写分号浏览器自己添加,会消耗资源系统,也可能会加错使出错
* 3、js中会忽略多个空格和换行,可利用空格或换行进行代码格式化
*/
字面量、变量以及标识符
字面量 :是不可改变的值 比如:1、2、3、字面量可以直接使用,但是一般不直接使用
变量 :变量可以用来保存字面量,而且字面量可以任意改变,变量更加方便使用,开发中用变量保存字面量,很少直接使用字面量
// 声明变量 // 在js中使用var关键字声明变量 var a; // 为变量赋值 a = 123; // 声明赋值同时进行 var b=789;
标识符
js中所有由我们自主命名的都可以叫标识符
例如:变量名、函数名、属性名等
命名一个标识符遵守以下规则
- 标识符中可以有字母数学下划线$符
- 标识符不能以数字开头
- 标识符不能是ES中的关键字和保留字
- 标识符一般采用驼峰命名法
首字母小写,每个字母开头字母大写
例:helloWorld
js底层保存标识符是实际上都是采用Unicode编码
理论上所有utf-8都可以作为标识符
JS中的数据类型
数据类型就是字面量类型,在js中有6中数据类型
String 字符串
Number 数值
Null 空值
Boolean 布尔值
Undefined 未定义
Object 对象
注:Object 引用数据类型
其中String Number Null Boolean Undefined 属于基本数据类型
1、String字符串
/*
* String字符串
* 在js中字符串需要使用引号
* 单引号双引号都可以,但是不要混用
* 引号不能嵌套,双引号不能嵌套双引号,单引号同理
*/
var str = "hello";
注:在字符串中我们可以用\作为转义字符, 当表示一些特殊符号可以用\转义
- \" 表示 "
- \' 表示 '
- \n 表示换行
- \t 制表符
- \\ 表示 \
2、Number 数值
在js中所有数值都是number,包括整数和浮点数
js中表示数字最大值 Number.MAX_VALUE,如果number表示的数字超过了最大值则返回无穷Infinity正无穷 -Infinity负无穷 Number.MIN_VALUE 为 理论最小值 5e-324,NaN是一个特殊的字符 表示Not a Number
注:js中整数运算基本可以保证,但 js中进行小数运算可能得到一个不准确的结果
小知识:可以使用一个运算符typeof来检查变量类型
语法 typeof 变量
检查字符串返回string
检查数字返回number
使用typeof返回NaN为number
3、 Boolean 布尔值
<script>
/*
* 布尔值
* 布尔值只有两个
* ture 表示逻辑真
* false 表示逻辑假
* 使用typeof返回是为Boolean
*/
var bool = ture ;
console.log(typeof bool);
console.log(bool);
</script>
4、 Null和Undefined
<script>
/*
* null类型的值只有一个,就是null
* null这个值专门用来表示一个为空的值
* 若typeof null为 object
*
* undefined类型只有一个,就是undefined
* 若typeof undefined 为 undefined
*/
var a=null;
var b=undefined;
console.log(typeof b);
console.log(b);
</script>
JS中的运算符
1、算术运算符
+
任何值和字符串相加都会先转换为字符串后相加
* 我们可以利用这一特性,来将任意的数据类型转换为String
* 我们只需要为任意的数据类型+一个"" 即可将其转换为string
* 这是一种隐式类型转换,由浏览器自动完成,其实也是调用toString()函数
- * /
任何值做- * / 都会转换为number
* 我们可以利用这一特点做隐式类型转换
* 通过 -0 *1 /1 来转换为number
* 原理和number函数一样
2、一元运算符
一元运算符 只需要一个操作数
+ 正号 不会对数字产生影响
- 负号 会对数字进行取反
对于非number的值它会先转换为number在取反
可以对其他的数据类型使用 + 来使其转换为number
它的原理和Number函数一样
// '2'前第一个加号为正号转换'2'为number var result=1+ +'2'+3;
3、自增和自减
自增 ++
通过自增可以使变量在自身的基础上增加1
对一个变量自增后会自己增加1
自增分为两种后++(a++)和前++(++a)
无论是前++还是后++ 都会使变量立即加1
不同的是 a++和++a的值不同
a++表示原变量的值 ++a是加1后的值
自减 --
通过自增可以使变量在自身的基础上减1
对一个变量自增后会自己减1
自增分为两种后--(a--)和前--(--a)
无论是前-- 还是后-- 都会使变量立即加1
不同的是 a--和--a的值不同
a--表示原变量的值 --a是加1后的值
4、逻辑运算符
js为我们提供三种逻辑运算符
! 非
对一个值进行非运算
非运算就是对一个布尔值取反的操作
true变false false变true
若对一个值进行两次取反则不变
若对非布尔值进行非运算、则会将其先转换为布尔值再运算
可以利用该特性对非布尔值转换为布尔值
即:可以为任意类型进行两次非运算
&& 与
可以对符号两侧的值进行与运算并返回结果
只要有一个false返回 false
js中的与属于短路的与,如果第一个值为false则不会看第二个值
|| 或
可以对符号两侧的值进行或运算并返回结果
只要有一个true就返回true
js中的与属于短路的或,如果第一个值为true则不会看第二个值
注: && || 非布尔值情况
对于非布尔值对于与/或运算会将其转换为布尔值 然后运算,并且返回原值
与运算
如果第一个值为true则返回后面的
如果第一个值false则返回false
或运算
如果第一个值为true返回第一个值
如果第一个值为false,则直接返回第二个值
5、相等运算符
* 相等运算符比较两个数是否相等
* 如果相等会返回true
* 否则返回false
*
* 使用 == 来做相等运算
* 当使用==来比较两个值将自动进行类型转换为相等的类型后进行比较
*
*
* 不相等 !=
* 如果不相等会返回true
* 否则返回false
* 当使用!=来比较两个值将自动进行类型转换为相等的类型后进行比较
*
*
* ===全等
* 用来判断两个值是否全等,他和相等类似,不同的是他不会自动类型转换
* 如果两个值类型不同,直接返回false
*
*
* !==不全等
* 用来判断两个值是否不全等,和不等类似,不同的是他不会自动转换类型
* 如果两个值类型不同,直接返回true
6、条件运算符
* 条件运算符也叫三元运算符
* 语法
* 条件表达式?语句1:语句2;
* 执行流程
* 条件运算符在执行时,首先对条件表达式进行求值
* 如果该值为true,则执行语句1,并返回执行结果
* 如果该值为false,则执行语句2,并返回执行结果
*
* 如果条件语句是非布尔值先转换为布尔值后运算
代码块及部分知识
1、代码块
我们的程序是由一条条语句构成 ,并且语句是自上而下执行
在js中可以用{}来为语句进行分组,同一个{ }里的语句称为一组语句
他们要么一起执行,要么一起不执行
一个{ } 的语句也称为代码块
在代码块的后面就不用再编写 ;
js中的代码块只具有分组作用
2、prompt( )
prompt()可以弹出一个提示框,该提示框中会带有一个文本框
* 用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数
* 该字符串会作为提示框的提示文字
* 用户的输入内容会作为函数的返回值,可以定义一个变量来接受该内容
var score = prompt("请输入小明的期末成绩:");
3、break continue
(1) 计时器
console.time("计时器的名字")可以用来开启一个计时器
它需要字符串作为参数,这个字符串将是计时器的标识
终止计时器console.timeEnd()
它需要字符串作为参数,这个字符串将是计时器的标识
注:可以通过Math.sqrt()对数字进行开方
(2)break
break退出switch循环语句
不能在if语句中使用break和continue
break会立即终止离他最近的循环
可以为循环语句创建一个label,来标识当前的循环
label:循环语句
这样在break后跟一个label
这样break会结束指定循环
//label指定break
outer:
for(var i=0;i<5;i++){
console.log(i);
for(var j=0;j<5;j++){
break outer;
console.log(j);
}
(3)continue
continue可以用来跳过当次循环
同样continue也是默认只对它最近的循环起作用
可以为循环语句创建一个label,来标识当前的循环
label:循环语句
这样在continue后跟一个label
这样continue会结束指定循环