js基础知识

一.JavaScript的组成

BOM(浏览器对象模型)

使用BOM可以操作浏览器窗口,比如:弹出框,控制浏览器跳转,获取分辨率等

DOM(文档对象模型)

通过DOM提供的API可以对页面上的各种元素进行操作(大小,位置,颜色等)

ECMAScript

逻辑编程语法,实现业务逻辑.

浏览器引擎

渲染引擎

用来解析HTML和CSS

JS引擎

用来执行JavaScript代码,比如谷歌浏览器的V8引擎

二.数据类型

1.undefined

Undefined是一个特殊的值,当一个变量声明但未被初始化时,就会被赋予undefined值.一个函数如果没有使用return语句指定返回值,就会返回一个undefined值

2.Null

声明了变量a为空值,可以提前赋值给一个要储存对象的变量

3.Boolean

true or false ,等价于1和0.

4.Number

数字型,包括整型值和浮点型值

5.String

字符串型

6.Object(复杂数据类型)

三.js的5个常用DOM方法

prompt(info)弹出输入框

• 点击确定返回字符串数据
• 点击取消返回null

alert(message)消息弹出框

console.log(message)控制台输出,输出多个值中间用逗号隔开

document.write(message)在body标签中输入,可以使用style属性以及各种HTML标签

confirm(info)确认选择框,info是提示信息,确认的话值为true,取消的话值为false

• 点击确定返回true
• 点击取消返回false

四.变量

概念

可以看作是存放数据的容器,
本质是程序在内存中申请的一块用来存放数据的空间

声明和赋值

• 语法:let 变量名 = 值
• 用法1:先声明,后赋值

let age; // 变量声明 - 声明了一个 名字叫做 age 的变量
age = 10; // 变量赋值 - 向变量 age 赋值
console.log(age); // 打印 age里保存的值：10 

• 用法二：声明和赋值一起完成

let age = 10; // 声明和赋值一次完成
console.log(age); // 打印 age 里保存的值：10

• let 是 一个 JS关键字，用来 声明变量 - 本质：CPU在内存条中申请一个空间
• age 是 程序员定的 变量名，用来方便程序员通过代码 访问变量空间
• = 用来把 右边的值 赋给 左边的 变量空间

访问与修改

• 访问变量

let uName = 'Ruiky';
//1.直接使用
console.log(uName); // Ruiky

• 修改变量
  • 每个变量中只能存放一个值，所以一旦放一个新的值，会把原来的值替换

let age2 = 101;
console.log(age2); // 打印 age2里保存的值：101

age2 = 18; // 把变量 age2 的值改为 18
console.log(age2); // 打印 age2里保存的值：18

• 变量给变量赋值

思考：下例代码中，第3行 打印结果是多少？

let age = 101;
let myage = age; // 将 age 里的 101 复制 一份 给 myage
console.log(myage); 

错误点

• 只声明不赋值,默认为undefined
• 不使用关键字来创建变量(不推荐)

变量命名规则

• 不能以数字开头
• 由字母,数字,下划线_美元符号$组成.
• 不能是关键字,保留字和代码符号
• 区分大小写

变量命名规范

• 变量名必须有意义
• 遵守驼峰命名规范

'+'号的多种作用

求和

• 数值 + 数值
• 数值 + 布尔值(会直接将布尔值当作0或1)

拼接字符串

• ‘字符串’ + ‘字符串’
• ‘字符串’ + 其他数据类型(数字或布尔值)

变量相加

• 加号两边的值有字符串,会被转化为字符串

let a = '字符串' + 12;
console.log(typeof(a));//string

隐式转化

let num = +prompt('数字');
console.log(typeof num);//number

复合赋值运算符

运算符	描述	实例
x += y	加等于	let x = 1; x += 4; // x = x + 4
x -= y	减等于	let x = 2; x -= 3; // x = x - 3
x *= y	乘等于	let x = 3; x *= 2; // x = x *2
x /= y	除等于	let x = 4; x /= 1; // x = x /1
x %= y	取模等于	let x = 10; x%=3 ; // x = x %

• 例子：

let x = 1;
x += 5; // -> x = x + 5; 结果 6

