JavaScript基础第一天
JavaScript基础第一天
1. JavaScript历史
1.1 JavaScript能做什么
万金油，无所不能。
- 表单动态校验（密码强度检测）( JS 产生最初的目的）
- 网页特效。
- 小程序
- 服务端开发（ Node.js )。
- 桌面程序（ Electron )（像你们用的vscode就是基于js开发的）。
- App ( Cordova )。
- 控制硬件﹣物联网（ Ruff )。
- 游戏开发（cocos2d-js）。
1.2 ECMAScript脚本语言
-
JavaScript,JScript等脚本语言都是基于ECMAScript标准实现的，因此在
声明变量,操作数组等语法是完全一样的。 -
但在操作页面上的元素和操作浏览器方面各有各自独特的方法，因而BOM和DOM的实现各个厂商是不一样的。
-
JavaScript由ECMAScript，DOM和BOM三者组成的。
一般认为浏览器中JavaScript由三部分组成：
- ECMAScript: 基础语法
- DOM: 文档对象模型
- BOM: 浏览器对象模型
2. 引入方式
2.1 内部形式
-
引入
需要写script标签。
<script>
alert("Hello World")
script>
-
prompt
prompt可以弹出一个消息框， 你可以输入信息，然后我们的js可以获取到你输入的信息属于BOM api。
const data = prompt("请输入你的姓名：")
-
console.log()
console.log()用于在控制台打印信息，他常常用于调试代码属于BOM api。
console.log(data)
可以按F12打开调试工具
-
alert
alert 用于弹出提示框，属于BOM api。
alert(data + "你好")
注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息
2.2 外部形式
一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入。
-
demo.js文件
alert("Hello World"); -
html文件
DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>js第一天title> head> <body> <script src="./demo.js">script> body> html>
3 数据类型
一共有七种：
- 数字 number
- 字符串 string
- 布尔 bool
- 符号 symbol
- 空 undefined
- 空 null
- 对象 object
总结:四基两空一对象
3.1 数字 number
- 64位浮点数，写法：
- 整数写法：1
- 小数写法：0.1
- 科学计数法：1.23e4
- 八进制写法(用得少)：0123 或 00123 或 0123
- 十六进制写法：0x3F 或 0X3F
- 二进制写法：0b11 或 0B11
//数字number 64浮点数
let number1 = 1 //整数声明
let number2 = 0.1 //声明小数
let number3 = 1.23e100 //科学计数法
let number4 = 0b11 //2进制写法
let number5= Infinity //无穷大
let number6 = NaN //无法被表示的数字
let n = '你好' - 1 //NaN
let n2 = 0 / 0 //NaN
console.log(n);
console.log(n2);
console.log(Number.MAX_VALUE); //1.7976931348623157e+308
//因为js的精度问题，0.1+0.2结果不等于0.3而等于0.300000000000004
console.log(0.1+0.2); //0.300000000000004
- 数字运算：四则运算±*/
let number1 = 1 //整数声明
let number2 = 0.1 //声明小数
let add = number1 + number2 //1.1
let del = number1 - number2 //0.9
let mul = number1 * number2 //0.1
let divide = number1 / number2 //10
- 取余%
let dat = 123
let dd = 10
let mod = dat % dd // 3
console.log(mod);
3.2 字符串string
通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用双引号。
let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！
使用 const 声明的变量称为“常量”，也就是变量永远不会变。
// 字符串
let name = "大帅比";
let name2 = "klkl";
let phoneNumber = "1845454554565";
// 通过length可以获取字符串的长度
console.log(name.length); //3
console.log(name[1]); //获取帅
console.log(phoneNumber.substring(7, 11)); //通过substring截取字符串
let name = "大帅比";
let name2 = "klkl";
let phoneNumber = "1845454554565";
// 通过length可以获取字符串的长度
console.log(name.length); //3
console.log(name[1]); //获取帅
console.log(phoneNumber.substring(7, 11)); //通过substring截取字符串
3.3 布尔bool
bool用来判断true或者false它一般和if条件判断搭配使用。
let bool = true;
let a = 1;
let b = "1";
// ==不判断类型===会判断数据类型
let bool2 = a == b; //true
let bool3 = a === b; //false
console.log(bool2);
console.log(bool3);
js中的false的值：
if(!undefined){
console.log('undefined为fasle值');
}
if(!NaN){
console.log('NaN为fasle值');
}
if(!null){
console.log('null为fasle值');
}
if(!0){
console.log('0为fasly值');
}
if(!''){
console.log('""fasly值');
}
3.4 空undefined,null
如果一个变量，声明了，但是我们没有给它赋值，默认为undefined。
let c
console.log(c);
在我们还不确定a的值的时候，先给一个null来占位。
let a = null
3.5 对象0bject
对象常常用来描述一个事物，对象里面可以包含所有的数据类型。
let friend={
name:'钱多多',
age:26 ,
hobbies:['游戏','旅游'],
isMale:true
}
对象可以通过操作符来获取对象中的属性能够获取到key对应的value值。
const name = friend.name //钱多多
console.log(name);
const name2 = friend['name'] //使用[]写法， 获取到value
console.log(name2) ;
// .一个不存在的属性，结果为undefined
console.log(friend.b);
//删除key会 将key连同它的value-起删除
delete friend['age']
console.log(friend);
//获取对象的所有的key值
const keys = Object.keys(friend)
console.log(keys);
//获取对象所有的value值
const values = Object.values(friend)
console.log(values);
4. 类型转化
4.1 String转Number
特点：只能识别纯数字的字符串。
let a = Number('8')
let b = Number('a')
let c = Number (undefined)
let d = Number('1.23e15')
console.log(a); //8
console.log(b); //NaN
console.log(c); //NaN
console.log(d); //1230000000000000
- parseInt：转整数
- parseFloat：转浮点数
- parseInt (string, radix)：radix进制默认10，string不为数字返回NaN
let n = parseInt('12px')
console.log(n); //12
4.2 Number转String
可以用to.String()。
let a = Number('10')
let aStr = a.toString()
console.log(aStr); //字符串的10
4.3 Bool转Number
true转1，false转0。
let boolN = Number(true)
let boolF = Number(false)
console.log(boolN); // 1
console.log(boolF); // 0
4.4 Number转Bool
0转false，除0以外的数都为true。
let e = 0
let f = 4
let bool1 = Boolean(e)
let bool2 = Boolean(f)
console.log(bool1); //false
console.log(bool2); //true
4.5 Object转String
也是用toString()进行转换。
let obj = {
a:4,
b:5
}
const objStr = obj.toString()
console.log(objStr); //[object Object]
序列化JSON.stringify 将对象转字符串
const objStr2 = JSON.stringify(obj)
console.log(objStr2); //{"a":4,"b":5}
5. 运算符
5.1 四则运算±*/
let a = (55-60)+20
let b = 12
let c = 13
let d = '12'
//比较> < >= <= 1=(等价于-不判断类型) !==(等价===判断类型的)
console.log(b > c); //false
console.log(b < c); //true
console.log(b != c); //true1og
console.log(b != d); //false
console.log(b !== d); //true
5.2 逻辑运算
与：&&当且仅当两边都为true才返回true
或：||一边为true,返回true
非：!取反
let d = '12'
let e = 0
console.log(e && d); //0
console.log(e || d); //12
console.log(!e); //true
5.3 三元表达式a?b:c*
a如果为true,返回b，否则返回c
let abc=(20 > 6) ? 10:4
console.log(abc); // 10
console.log(abc); // 4