JavaScript基础
JavaScript基础
JavaScript
1.特点
- 解释型
- 弱类型
- 基于对象
- 跨平台型
- 事件驱动
2.版本
ECNA:欧洲计算机标准协会
- ECMAScript3.0
- ECMAScript5.0
- ECMAScript6.0(ECMA2015)
3.应用领域
- WEB前端(网页)
- 后端(node.js)
- 混合APP(IOS,安卓)
- 游戏
浏览器中JavaScript的基本语法
1.在HTML中使用JS
引入外部的 js 文件。类似于 CSS的link
<script src="js文件的地址"></script>
<script src="js文件的地址"></script>
在htm中直接写,包裹在script标签中,类似css的style
<script>
code... js代码
</script>
2.指令结束符
; 或者换行符
3.注释
单行注释://
多行注释:/*
*/
4.输出内容(一般调试用)
输出到控制台:console.log()
输出到页面:document.write()
输出到弹框:alert()
5.定义变量
var 变量名 = 值;
* var 关键字
* 变量名 由数字、字母、下划线、$ 组成 不能数字开头。 变量名不能使关键字
* 变量名严格区分大小写
* 变量声明 没给值,默认值是undefined
6.JS程序用到的知识点:
弹框
- 警告框:alert('警告'); 无返回值
- 确认框:confirm('确认'); 返回true/false
- 输入框:prompt(''); 返回输入的内容,若点取消返回null
获取页面中的元素作为JS对象
document.getElementById() #返回元素对象
- 元素对象与 HTML元素 存在映射关系
- 元素对象用来描述某个HTML元素
- HTML元素的属性,会映射成 元素对象的 属性
获取双标签内的内容
innerHTML 获取/设置双标签中的内容
7.定义函数
function add(){
// 获取 用户在 input 中输入的内容
// 获取元素对象 返回对象 对象描述 id是num1的元素
var box1 = document.getElementById('num1');
var box2 = document.getElementById('num2');
//获取用户在input中输入的值
var inp_num1 = box1.value;
var inp_num2 = box2.value;
//判断用户输入是否是纯数字
if (isNaN(inp_num1)){
alert('请输入纯数字');
return;
}
if (isNaN(inp_num2)){
alert('请输入纯数字');
return;
}
//把字符串转换为数字
var num1 = Number(inp_num1);
var num2 = Number(inp_num2);
//两个数相加
var res = num1 + num2;
//获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容
var boxRes = document.getElementById('box');
boxRex.innerHTML = res;
}
JavaScript数据类型
1.数据类型
- 原始类型:Number(数字) String(字符串) Boolean(布尔值) Null(空) Undefined(未定义)
- 对象类型:Object、Array、Date、Math、Error Set(ES6).....
2.Number
-
js不区分 整型和 浮点型
-
定义方式
//十进制 var num = 100 //十六进制 var num = 0x10f //科学计数法 var num = 123e100
-
特殊值 NaN
NaN跟任何值进行任何运算,结果仍然NaN 跟谁都不相等,包括自己 一般NaN被动产生(数据类型转为Number,不能转为正常的数字,就是NaN) 函数 isNaN() 判断是不是NaN或者能不能转换为NaN
3.字符串
# 单引号
# 双引号
# 反引号 模板字符串 ` `
单引号 双引号 没有区别
反引号:
多行
可以支持中 ${变量} 添加变量
4.布尔值
true
false
5.Null与undefined
被动产生
6.数据类型转换
- 强制转换
Number()
字符串:纯数字转为正常的数字,其他NaN
布尔值: true->1 false->0
String()
Boolean()
字符串->布尔: 只有空字符串转为false,其他true
数字->布尔: 0和NaN是false,其他true
null和undefined都会转为false
- 自动转换
根据运算符 做出适当的类型转换
100 + '20' 数字100自动转换为字符串,得到'10020'
10*'3' 字符串'3'自动转为数字3,得到30
运算符
1.算术运算符
+ 加号 正号
- 减法 负号
*
/
%
++ 累加
-- 累减
2.比较运算符
>
>=
<
<=
== 相等 两个操作数 只要值相等(类型不同会自动转换) 就相等
=== 全等 类型和值都要相同才全等
!= 不得
!== 不全等
in 判断 数组的索引 和 对象的属性 是否存在
instanceof 一个对象是否属于某个构造函数(类)
3.逻辑运算符
&& 逻辑与and
|| 逻辑或or
! 逻辑非not
4.位运算符
&
|
~
^
<<
>>
5.赋值运算符
=
+=
-=
*=
/=
%=
6.其他运算符
+ 字符串连接符
?: 比较运算符 表达式?值1:值2
typeof 判断类型
delete 删除对象的属性和数组的成员
void 空运算符
, 逗号运算符