一、前端页面三个组成部分

HTML结构    CSS表现    JavaScript行为   

二、什么是JS?

由网景（NetScape）公司开发，前身叫做LiveScript;

一门基于(面向)对象、面向客户端浏览器，事件驱动的脚本语言;

轻量级但功能强大的(类)编程语言；

可以用来 制作网页游戏 交互式操作 制作动画 等等

JS之父 布兰登·艾奇  

JS与JAVA异同点？  详见公众号

三、JS三个组成部分

ECMA核心API:JS基本语法、常量变量、运算符、流程语句、函数、对象

BOM:Browser Object Model 浏览器对象模型  浏览器相关API

DOM:Document Object Model 文档对象模型  文档操作的相关API

四、JS位置的书写

Javascript简称js。js代码书写在一对<script>标签对里面。标签有一个属性，type属性值是“text/javascript”，表示标签内部书写的是纯文本的Javascript代码。

script标签可以写在页面的任何位置，我们初始学习的时候，习惯放在body标签里。

js本身不能自己在浏览器加载，必须依托html载体来在浏览器中实现。

面试题：JS代码写在body前和body后有什么区别？

Title

alert("head中添加js");

alert("body前添加js");

通过事件属性添加js代码

alert("body后添加js");

alert("body外添加js");

1 

五、JS语法

一般情况下，从上往下顺序执行;

每一条语句以分号结束；

严格区分大小写

忽略所有的换行与空格

六、JS中注释

// 单行注释

/* 多行注释 */

1 //弹出一个警告框

2 alert(“hello JS”)

3 /*

4 需求：根据用户输入的数字，给出对应季节

5 思路：1，

6       2，

7       3，

8 */

七、JS中数据输出方式

7.1 通过警告框的方式弹出数据  

alert(“Hello World!!”)  alert(122333)   alert(12.34)

提示：字符串使用双引号或者单引号进行包裹

// 通过警告框的方式输出信息

//弹出字符换

alert("Hello World!!!");

// 弹出一个数字

alert(122333);

alert(12.34);

//弹出一个布尔值，布尔值只有两种结果：true 和 false

alert(true);

1 

7.2 通过浏览器控制台输出数据

console.log(“Hello World!!”);  ==> Hello World

console.log(3+3);  ==> 6

console.log(4+”6”) ; ==> 46

console.log(“6”-4); ==> 2

7.3 向页面中输出数据

直接向文档中写数据 document.write(“data”);

Title

document.write("这是通过document写出来的数据！！");

向页面中写入数据

点我document写数据

document.write("这是通过document写出来的数据22222222222222222222222！！");

1 

向标签中写入数据 element.innerHTML  =  “data”

Title

点我向div中写入数据

//获取btn按钮

var btn = document.getElementById('btn');

//获取div元素

var content = document.getElementById('content');

//给按钮添加点击事件

btn.onclick = function () {

//大括号中的代码块是我们点击按钮后执行的操作

//执行操作：通过innerHTML向div元素中写入数据

content.innerHTML = "通过innerHTML向div元素中写入数据";

}

1 

八、常量

常量，也叫字面量，在程序执行过程中不会发生改变的量

常量可以直接输出

九、变量

9.1 变量概述

在程序执行过程中可以发生改变的量；它是一个用来存储数据的容器。

9.2 变量的声明

var 变量名 = 初始化值;

var 是JS中的关键字，用来声明变量

变量名 用户自定义，命名规则见后面

= 赋值运算符：将 = 右边的初始化值赋值给左边的变量

初始化值 可以是一个常量 也可以是一个变量 还可以是一个表达式

9.3 变量的命名规则

由数字、字母、下划线以及美元符号$组成，数字不能开头

不能是js中的关键字和保留字

驼峰式命名：首字母小写，多个单词从第二个单词开始首字母大写 例如：getNumSum

一般长度不会超过18位

判断下面变量的命名是否符合规则，为什么？

HelloWorld    $123   -num123   _123h$!我爱你 num   b23

//使用var关键字来声明一个变量

var a = 10;

console.log("a:",a);

var HelloWorld = "JavaScript";

console.log("Hello World:",HelloWorld);

var $123 = true;

console.log("$123:",$123);

// var -num123 = 123;