let x = 10;
x -= 3; // -> x = x - 3; 结果 7
console.log(x); // 7

let x = 7;
x *= 3; // -> x = x * 7; 结果 21
console.log(x); // 21

let x = 10;
x /= 2; // -> x = x / 2; 结果 5
console.log(x); // 5

let x = 10;
x %= 3; // -> x = x % 3; 结果 1
console.log(x); // 1

• += 可以正常做数值运算，也可以做字符串拼接

// 字符串拼接
let str = 'Hi~';
str += '今天天气不错哦~'; // str = 'Hi~' + '今天天气不错哦~';
console.log(str); // Hi~今天天气不错哦~

if判断单选

• 语法： if(条件){ if代码块 }
• 作用：根据 条件 执行 代码块，如果条件成立，则执行代码块，如果不成立，则不执行代码块
• 特点：
  • if 条件 是 bool 类型 值，里面可以写表达式
  • 如果 if 条件 为 true，则 执行 代码块，否则 跳过代码块
  • if 后面的 js 代码 一定会执行

if(true){ // 执行 if 代码块
    console.log('号外：中国重回世界第一');
    console.log('号外：美国坚称与中国并列第一');
}

if(false){ // 不执行 if 代码块
    console.log('号外2：中国重回世界第一');
    console.log('号外2：美国坚称与中国并列第一');
}

// 后面代码一定执行
console.log('if 代码块 后的代码 一定会执行的~~');

• if ( ) 中 的 判等语法
• if 小括号中 也可以 放 返回 bool 值的 表达式

let age = 18;

// 小括号中 也可以放 表达式
if(age == 18){ // 相当于 if(true)，会执行 if代码块
    console.log('你真是一个可爱的捣蛋鬼~~');
    console.log('不用谢谢我~~');
}

if(age == 28){ // 相当于 if(false) ，不会执行 if代码块
    console.log('还不去写代码~~~');
    console.log('别忘了锻炼身体~~');
}
console.log('if 代码块 后的代码 一定会执行的~~');

if else 判断 二选一

• 语法： if(条件){ if代码块 } else { else代码块 }
• 作用：根据 条件 执行 代码块，如果条件 成立，则执行 if代码块，如果 不成立，则执行 else代码块

//1.接收用户的 选择 (确定true / 取消false)
let isOk = confirm('开始安检，检查通过了吗？'); // true / false

//2.如果选择结果是 true，就坐飞机
if(isOk){
    alert('安检通过，欢迎乘坐黑马航班~~');
}else{ //3.否则，就去警察局
    alert('安检不通过，欢迎来到警察局~~');
}

// 1.接收用户年龄，并转成 数值类型
let age = +prompt('请问您今年贵庚呀：');

// 2.如果年龄 等于 18
if(age == 18){
    console.log('哟，18岁啦，来，这 1T 学习资料 送你~~');
}else{ // 3.否则（年龄 不等于 18）
    console.log('只有今天18岁的人才能领取奖励~~');
}

数学方法

Math对象

Math对象是JS提供的一个数学工具包,里面包含了各种数学函数(方法)供开发者使用,包含成员

• 属性,如:Math.PI
• 函数,如:Math.abs()

圆周率

console.log(Math.PI);//3.141592653589793

绝对值

let absNum = Math.abs(-2);
console.log (absNum);//2;

求次方函数

let ciNum = Math.pow(2,3);//求2的3次方 即2^3=8 幂次的单词是power
console.log(ciNum);

天花板函数(向上取整)

console.log(Math.ceil(5.3));//6

地板函数(向下取整)

console.log(Math.floor(5.3));//5

四舍五入函数

console.log(Math.round(8.5));//9
console.log(Math.round(-8.5));//-8 这里需要注意一下,和数学上不太一样

最大值和最小值函数

let maxNum = Math.max{99, 88, -100};
console.log('最大值是' + maxNum); //99

let minNum = Math.min{99, 88, -100};
console.log('最小值是' + minNum);//-100

随机数函数生成的是[0,1),可以把这个函数乘以其他数字得到相应的范围,再用向上取整得到整数范围

let ranNum = Math.random();
console.log(ranNum);