从零开始，学习web前端之js基础
js来源
Javascript作为web标准中的行为标准，最初起名叫LiveScript，它是Netscape开发出来一种脚本语言，其目的是为了扩展基本的Html的功能，验证web页表单信息，为web页增加动态效果。为了赶上java的热潮，Netscape和Sun公司一起开发了一种新的脚本语言，他的语法和Java非常的类似，所以更名为:Javascript。
js历史
因为 JavaScript 1.0 非常成功，成为web的必备组件，Netscape 在 Netscape Navigator 3.0 中发布了 1.1 版。恰巧那个时候，微软决定进军浏览器，发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript。微软步入 Web 浏览器领域的这重要一步虽然令其声名狼藉，但也成为 JavaScript 语言发展过程中的重要一步。
在微软进入后，有 3 种不同的 JavaScript 版本同时存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是，JavaScript 并没有一个标准来统一其语法或特性，而这 3 中不同的版本恰恰突出了这个问题。随着业界担心的增加，这个语言的标准化显然已经势在必行。
ECMAScript
ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association。
正是因为JavaScript 并没有一个标准来统一其语法或特性，所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。
ECMAScript是标准，javascript是实现
JS组成
JS = ECMAScript + DOM + BOM
ECMAScript（前身为欧洲计算机制造商协会）
JavaScript的语法规范
DOM（Document Object Model 的简称）
JavaScript操作网页上元素的API
BOM（Browser Object Model 的简称）
JavaScript操作浏览器部分功能的API
引入方式
内嵌式：直接在html文档中编写js代码
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
body>
html>
<script>
alert("hello")
script>外链式：链入一个外js文件
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
body>
html>
<script type="text/javascript" src="js/index.js" >script>输出消息的几种方式
alert() 在页面弹出一个对话框，早期JS调试使用。
confirm() 在页面弹出一个对话框, 常配合if判断使用。
console.log() 将信息输入到控制台，用于js调试。
prompt() 弹出对话框，用于接收用户输入的信息。
document.write()在页面输出消息，不仅能输出信息，还能输出标签。示例：
alert("hello");
confirm("关闭浏览器？");
console.log("hello");按F12选择console或控制台可以看见
prompt("姓名");
document.write("hello")
document.write("hello
")
变量
会变化的量。
变量是用来存储数据的容器。
命名规则
驼峰命名规则：userName
遵从规则：
1.变量命名必须以字母或是下标符号”_”或者”$”为开头。
2.变量名长度不能超过255个字符。
3.变量名中不允许使用空格，首个字不能为数字。
4.不用使用脚本语言中保留的关键字及保留符号作为变量名。
5.变量名区分大小写。(javascript是区分大小写的语言)
定义变量
var name;//定义变量给变量赋值
var name;//定义变量
name="yzq"//给变量赋值定义并赋值
在实际的开发中我们一般在定义变量的时候直接赋值
var name="yzq" =号是赋值运算符数据类型
简单数据类型
- 数值类型 number
- 字符串类型 String
- 布尔类型 boolean
- 未定义 undefined
number
进制
常用的进制
- 二进制 基数为2，逢2进1
- 八进制 基数为8，逢8进1
- 十进制 满10进1
- 十六进制 由0-9，A-F组成，字母不区分大小写。
浮点数
因为精度丢失问题，所以不要判断计算后的两个浮点数是否相等。
示例：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
var num=0.07;
console.log(num*100);//输出的值为7.000000000000001
script>
head>
<body>
body>
html>
数值范围
由于内存的限制，ECMAScript 并不能保存世界上所有的数值
最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity
示例：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE)
console.log(1/0);
console.log(-1/0);
script>
head>
<body>
body>
html>
NaN
Not a Number的简写
console.log(“abc”/18); //结果是NaNUndefined和任何数值计算都为NaN;
NaN 与任何值都不相等，包括 NaN 本身
isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true
isNaN(NaN);// true
isNaN(“blue”); // true
isNaN(123); // false示例：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
var a="aaaa"/11;
console.log(a);
console.log(isNaN(a));//true
console.log(isNaN(NaN));//true
console.log(isNaN(123));//false
script>
head>
<body>
body>
html>
String
定义方式
用引号时，可单可双，不可一单一双。
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
var a="hello";
var b='hello';
console.log(a);
console.log(b);
script>
head>
<body>
body>
html>转义符
无法输出的字符，先输出/，再输出字符。
例：想在双引号中输出双引号，需要转义符
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
var a="h'el'lo";
var b='h、/"el\lo';
var c="aaaa\"dsd\'sa";//这里双引号需要转义符
console.log(a);
console.log(b);
console.log(c);
script>
head>
<body>
body>
html>
字符串拼接
通过+拼接字符串
示例
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
var a="hello";
var b="world";
console.log(a+" "+b);
script>
head>
<body>
body>
html>
字符串不可变
字符串比较特殊，一旦给值后就无法再修改他的值。如果再赋值，相当于重新创建的一个String对象，而原有的字符串会被回收。
Boolean
boolean类型有两个字面量：true和false，区分大小写。（大写不对）
虽然Boolean 类型的字面值只有两个，但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值
注意：
true，任何非0数字，任何字符串，任何对象都可以表示true。
例：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
var a=2;
if (a){
alert(a);
}else {
alert("false")
}
script>
head>
<body>
body>
html>
false、0 、“”、undefined 、null为false
例：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
if (""){
alert(true);
}else {
alert("false")
}
script>
head>
<body>
body>
html>
if判断时会把（）内的值强行转换成boolean类型进行判断。
undefined和null
null和undefined有很大的相似性。
null == undefined的结果(true)也就更加能说明这点。但是null ===undefined的结果(false)。
不过相似归相似，还是有区别的，就是和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。
任何数据类型和undefined运算都是NaN;
任何值和null运算，null可看做0运算。
数据类型转换
转换成字符串类型
- 变量+“” 或者 变量+“abc”
- String(变量)
- 变量.toSting() 注意：undefined和null不可以，Null和undefined无toString方法。
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
a=111;
console.log(typeof(a+""));
console.log(typeof(a+"sdas"));
console.log(typeof(a+"sdas"));
console.log(typeof String(a));
console.log(typeof (a.toString()))
script>
head>
<body>
body>
html>
转换为number类型
1）变量-*/一个数字（有非数字字符会出现NaN）
<script>
var a="1";
console.log(a-0); //1
console.log(typeof (a-0));//number
console.log(a/1);//1
console.log(typeof (a-1));//number
console.log(a*1);//1
console.log(typeof (a*1));//number
console.log("1aa"-1);//NaN
script>2） Number(变量)（有非数字字符会出现NaN）
<script>
var a = "1.4";
console.log(Number(a)); //1.4
console.log(typeof Number(a));//number
console.log(Number(true))//1
console.log(Number(false));//0
console.log(Number("1aa"));//NaN
script>需要注意的是：
Number(“”)返回0
console.log(Number(true))返回1
console.log(Number(false));返回0
3） parseInt()和parseFloat()（译为取整和取浮点数）
var a = "1.4";
console.log(parseInt(a)); //1
console.log(typeof parseInt(a));//number
console.log(parseInt(true))//NaN
console.log(parseInt(false));//NaN
console.log(parseInt("1aa"));//1
console.log(parseFloat("1.221aaa"));//1.221注意：
parseInt(“”)和parseFloat(“”)返回NaN
parseInt(变量)：如果变量中收割字符为字母则结果为NaN，否则取出现首个非数字前的整数。
parseFloat(变量)：如果变量中收割字符为字母则结果为NaN。否则取出现首个非数字前的浮点数。（没有小数取整）
转换为boolean类型
任何数据类型都可以转换成boolean类型
1）Boolean(变量);
<script>
console.log(Boolean("111"));//true
console.log(Boolean(0));//false
console.log(Boolean(1));//true
script>2）！！变量（两个感叹号 变量）
console.log(!1);//false
console.log(!!1);//true
console.log(!0);//true
console.log(!!0);//false第一个逻辑非操作 会基于无论什么操作数返回一个与之相反的布尔值
第二个逻辑非操作 则对该布尔值求反
于是就得到了这个值真正对应的布尔值
操作符
操作符种类
一、算数运算符（+—*/…）
a) 一元运算符：正号、负号、++、–、平方等一个变量就能运算
b) 二元运算符：+-*/%等两个变量才能运算
c) 三元运算符： 值1？值2：值3；
二、逻辑运算符（ ||&& ! ）（或且非）
三、比较运算符（<、>、==、>=…）
四、赋值运算符（=、+=、-=、*=、/=、%=）
优先级
优先级从高到底
() 优先级最高
一元运算符 ++ – !
算数运算符 先* / % 后 + -
关系运算符 > >= < <=
相等运算符 == != === !==
逻辑运算符 先&& 后||
&&和||运算
1）&&链接两个boolean类型，有一个是false结果就是false。两个都为true时才为true。
2）||链接两个boolean类型，有一个是true结果就是true。两个都为false时才为false。
console.log(false && true);//false
console.log(true && true);//true
console.log(false || true);//true
console.log(false || false);//false流程控制
选择结构
if语句
If语句用法有三种
1．if(条件1){程序1}
2．if(条件1){程序1}else{程序2}
3．if(条件1){程序1}else if(条件2){程序2}…else{程序n}
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if….else 语句 - 使用该语句来选择多个代码块之一来执行
示例：
<script>
var a=1;
if (a==1){
alert(1);
}else if(a==2) {
alert(2);
}else if (a==3){
alert(3);
}
script>
switch
语法
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。使用 break 来阻止代码自动地向下一个 case 运行。
注意：
break可以省略，如果省略，代码会继续执行下一个case
switch 语句在比较值时使用的是全等（===）操作符，因此不会发生类型转换
（例如，字符串 “10” 不等于数值 10）。
var a = 1;
switch (a) {
case "1":
console.log("字符串1")
break;
case 1:
console.log(1);
break;
default:
console.log("default");
break;
}
循环结构
for 循环
语法：
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 在循环（代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
示例：
<script>
for(var i=0;i<10;i++){
console.log(i);
}
script>
for(;;){程序} 死循环;
while
语法
while (条件)
{
需要执行的代码
}
While 循环会在指定条件为真时循环执行代码块。
示例
<script>
var i=0;
while (i<5){
i++;
console.log(i);
}
script>
死循环：
while(true){
}
do..while
语法：
do
{
需要执行的代码
}
while (条件);
do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。
示例：
<script>
var i = 0;
do {
console.log(i)
} while (i > 0);
script>
break和continue
break : 立刻跳出循环，不再执行该循环中的任何程序；
示例
<script>
var i=0;
while (true){
if (i==3){
break;
}
i++;
console.log(i);
}
script>
continue : 跳出本次循环，进入下一次循环中继续执行程序；
示例：
<script>
for (var i = 0; i < 10; i++) {
if (i == 5)continue
console.log(i);
}
script>
数组
数组是一种数据类型，可以存储多个数据。
数组的定义
1.字面量定义
var arr={1,2,3};2.对象定义
var arr = new Array(参数);
参数位置一个数值时为数组长度，多个数值时为数组中的元素。
数组的操作
获取数组的长度
数组的长度 = 数组名.length；
可以通过修改数组的长度来改变数组中元素的个数，如果改小了，数组从后面删除元素。（伪数组的长度可以修改，但是不能修改里面的元素）
<script>
var arr = new Array(1, 2, 3, 4, 5, 6);
console.log(arr.length);
console.log(arr);
arr.length = 3;
console.log(arr.length);
console.log(arr);
script>
获取数组元素
数组中的指定元素 = 数组名[索引值];
数组的索引代表的是数组中的元素在数组中的位置，从0开始。
如果获取数组中元素是，数组名[索引值]，没有指定索引（元素没那么多），系统不报错，而是给定值为undefined；
示例：
<script>
var arr = [1, 2, 3, 4, 5];
console.log(arr[0]);//1
console.log(arr[3]);//4
console.log(arr[5]);//undefined
script>遍历数组
遍历数组就是获取数组中每一个元素
一般通过for循环来遍历数组
示例：
<script>
var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
script>
函数
函数是什么
函数就是可重复使用的代码块。
函数的定义
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
执行代码
}当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数
示例：
<script>
/*定义函数*/
function fn() {
alert("我是个函数")
}
/*调用函数*/
fn();
script>参数
1）形参
形式上参与运算的变量，无实际值，为实参占位置，就像一`个躯壳一样。（可以理解为函数的内部变量外部无法访问）
2）实参
实际参与运算的变量。形参为他占位置，真实参与运算的变量。
/*定义函数*/
function sum(a,b) {
console.log(a+b);
}
/*调用函数*/
sum(1,2);//传入实际参数
返回值
有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。
<script>
/*定义函数*/
function add(a, b) {
return a + b;//将计算后的值返回
}
/*调用函数*/
var sum = add(1, 2);//传入实际参数
console.log(sum);//3
script>注意
1. 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined
2. 如果函数使用 return语句，那么跟在return后面的值，就成了函数的返回值
3. 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值 也是：undefined
4. 函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。
变量和作用域（函数中的变量需要函数执行后才能使用）
全局变量（成员变量）
哪里都可以访问到的变量。（进入script立即定义的变量和没有var的变量）
局部变量
函数内部的变量，只有函数内部可以访问到。（函数内部用var定义的变量和形参）
<script>
var a = "111";//全局变量
b = "222"//全局变量
function fn() {
var c = "333";//局部变量
d = "444";//全局变量
}
fn();//函数内的变量必须先初始化（调用函数），然后才能访问
console.log(a);//111
console.log(b);//222
console.log(c);//访问不到，c是局部变量
console.log(d);//444
script>隐式全局变量
隐式全局变量就是隐藏的全局变量不好被发现。
示例
function fn（）{
var a = b = c = 1; // b和c就是隐式全局变量（等号）
var a = 1; b = 2; c = 3; // b和c就是隐式全局变量（分号）
var a = 1 , b = 2 , c = 3; // b和c就不是隐式全局变量（逗号）
}
预解析
js的解析器在页面加载的时候会检查语法是否有错误，并提升变量声明。
<script>
console.log(aaa);//这里会输出undefined
var aaa=1;
script>在页面加载时，解析器会提升变量声明，但不会提升值
上面的代码在解析过后相当于：
<script>
var aaa;
console.log(aaa);//这里会输出undefined
aaa=1;
script>对象
什么是对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数……
此外，JavaScript 允许自定义对象。
对象具有一定的特性和行为。
javascript是基于对象的语言。只能创建出一类对象（都是Object类型）；
对象的属性和方法
属性是与对象相关的值。
方法是能够在对象上执行的动作。
访问对象的属性
语法
objectName.propertyName
访问对象的方法
语法
objectName.methodName()
创建对象的方法
1.通过new Object创建
<script>
/*创建对象*/
var person = new Object();
/*定义属性*/
person.name = "yzq";
person.age = 23;
/*定义方法*/
person.work = function () {
console.log("工作");
}
/*调用对象的属性和方法*/
console.log(person.name);
person.work();
script>
2.对象字面量
<script>
/*字面量对象*/
var p = {
name: "yzq",
age: 23,
work: function () {
console.log("工作");
}
}
console.log(p.age);
p.work();
script>3.通过函数构造对象
<script>
function person(name, age) {
this.name = name;
this.age = age;
this.work = work;
function work() {
console.log("工作");
}
}
var p = new person("yzq", 23);
console.log(p.name);
p.work();
script>
this关键字
this只出现在函数中。
谁调用函数，this就指的是谁。
示例：
function test() {
console.log(this);
}
test(); //window.test();
//上面的this是window，实际是window调用test()
/*字面量对象*/
var p = {
name: "yzq",
age: 23,
changeName: function (newName) {
this.name = newName;
}
}
p.changeName("喻志强");//changeName中的this就是p
console.log(p.name);//输出 喻志强
// 构造函数中的this始终是new的当前对象
javascript中的内置对象
javascript给我们提供了很多内置对象，我们可以直接调用这些对象的属性和方法。
参考网站
如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可。也可以关注我web前端的博客专栏，我会不定期的更新，如果文中有什么错误的地方，还望指正，谢谢！