一、
前端页面三个组成部分
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后有什么区别？
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--从外部引入js文件-->
<script type="text/javascript" src="01_js写入位置.js"></script>
<!--将js代码嵌入到html中任何位置-->
<script type="text/javascript">
alert("head中添加js");
</script>
</head>
<body>
<script type="text/javascript">
alert("body前添加js");
</script>
<!--行内式的方式添加js代码-->
<button onclick="alert('通过事件属性添加js代码')">通过事件属性添加js代码</button>
<script type="text/javascript">
alert("body后添加js");
</script>
</body>
<script type="text/javascript">
alert("body外添加js");
</script>
</html>
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”);
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
document.write("这是通过document写出来的数据！！");
</script>
</head>
<body>
<h1>向页面中写入数据</h1>
<button onclick="document.write('新的数据通过docuement输出')">点我document写数据</button>
<script>
document.write("这是通过document写出来的数据22222222222222222222222！！");
</script>
</body>
</html>
1
|
向标签中写入数据 element.innerHTML = “data”
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点我向div中写入数据</button>
<div id="content"></div>
</body>
<script type="text/javascript">
//获取btn按钮
var btn = document.getElementById('btn');
//获取div元素
var content = document.getElementById('content');
//给按钮添加点击事件
btn.onclick = function () {
//大括号中的代码块是我们点击按钮后执行的操作
//执行操作：通过innerHTML向div元素中写入数据
content.innerHTML = "通过innerHTML向div元素中写入数据";
}
</script>
</html>
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代码分成两步：
预解析阶段，会将所有变量的声明提升到当前作用域的最顶部，率先执行；
运行阶段，根据顺序依次赋值和运行代码
运行结果：
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//获取btn元素
var btn = document.getElementById('btn');
//打印btn
console.log(btn,"数据类型：",typeof btn);//==> null "数据类型：" "object"
</script>
</head>
<body>
<button id="btn">点我</button>
</body>
<script>
//获取btn元素
var btn = document.getElementById('btn');
//打印btn
console.log(btn);//=><button id="btn">点我</button>
</script>
</html>
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
|
十二、算术运算符
用来执行数学运算
+ - * / %(取模，取余) ++(自增) --(自减)
标签：console,log,爱创,JavaScript,数据类型,源码,typeof,var,true
来源： https://www.cnblogs.com/Vhaomei0452/p/11401066.html