JS 基础知识
1. JS组成的三个部分
1.1 ECMAScript
- 是js的核心思想，结合dom和bom从而实现js
- 定义了JS的语法规范
- 语言本身的变量
- 数据值
- 操作语句
- 内存管理等
1.2 DOM
- 文档对象模型 (document object model)
- 通过dom可以去操作文档上的内容（html，css等）
1.3 BOM
- 浏览器对象模型(browser object model)
- 通过bom去操作浏览器(url 前进 后退 刷新 滚动条 等)
2. JS中的变量
2.1 变量
- 可变的量(其储存值是可变的)，设置一个变量(起一个名字)，让其代表和指向某一个具体的值
2.2 JS创造变量的几种方式
- var（ES3） 声明一个变量
- let （ES6） 声明一个变量
- const （ES6）声明一个变量
- function 声明一个函数
- class 创造一个类
- import/require 基于ES6Module或者Common.js规范导入模块
2.3 变量命名的规范
- 不能以数字或者除了$和_之外的特殊符号开头，且不能够包含特殊符号，
- 不能使用js的保留字命名
- 见名知意，尽量不使用拼音
- 如果变量名是两个以上英文单词组成有两种命名方式：
- 小驼峰：background-color=>backgroundColor 一般用于写变量 对象
- 大驼峰 background-color=>BackgroundColor 用于类名，函数名，属性，命名空间
3. JS中的数据类型
-
基本数据类型
- number 数字
- string 字符串
- boolean 布尔
- null 空对象
- undefined 未定义
- Symbol Es6新增的唯一值类型
-
引用数据类型
- 对象数据类型
- 普通对象 {....}
- 数组对象 [....]
- 正则对象 /^$/
- 日期对象 data
- 数学函数对象 Math
- 函数数据类型
- 对象数据类型
三大类输出方式
1. console
- Console 对象常见的两个用途：
- 显示网页代码运行时的错误信息。
- 提供了一个命令行接口，用来与网页代码互动。
1.1 console.log(最常用)
- 特点是：输出任意数据类型的数据，控制台展示的也是对应的数据类型
console.log('hello');
1.2 console.dor
- 输出一个对象或者一个值的详细信息
- 与log区别
- console.log可以一次性输出多个值，但是dir不可以
1.3 console.warn
- 以警告的方式输出
console.warn('当前操作不符合规范');
1.4 console.table
- 把多为的JSON数据以表格形式输出
console.table(["Google", "Runoob", "Taobao"]);
2. windows提示框
- 是在浏览器窗口中弹出一个提示框，提示框中输入指定的信息
2.1 alert
- 特点
- 需要等到alert弹出框，点击确认关闭后，后面的代码才会执行-----alert会阻碍主线程的渲染
- alert弹出的内容都会默认转换为字符串-------调用toString
alert('hello world');
2.2 confirm
- 特点
- 创造一个变量，用来接收用户选择的结果
- true 点击确定
- false 点击取消
- 创造一个变量，用来接收用户选择的结果
- 与alert区别
- 给用户提供了确定和取消两种选择
<script>
function myFunction(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
2.3 prompt
- 在confirm的基础上给用户提供书写操作的原因等信息
- 特点
- 点击的是取消返回结果是null
- 点击的是确定，会把用户输入的原因信息返回
- 提示框经常用于提示用户在进入页面前输入某个值。
window.prompt("sometext","defaultvalue");
3. 页面插入
- 向页面指定容器插入内容
3.1 document.write
- 定义
- 在页面中直接写入
- 特点
- 和alert一样，写入的内容最后都会转换为字符串，然后写入，但不常用
3.2 innerHTML
- 特点：
- 插入的信息也会变为字符串
- 基于这种方式会把之前容器中的内容覆盖掉，想要追加，则采用+=的方式
3.3 innerText
- 与HTML的区别
- innerHTML能够把标签文本进行识别和渲染
- innerText会把所有内容都当作普通文本
3.4 value
- 给页面中的文本框赋值