// console.log("-num123:",-num123);//Uncaught SyntaxError: Unexpected token -

var 我爱你 = "中国";

console.log("我爱你，",我爱你);

var c = 10;

var b = 20;

var sum = b + c + 10;

console.log("b:",b,"sum:",sum);//==> 40

//变量不需要多次声明

b = 40;

console.log("b:",b,"sum:",sum);//==>40

var num1 = 100,

num2 = 200,

sum2 = num1 + num2;

console.log("num1:",num1,"num2:",num2,"sum2:",sum2); // ==> num1: 100 num2: 200 sum2: 300

1 

输出结果：

1 a: 10

2 Hello World: JavaScript

3 $123: true

4 我爱你， 中国

5 b: 20 sum: 40

6 b: 40 sum: 40

7 num1: 100 num2: 200 sum2: 300

9.4 变量的调用

如上代码，直接调用变量名

注意：此处等号 “=”不是等于的意思，是赋值的意思

9.5 变量的提升

浏览器中存在两种引擎：渲染引擎 和 JS引擎

JS引擎解析JS代码分成两步：

预解析阶段，会将所有变量的声明提升到当前作用域的最顶部，率先执行；

运行阶段，根据顺序依次赋值和运行代码

console.log(num);

1 

运行结果：

1 Uncaught ReferenceError: num is not defined  变量没有被声明

console.log(num);

var num = 20;

1 

运行结果：undefined变量被声明，但是没有被定义或叫没有被赋值

//上面执行的过程类似于下面

var num; //预解析阶段，所有的声明提升到当前作用域的最顶部

console.log(num);//undefined

num = 20;//赋值

console.log(num);//20

1 

结果：

undefined

20

通过上面告诉我们，变量一定要先定义，再使用，不然获取不到正确值

十、数据类型的分类

10.1 基本数据类型

Number数值类型: 如 10  20  12.34  Infinity(无限大)  NaN(Not a Number)不是一个数字

String字符串类型: 由单引号或者双引号进行包裹的文本  例如：”Hello”  “23”

Boolean布尔类型：只有两个值 true 和 false

Null 空值，空指针对象

Undefined 未被定义的：变量被声明，但是没有被赋值

ES5中提出的概念，衍生自Null，但是又不同于Null

10.2 引用数据类型

Object

Function

10.3 判断变量的数据类型 typeof 操作符

语法格式

typeof 变量或常量

typeof(变量或常量)

//基本数据类型

//Number数值类型

var num = 10;

console.log("num =",num)

//判断变量的数据类型：typeof  变量  || typeof(变量)

console.log(typeof num); //==> number

console.log(typeof("Hello"));// ==> string

var num2 = 10.23;

console.log("num2数据类型为：",typeof num2);

var num3 = num2 / 0;

//var num3 = -num2 / 0;

console.log("num3:",num3,",数据类型:",typeof num3);

var num4 = 4/"Hello";

console.log("num4:",num4,",数据类型：",typeof(num4));

console.log(NaN + 12);

console.log(NaN + "13");

console.log(12 + NaN);

console.log("12" + NaN);

console.log("12" - NaN);

console.log(12 - NaN);

console.log(typeof NaN);//==>number

console.log(NaN == NaN);//==>false

1 

结果：

num = 10

number

string

数据类型为： number

Infinity ,数据类型: number

NaN ,数据类型： number

NaN

NaN13

NaN

12NaN

NaN

NaN

number

false

//字符串类型String

var str = "34";

console.log("str:",str,"数据类型：",typeof str);//==>str: 34 数据类型： string

console.log(typeof "true");//==> string

console.log(typeof "hello123");//==> string

1 

//Boolean布尔类型

console.log(true,"数据类型：",typeof true);

console.log(false,"数据类型：",typeof false);

console.log(10 === 10);

1 

输出结果：

true "数据类型：" "boolean"

false "数据类型：" "boolean"

true

Title

//获取btn元素

var btn = document.getElementById('btn');

//打印btn

console.log(btn,"数据类型：",typeof btn);//==> null "数据类型：" "object"

点我

//获取btn元素

var btn = document.getElementById('btn');

//打印btn

console.log(btn);//=>点我

1 

var a;

console.log("a:",a,"数据类型：",typeof a);//==>a: undefined 数据类型： undefined

