JS基础知识——简介/语法/应掌握基础框架

JS发展及基础

前端应该掌握的技术：

语言基础：HTML(5)、css(3)、js
框架基础：vue、react、node.js、TS、小程序等等

语言类型：

HTML 标记语言
css （层叠样式表）标记语言
JS 弱类型的脚本语言 负责用户交互（点击 拖拽）

浏览器内核：

我们把浏览器中识别代码绘制页面的东西称为浏览器的内核或者渲染引擎。
webkit（V8引擎）
谷歌 chrome
苹果 Safari
国内大部分浏览器
IE新版本 EDGE
Gecke
火狐浏览器 FireFox
Presto
欧朋Opera

浏览器兼容：

1.W3C发布的规范都是开发者们不断尝试总结下来的产物
2.每个浏览器为了彰显自己的不一样，不按照标准来，但是把标准中规定的效果用另外一种方式实现了。（写同一个效果写两套代码）

JavaScript简介

JavaScript是轻量级的脚本编程语言，
由ECMAScript（ES）、DOM、BOM三部分组成

ES：js的语法规范；
DOM：document object modal 文档对象模型，提供操作元素的api；
BOM：browser object modal 浏览器对象模型，提供操作浏览器的api。

alert(“哥，你真帅啊！！”);
console.log(“你猜我在哪出来呢？”);

JS的编写位置

1、行内式

js代码可以写到标签的onclick属性中
当我们点击按钮时，js代码才会执行

点我一下

可以写到超链接的href属性中

当点击超链接时，会执行js代码

你也点我一下

上面两种方法虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用

2、内嵌式

可以编写到script标签中

3、外链式

可以写在外部js文件中，通过script 标签引入

写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制.
script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略
如果需要则可以在创建一个新的script标签用于编写内部代码

基本语法:

注释

• 多行注释
• 单行注释

编写要求

JS中严格区分大小写

• JS中每一条语句以分号(;)结尾
  如果不写分号，浏览器会自动添加，但是会消耗一些系统资源；
  而且有些时候，浏览器会加错分号，所以在开发中分号必须写
• S中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

变量及定义变量

1. 声明变量。用var关键字声明一个变量 var a
2. 为变量赋值。 a=1;

创建变量的六种方式

var 声明一个变量（es3）
function 声明一个函数（es3）
const 声明一个常量 （es6）
let 声明一个变量（es6）
class 创建一个类（es6）
import 基于es6的模块，导入需要的信息（es6）

命名规范

1. 标识符中可以含有字母、数字、_、$

2. 标识符不能以数字开头

3. 标识符不能是ES中的关键字或保留字

4. 标识符一般都采用驼峰命名法

5. 首字母小写，每个单词的开头字母大写，其余字母小写

helloWorld xxxYyyZzz

js的输出方式

1. 控制台输出

• console.log:
  在控制台输出，优势：不会转换数据类型，输出什么格式的数据都可以。
  console.log({name:’zhufeng’,btn});
  可一次输出多个值，输出多个值中间用逗号隔开
• console.dir:
  比log输出更加详细一些，只有在查看引用数据类型时能看出区别
  一次只输出一个值
• console.table:
  把多维的JSON数据展示成为一个表格
  console.warn:
  以警告的方式输出
• console.time/timeEnd：
  计算出time/timeEnd中间所有程序执行所消耗的时间（预估时间：受到当前电脑性能的影响）
• console.time(‘AA’);
  for (let i = 0; i < 99999999; i++) {}
  console.timeEnd(‘AA’); //=>AA: 218.3701171875ms

2. 浏览器弹框

1. alert：
   在浏览器中弹出一个提示框（提供确定按钮，点击确定弹框消失）
   点击确定后，后面的代码才会执行（alert会阻碍主线程的渲染）
   使用alert弹框提示信息，提示的内容最后都会被转化为字符串输出（调用了 toString这个方法）
   alert(1+1);//=>”2”
   alert({12,23});//=>”12,23”
   alert({name:’zhufeng’});//=>”[object Object]”
2. confirm:
   在alert基础上增加了让用户选择性的操作（提供两个按钮：确定和取消） （不常用）
   var zhufengFlag=confirm(‘are you sure delete this!’);
   alert(zhufengFleg);
   当用户点击确定按钮的时候，我们接收到的结果是TURE，点击的是取消按钮 我们接受到的结果是False，此后我们可以根据接受的结果做不同的处理即可
3. prompt:
   在confirm基础上增加让用户输入的效果（不常用）
   var flag=prompt(‘are you sure delete this!’);
   用户点击取消按钮，我们获取到的结果是null，如果点击的是确定按钮，我们 将会获取到用户输入的内容（如果用户没有输入任何内容，获取的结果是空字 符串）。
   真实项目中，尤其是需要样式精美的网站中，我们的提示框一般都是用自己封 装插件和组件来实现的，不用内置的（原生js组件）。

3. 内容写入页面

1. document.write
   向body中写入内容（内容转为字符串再写入）
2. innerHTML/innerText
   向指定容器中插入内容。
   基于这两种方式会把之前容器中的内容给覆盖掉，想要追加，则采用+=的方式
   innerHTML能够把标签文本进行识别和渲染，而innerText会把所有内容都当做普通的文本
3. value
   给页面中的文本框赋值

// 1.document.write
document.write('AA');
        document.write(10);
        document.write({
            name: '珠峰'
        }); //=>"[object Object]"

// 2.**innerHTML/innerText**
// 想操作谁就先获取谁

let box = document.getElementById('box');
// 使用id获取元素
box.innerHTML = "我爱你";  //=>覆盖原始的所有内容
box.innerText = "爱你";
// box.innerHTML += "你说呢"; //=>在原始内容上继续增加
// box.innerText += "我不爱你";
// box.innerHTML = "我是重点内容";
// box.innerText = "我是重点内容";

3.2 value

给页面中的文本框赋值
// let userName = document.getElementById(‘userName’);
// userName.value = “我是在JS中插入的内容”;