JS是什么
- JS是一种运行在客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能
- 浏览器就是一种运行JS脚本语言的客户端,JS的解释器被称为JS引擎,为浏览器的一部分
JS 的组成
- JavaScript 是由 ECMAScript,DOM 和 BOM 三者组成的。
- ECMAScript: 定义了JavaScript 的语法规范,描述了语言的基本语法和数据类型
- DOM (Document Object Model): 文档对象模型
- BOM (Browser Object Model): 浏览器对象模型
js 的三种书写方式
行内式(强烈不推荐)
- =>a 标签
- =>书写在 href 属性上,一定要书写一个 javascript;一段js 代码;
- =>非a标签
- -> 书写一个行为属性,例如:onclick(当点击在标签身上的时候)
- ->直接在属性值的位置书写 js 代码即可
<input type="button" value="按钮" onclick="alert('hello world')" />
内嵌式(不太推荐)
- =>在html 页面内书写一个 script 标签,把js 代码书写在 script标签内
- =>注意
1.script 标签内的代码会直接执行,不需要依赖行为
2.script标签推荐书写在 head body的末尾
3.一个页面可以书写多个script标签,会按照从上到下依次执行
<body>
<script>
alert('hello world')
</script>
</body>
外链式(推荐)
- =>把 js 代码书写在一个 .js后缀的文件内,在当前 html 文件内以 script 标签的script 标签的 src 属性引入页面
- =>注意: 1.script 标签引入的 js 文件会直接执行,不需要依赖行为
2.script 标签书写在 body 的末尾或者 head 的末尾
3.一个标签被当作外链式引入js文件后 ,就不能被当作 内嵌式使用了
js 定义变量
什么是变量?
变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据;
变量其实就相当于一个容器,内部可以存储任意类型的数据,使用变量时,用的是内部存储的数据。
<script src="main.js"></script>
为什么要定义变量?
使用变量可以方便的获取或者修改内存中的数据
如何定义变量
使用一个 var 的关键字进行定义,后面必须加一个空格,空格后面自定义变量名
var a;
var b;
var c;
变量赋值
- 变量定义之后,初始时没有进行赋值,内部有一个默认存储的值叫 undefined(未定义) 表示内部未赋值,但可以存储数据了
- 变量赋值的方式:通过等号 = 赋值,等号右边的值赋值给左边的变量 ==(等号在 JS 中叫做 赋值号;书写时,等号 = 两侧习惯书写一个空格)==
// 变量定义
var a;
// 变量赋值
a = 1;
// 变量定义并赋值
var b = 2;
使用变量
直接写变量名即可使用变量;变量在使用前,必须先有定义,如果没有定义,会出现引用错误
变量命名规则(必须遵守,不遵守会报错)
- 由字母、数字、下划线、$符号组成,不能以数字开头
- 字母区分大小写
- 不能是关键字和保留字
- 关键字指的是js中有特殊功能的小词语,比如var、for等
- 保留字指的是现在没有特殊功能,但是将来新语法中有可能作为关键字使用
变量命名规范(建议遵守的,不遵守不会报错)
- 变量名必须有意义
- 遵守驼峰命名法
js 数据类型
JS中的值,无论是字面量还是变量,都有明确的类型
- 数据类型分类(以基本数据类型为主)
- Number 数字类型
- String 字符串类型:所有的字符串都是 String 类型
- undefined类型:undefined本身就是一个数据,表示未定义,变量只声明不赋值的时候,值默认是 undefined
- Boolean 布尔类型
- 只有 true 和 false 两个字面量的值,必须是小写字母
- 计算机内部存储:true 为 1,false 为 0
- null类型
- null 本身就是一个数据
- 从逻辑角度,null 值表示一个空对象指针
- 如果定义的变量准备在将来用于保存对象,最好该变量初始化为 null
- Object 对象类型
数据类型检测
- 为什么要有数据类型检测?
- JS语言是一门动态类型的语言,变量并没有一个单独的数据类型,而是会随着内部存储数据的变化,数据类型也会发生变化
- 变量的数据类型,与内部存储数据有关
- 将来使用变量时,需要知道内部存储的数据是什么类型,避免程序出错
- 使用 typeof 的方法进行数据检测
- 检测方式:在 typeof 后面加小括号执行,将要检测的数据放在小括号内部
数据类型转换(转数值 / 转字符串 / 转布尔)
转数值
- Number(数据)方法
- 转型函数Number()可以用于任何数据类型,将其他数据类型转为数字
- 字符串:纯数字字符串转为对应数字,空字符串和空白字符串转为0,非空非纯数字字符串转为NaN
- 布尔值:true转为1,false转为0
- undefined:转为NaN
- null:转为0
- parseInt()方法:字符串转整数方法
- 对浮点数进行取整操作
- 对数字取整直接舍弃小数部分,只保留整数
- 将字符串转为整数数字
- 将字符串转为整数数字,也包含取整功能
- 字符串中,必须是纯数字字符串或者数字字符开头的字符串,才能转换为正常数字,且只取整数部分
- 如果不是数字打头的字符串,会转换为NaN
- 对浮点数进行取整操作
- parseFloat()方法:字符串转浮点数方法
- 将字符串转为浮点数数字
- 满足浮点数数字字符必须在字符串开始,如果不在开始返回值都是NaN
转字符串
变量.toString()
方法String(变量)
方法,有些值没有toString()
,这个时候可以使用String()
。比如undefined
和null
- + 号拼接字符串方式
- num + “” ,当 + 两边一个操作符是字符串类型,一个操作符是其他类型的时候,会先把其他类型转换成字符串在进行字符串拼接,返回字符串
转布尔
- Boolean(变量)方法
- 转型函数Boolean()可以用于任何数据类型,将其他数据类型转为布尔类型的值
- 转为false:NaN、0、“”空字符串、null、undefined
- 转为true:非0 非NaN数字、非空字符串
js 运算符
- 什么是运算符?
- 也叫操作符,是 JS 中发起运算最简单的方式,例如: 5 + 6
- 表达式的组成包含操作数和操作符,表达式会得到一个结果,然后用结果参与程序
JS 运算符分类
- 算数运算符(
+
/-
/*
//
/%
)- 运算顺序与数学中的运算顺序一致,先乘除取余,后加减,有小括号先算小括号
- 赋值运算符(
=
/+=
/-=
/*=
//=
/%=
) - 比较运算符(
>
/<
/>=
/<=
/==
/===
/!=
/!==
)- 比较结果只会返回一个布尔类型值,true 或者 false
- 逻辑运算符(
&&
/||
/!
) - 自增自减运算符(
++
/--
)
运算符优先级从高到低
- 自增自减运算符++ -- !
- 算术运算符 先* / % 后+ -
- 比较运算符中的 > >= < <=
- 比较运算符中的 == != === !==
- 逻辑运算符 先&& 后||
- 赋值运算符