console.log(null == undefined);//true   此处"=="判断值是否相同，忽略数据类型

console.log(null === undefined);//false  此处"==="判断值和类型是否相同

1 

十一、基本数据类型转换

11.1 隐式转换

借助运算符 

var a = 10,

b= "20",

c = "Hello",

d = true,

e = 30;

//这里，有一个字符串，通过 + 完成字符串拼接，隐式转换

console.log("a+b = ",a+b,"数据类型:",typeof(a+b));// ==> a+b =  1020 数据类型: string

console.log("a+c+d=",a+c+d,"数据类型：",typeof(a+c+d)); //==> a+c+d= 10Hellotrue 数据类型： string

console.log("a+c+e=",a+c+e);//==>10Hello30

console.log("a+e+c=",a+e+c);//==>40Hello

console.log("c+a+e=",c+a+e);//==>Hello1030

//当数值 和 布尔进行数学运算时，true 默认转为数值1进行运算  false 默认转为数值 0 进行运算

console.log("d+e=",d+e,"数据类型：",typeof(d+e));//==> d+e= 31 数据类型： number

console.log(false + 10);//==>10

console.log(false + true,"===",typeof(true+false));//==> 1 "===" "number"

//这里，使用 - * 、 %，如果字符串为数字字符串，会自动转换成数值类型进行数学运算

console.log("a-b = ",a-b,"数据类型:",typeof(a-b));// ==> -a-b =  -10 数据类型: number

console.log("a-c=",a-c,"数据类型：",typeof(a-c));// ==> a-c= NaN 数据类型： number

console.log("a*c=",a*c,"数据类型：",typeof(a*c));// ==> a*c= NaN 数据类型： number

console.log(e-d);// ==> 29

1 

11.2 显式转换

借助全局的方法：toString()   parseInt()   parseFloat()

var a = 10,

b = 10.23,

c = "20",

d = "Hello",

e = true,

f = false;

console.log("a:",a,",数据类型:",typeof a,"==b:",b,",数据类型:",typeof b,"===c",c,",数据类型:",typeof c,"===d",d,",数据类型:",typeof d,"===e",e,",数据类型:",typeof e,"===f",f,",数据类型:",typeof f)

//通过toString()方法将其他数据类型转换成字符串类型

var g = a.toString();

console.log("g:",g,typeof g);//=>g: 10 string

var h = e.toString();

console.log("h:",h,typeof h);//=>h: true string

//通过parseInt()  parseFloat()将其他数据类型转换成整数或者浮点数类型

var i = parseInt(c);

console.log("i:",i,typeof i);//==>i: 20 number

var j = parseInt(d);

console.log("j",j,typeof j);//==> j NaN number

var k = parseFloat(e);

console.log("k",k,typeof k);//==> k NaN number

1 

使用包装类： String()  Number()  Boolean()

//通过包装类来进行转换

//String() 将其他数据类型转换成字符串类型

var l = String(b);

console.log("l",l,typeof l);//==> l 10.23 string

var m = String(f);

console.log("m",m,typeof m);//==> m false string

//Number() )将其他数据类型转换成数值类型

var n = Number(c);

console.log("n",n,typeof n);//==> n 20 number

var o = Number(d);

console.log("o",o,typeof o);//==> o NaN number

var p = Number(f);

console.log("p",p,typeof p);//==> p 0 number

//Boolean() 将其他数据类型转换成布尔类型

var q = Boolean(b);

console.log("q",q,typeof q);//==>q true boolean

var r = Boolean(c);

console.log("r",r,typeof r);//==>r true boolean

var s = Boolean(d);

console.log("s",s,typeof s);//==>s true boolean

var t = Boolean(null);

console.log("null:",t,typeof t);// ==>null: false boolean

var u = Boolean(undefined);

console.log("undefined:",u,typeof u);//==>undefined: false boolean

var v = Boolean(0);

console.log("0:",v,typeof v);//==>0: false boolean

var w = Boolean(1);

console.log("1:",w,typeof w);//==>1: true boolean

1 

1 

十二、算术运算符

用来执行数学运算

+    -    *    /    %(取模，取余)  ++(自增)   --(自减)

关注VX公众号“icketang” 免费领取华为荣耀商城项目实战视频教程