js基础理解
- 实现业务逻辑和页面控制,相当于人的各种动作
- 三大组成
- Javascript语法ECMAScript
- 页面文档对象模型DOM
- 浏览器对象模型BOM
1. dom-----文档对象模型
是W3C组织推荐的处理可错账标记语言的标准编程接口
2. BOM--------浏览器对象模型
它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等
3. 引入
3.1 行内式
input type"button" value="点我" onclick="alert('Hello World')"
alert__弹出框
-
可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
-
在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
-
该形式,可读性较差
3.2 内嵌
<script>
alert('Hello World~!');
</script>
3.3 外部
<script src="my.js"></script>
- 引用外部 JS文件的 script 标签中间不可以写代码
3.4 注释
//
/* */
4. 输入输出语句
**较为常用: **
方法 | 说明 | 归属 |
---|---|---|
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
注意:
alert()
主要用来显示消息给用户,console.log()
用来给程序员自己看运行时的消息。
变量
程序在了内存中申请的一块用来存放数据的空间
使用:
-
声明
var age;
// var是JS关键字,variable变量
-
赋值
age = 10;
结合:
var age = 10;
-
变量命名规范
- 严格区分大小写
- 首字母小写,后面单词的首字母需要大写。
myFirstName
数据类型
1.1 类型
JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。*
var age = '是的';
// 这是一个字符串
JS引擎根据右边变量值的数据类型来判断
- 上述也就意味着,JS拥有动态类型,变量的类型可以发生变化
1.2 分类
-
简单数据类型
- Number
- String
- Boolean
- Undefined
- Null
-
复杂数据类型
- object
1.3 简单(基本)数据类型
类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包括整形和浮点型 | 0 |
Boolean | 布尔型 | false |
String | 字符串 | “” |
Null | var a = null; 声明a为空值 | null |
Undefined | var a; 声明了变量a 但没有给值 | null |
1.3.1 Number
-
八进制在前面加0,十六进制在前面加0x
-
范围
最大值-1.7976931348623157e+308
Number.MAX_VALUE
最小值-5e-32
Number.MAX_VALUE
-
三个特殊值
alert(Infinity); // Infinity alert(-Infinity); // -Infinity alert(NaN); // NaN 代表一个非数值
-
isNaN()
判断一个变量是否为非数字的类型,返回true或者false
返回true表示不是数字
1.3.2 String
字符串加双引号或单引号
-
JS可以用单引号嵌套双引号,或者反过来
-
转义符
\n 换行符 \\ 斜杠 \' 单引号 \" 双引号 \t tab缩进 \b 空格
-
length
属性通过其可以获取整个字符的长度
var strMsg = "我是帅气多金的程序猿!"; alert(strMsg.length); // 显示 11
-
拼接
-
多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world //1.2 数值字符串 "相加" alert('100' + '100'); // 100100 //1.3 数值字符串 + 数值 alert('11' + 12); // 1112
-
与变量拼接
console.log('pink老师' + 18); // 只要有字符就会相连 var age = 18; // console.log('pink老师age岁啦'); // 这样不行哦 console.log('pink老师' + age); // pink老师18 console.log('pink老师' + age + '岁啦'); // pink老师18岁啦 // 注意,变量不可以加引号,否则会被认定为字符串
-
1.3.3 Boolean
当布尔型和数字型相加时,true表示1,false表示0
1.3.4 Undefined和Null
注意两者的区分
Undefined加数字相加,为NaN
1.3.5 获取检测变量的数据类型
typeof num
var num = 18;
console.log(typeof num) // 结果 number
1.3.6 数据类型转换
注意: 使用表单,prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而是需要进行变量的数据类型转换
-
转换为字符串
-
toString()
var num = 1; alert(num.toString());//转换成字符串
-
String()
强制转换var num = 0; alert(String(num))//它可以将任何类型强制转换为字符串
-
加号拼接成字符串
和字符串拼接的结果是字符串,也被称为隐式转换
var num = 1; alert(num+"字符串转换")
-
-
转换为数字型
-
parseInt(string)函数
parseInt('78')
转换为int若得到'120px',转换会去掉px 若是'rem120',转换会直接输出为NaN(parseFloat也是如此)
-
parseFloat(string)函数 // 只能解析十进制数,若解析内容只有整数,则解析为整数
parseFloat('78.21')
转换为float -
Number()强制转换函数
Number('12')
-
js隐式转换(- * /)
利用算术运算隐式转换
'12'-0
-
小加法例子
// 1. 先弹出第一个输入框,提示用户输入第一个值 var num1 = prompt('请输入第一个值:'); // 2. 再弹出第二个框,提示用户输入第二个值 var num2 = prompt('请输入第二个值:'); // 3. 将输入的值转换为数字型后,把这两个值相加,并将结果赋给新的变量 var result = parseFloat(num1) + parseFloat(num2); // 4. 弹出结果 alert('结果是:' + result);
-
-
转换为布尔型
-
Boolean()函数
Boolean("true")
-
代表空\否定的值会被转换为false
如: ‘’ 、0、NaN、null、undefined、
-
其余的值均会转换为true
-
-
2. 关键字
break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with
等。
运算符\流程控制-分支
1. 算术运算符
+ - * / %(取余)
1.1 浮点数精度问题
浮点数的最高精度为17位小数,但在进行算术计算时其精确度远远不如整数
var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001
**注意:**不要直接判断两个浮点数相等
还需注意算术运算的优先级,先乘除后加减
2. 递增和递减运算符
++ --
分前置,和后置
3. 比较运算符
< > >= <= == != ===全等,要求值和数据类型都一致 !==
4. 逻辑运算符
&& || !
返回true或false
一般可以引用短路运算
5. 赋值运算符
= += -= *= /= %=
6. 运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ – ! |
3 | 算术运算符 | 先* /%后± |
4 | 关系运算符 | < > <= >= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先&&后|| |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |