本篇教程介绍了小白教程 快速带你JavaScript入门 ，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

<

JS介绍
// JavaScript的发明人
// 布兰登·艾奇(Brendan Eich),用了十天时间发明了JavaScript模型
// JavaScript简称JS
// JavaScript是什么？
// 1.脚本语言
// 编译语言：需要把代码编译成计算机所认知的二进制语言才能执行
// 脚本语言：不需要编译，直接执行
// 2.解释性语言
// 解释性语言：遇到一行代码就解释一行代码
// 其他语言：把所有代码编译完成后在执行代码
// 3.动态类型的语言
// 4.基于对象的语言
// 5.弱类型语言
// 弱类型语言：声明变量都用var，会自动辨别类型：var num = 10; var num2 = 10.23;
// 强类型语言：声明变量的时候必须写上对应变量的类型：int num = 10; double num2 = 10.23;
// JS分三个部分：
// 1.ECMAScript js的基本语法
// 2.DOM  Document Object Model 文档对象模型
// 3.BOM Browser Object Model 浏览器对象模型
// js代码注意问题
// 1.如果script的标签中有错误的js代码，那么这对script标签就不会执行
// 2.如果有一个script标签代码错误，但它不会影响其他的script标签
// 3.script标签在页面中可以多对出现
// 4.script标签一般放在body标签内容的最后，可以放在head中
// 5.如果script标签引用外部js文件，那么就不要在这对标签里面放任何js代码
数据输出\输入
// 在浏览器弹出的提示框中显示
alert();
// 在浏览器的控制台中显示
console.log();
// 在浏览器页面中显示
document.write();
// 在浏览器中弹出输入框
prompt();
JS变量
/*什么是变量：
 变量是计算机内存中存储数据的标识符，根据变量名可以获取到内存中存储的数据*/
/*为什么使用变量：
 使用变量可以方便的获取或者修改内存的数据*/
// 变量的作用：
// 操作数据：存储数据、读取数据
/*变量名的规范：
一般以字母，$符号，下划线开头
变量名一般都是小写，如果是多个单词，那么第一个单词的首字母小写，后面的单词首字母大写
变量名不能是关键字
区分大小写*/
// 变量声明
var  name;// 有var 有变量名字但没有赋值
// 声明多个变量
var name,age,sex;
// 变量的初始化：声明变量同时赋值
var xiu = undefined;// 声明变量没有赋值默认为undefined：未定义
var number = 20;// 存储一个数字(number)
var name = "修抗";// 存储一个字符串(string) 字符串应该用单引号或者双引号包裹起来
var flag = true;// 存储一个真(true) 假(false)
var nll = null;// 存储一个空(null)
// 声明多个变量依次赋值
var num1,num2,num3;
num1 = 10;
num2 = 20;
num3 = 30;
// 声明多个变量并赋值
var num1 = 10,num2 = 20,num3 = 30;
// 变量的交换(1)
var num1 = 10,num2 = 20;
var num3;//重新声明一个变量
num3 = num1;//num3 = num1 = 10
num1 = num2;//num1 = num2 = 20
num2 = num3;//num2 = num3 = 10
// 变量的交换(2)一般适用于数字的交换
var num4 = 10,num5 = 20;
num4 = num4 + num5;//10+20=30
num5 = num4 - num5;//30-20=10
num4 = num4 - num5;//30-10=20
// 变量的交换(3)
var num6 = 10,num7 = 20;
num6 = num6 ^ num7;
num7 = num6 ^ num7;
num6 = num6 ^ num7;
JS数据类型
/*
js中的原始数据类型：
    1.Number 数字类型
整数和小数
    2.String 字符串类型
值一般由单引号或者双引号括起来
    3.Boolean 布尔类型
值有两个：真true假false
    4.null 空类型
值有一个：null
    5.undefined 未定义
值有一个：undefined，声明一个变量，这个值为undefined，函数没有返回值，结果也是undefined，undefined与数字进行计算，结果为NaN
    6.Object 对象
*/
// 获取变量的数据类型
var xiu = "修抗";
console.log(typeof(xiu)); //string
进制介绍
// 八进制(数字前面加一个0代表八进制)
var num = 012;
// 十进制
var num2 = 10;
// 十六进制(数字前面加一个0x代表十六进制)
var num3 = 0xa;
/*二进制-->十进制
1----1----0----0----1----0----1----0----1(二进制)
256--128--64---32---16---8----4----2----1
256--128--0----0----16---0----4----0----1(十进制)
二进制：110010101 = 256+128+0+0+16+0+4+0+1 = 405：十进制
*/ 
/*二进制-->八进制
110----010----101(二进制)
6------2------5(八进制/每三位二进制为一组)
二进制：110010101 = 625：八进制
*/
/*二进制-->十六进制
1----1001----0101(二进制)
1----9-------5(十六进制/每四位二进制为一组)
二进制：110010101 = 195：十六进制
*/
/*十进制-->二进制
405-202-101-50--25--12--6---3---1
1---0---1---0---1---0---0---1---1(倒叙)
十进制：405 = 110010101：二进制
 */
Number类型
// 小数类型和整数类型都是数字类型(Number)
//数字的最大值和最小值
console.log(Number.MAX_VALUE);//最大值
console.log(Number.MIN_VALUE);//最小值
// Infinity 无穷大
// -Infinity 无穷小
// 小数的bug
console.log(0.1+0.2);//结果不是0.3而是0.30000000000000004
// 不要用NaN验证NaN
var xiu;
console.log(xiu+10);//返回NaN
console.log("你好" == "我好");//false：都是字符串，但是字符串内容不一样
console.log(xiu+10 == NaN);//false：都是NaN,但是里面的值不一样
// isNaN()判断是不是数字,如果是数字返回false
console.log(isNaN(NaN));
String类型
// 字符串可以使用单引号，也可以使用双引号
var str = "xiu ";
var str2 = 'kang';
// 查看字符串的长度
console.log(str.length);
// 字符串拼接，用+链接
// 如果两边只要有一边为字符串，那么+就为拼接
// 如果两边都是数字。那么就是算术功能
var str3 = "1";
var str4 = '2';
console.log(str3 + str4);//12
Boolean类型/Undefined类型/Null类型
// Boolean类型
// 布尔类型只有两个值 true(真) false(假)
var flag = true;
// Undefined
// 表示声明一个变量没有赋值，变量只有声明的时候值默认为undefined
var unde = undefined;
// null类型
// 表示一个空，变量的值如果为空，必须手动设置
var str = null;
类型转换
// 其他类型转为数字类型：三种方式
// parseInt();转整数
console.log(parseInt("8sa"));//8
console.log(parseInt("as8"));//NaN
console.log(parseInt("8.9"));//8
console.log(parseInt("8.2as"));//8
console.log(parseInt("sa6.8"));//NaN
// parseFloat();转小数
console.log(parseFloat("8sa"));//8
console.log(parseFloat("as8"));//NaN
console.log(parseFloat("8"));//8
console.log(parseFloat("8.9as"));//8.2
console.log(parseFloat("sa6.8"));//NaN
// Number();转数字
console.log(Number("8sa"));//NaN
console.log(Number("as8"));//NaN
console.log(Number("8"));//8
console.log(Number("8.9as"));//NaN
console.log(Number("sa6.8"));//NaN
// 其他类型转为字符串类型：两种方式
// toString;不能转换没有意义的变量：null、undefined
var xiu = 10;
console.log(xiu.toString());
// String();
var kang = 20;
console.log(String(kang));
// 其他类型转为布尔类型
// Boolean();
console.log(Boolean(0));//false
console.log(Boolean(""));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
运算符
// x+y
// x和y是操作数 +是操作符
// 算术运算符(+、-、*、/、%)
10%4;//10除于4的余数
// 一元运算符(++、--)
// 这个运算符只需要一个操作数就可以运算的表达式
// 前+ 后+ 前- 后-
var x = 2;
var y = 2;
console.log(x++ +3);//5,后+,先参与运算,运算结束后在+1
console.log(x);//3
console.log(++y +3);//6,前+,先+1,然后在参与运算
console.log(y);//3
// 二元运算符()
// 这个运算符需要两个个操作数就可以运算的表达式
// 三元运算符()
// 这个运算符需要三个操作数就可以运算的表达式
// var 变量 = 表达式1 ? 表达式2 : 表达式3
// 如果表达式1结果为true,就执行表达式2,然后把表达式2的结果给变量
// 如果表达式1结果为false,就执行表达式3,然后把表达式3的结果给变量
var sear = true ? 1 : 2;//sear=1
// 复合运算符(+=、-=、*=、/=、%=)
var num;
num+=10;//num=num+10;
// 关系运算符(<、>、<=、>=、!=、==、===、!=、!==)
var xiu = "10";
var kang = 10;
console.log(xiu==kang);//两个值都一样所以为true
console.log(xiu===kang);//值一样，但是类型不一样所有为false
// 逻辑运算符($$与-并且、 ||或-或者、 !非-取反、)
console.log(true && true);//两个为true则为true
console.log(true || false);//一个为true则为true
console.log(!false);//false为true，true为false
/*
运算符的优先级
1.() 优先级最高
2.一元运算符 ++ -- !
3.算术运算符 先* / 后 + -
4.关系运算符 < <= > >=
5.相等运算符 == != === !==
6.逻辑运算符 先&& 在||
7.赋值运算符 =
 */
流程控制
// 流程控制：代码的执行过程
// 流程控制的三种方式：
// 1.顺序结构
// 从上到下，从左往右执行的顺序叫顺序结构(不严谨)
// var xiu = 2;(不严谨的原因：先找到2,然后在将2赋值给xiu)
// 2.分支结构
// if语句
/*
if(表达式1) {
    代码块1
}else if(表达式2) {
    代码块2
}else {
    代码块3
}
先运行表达式1,如果表达式1为true就执行的代码块1,如果为false就执行表达式2
如果表达式2,如果表达式2为true就执行的代码块2,如果为false就执行代码块3
else if()可以多次出现,也可以不写
else 只能出现一次,也可以不写
*/
var x = prompt("请输入数字");//prompt()弹出一个输入框
if(x > 5){
    console.log("大于5");
}else if(x < 5) {
    console.log("小于5");
}else if(x == 5) {
    console.log("等于5");
}else {
    console.log("请输入数字");
}
// switch-case
/*
switch(表达式){
    case 值1: 代码块;break;    
    case 值2: 代码块;break;    
    case 值3: 代码块;break;    
    default:代码4;   
}
获取表达式的值,然后和值依次比较,如果和值相等执行相对应的代码块,遇到break跳出switch语句
如果和值都不相等，那么就执行default语句
表达式的值跟case的值比较是严格模式的比较(===)
default可以省略
break可以省略：省略后不会跳出语句 会依次往下执行
 */
var y = prompt("请输入1到3的整数");
switch(y){
    case "1":console.log(y);
    break;//该语句为跳出语句
    case "2":console.log(y);
    break;
    case "3":console.log(y);
    break;
    default:console.log("请输入1到3的整数");
}
// 三元表达式
// 3.循环结构
// while
/*
var 变量 = 0;
while(条件){
    循环体;
    计数器;
}
如果条件为false,就不执行while大括号里面的内容
如果条件为true,就执行循环体,然后执行计数器,循环结束后计数器+1,然后又去判断条件,直到条件为false停止循环
*/
var xiu = 0;//计数器
while(xiu<10){
    console.log(xiu);//循环体
    xiu++;//计数器+1
}
// do-while
/*
do {
    循环体
}while(条件);
先执行循环体,然后在判断条件是否成立,如果为true继续执行循环体,然后在判断条件,直到条件为false跳出循环
*/
var kang = 0;
do {
    console.log(kang);
    kang++;
}while(kang<0);
// for
/*
for(表达式1;表达式2;表达式3;){
    循环体;
}
先获取表达式1的值,然后判断表达式2,如果为false跳出循环,如果为true就执行循环体然后在执行表达式3,然后继续执行表达式2,直到条件为false
*/
for (var i = 1; i <= 10; i++) {
    console.log(i);
}
 
break与continue关键字
// break关键字
// 作用：在循环中使用，遇到break则跳出当前循环
while(true){
    console.log("修抗");
    break;//本来是一个死循环，但是遇到break就跳出循环，所有就执行一次
}
// continue关键字
// 作用：在循环中使用，遇到continue直接执行下次循环
// 输出10以内的奇数
var i = 0;
while(i<10){
    if(i%2==0){
        i++;
        continue;//如果为偶数就继续下次循环
    }
    document.write(i);
    i++;
}
数组
// 数组：存储一组有序的数据
// 作用：可以一次性存储多个数据
// 数组的定义：
/*
1.通过构造函数创建数组
var 数组名 = new Array();
var 数组名 = new Array(长度);
如果Array中只有一个值(整数)，那么这个值就是该数组的长度(元素就个数)
如果有多个值，那么这些值就是该数组的数据(数组的长度就是有多少个值)
 */
var array = new Array();//创建一个空数组，没有数据
var array2 = new Array("25");//如果数组中没有数据，但有长度，那么数组的每个值就是undefined
/*
2.通过字面量的方式创建数组
var array = [];
 */
var array3 = [];//创建空数组
var array4 = [3,34,46,7];//创建数组并添加数据
// 数组元素：就是数组中存储的数据
// 数组个数：就是数组中元素的个数
// 数组下标：从0开始，到数组长度减1结束
// 通过下标设置数组元素值：数组名[下标] = 值
// 通过下标访问数组元素值：数组名[下标]
// 获取数组的长度
array.length;
// 注意: 数组中的数据类型可以不一样，但一般存储一样的数据,数组的长度可以任意改变
var array5 = [10,"哈哈",true,undefined,null,new Object()];
// 遍历数组
var array6 = [2,5,72,58,3,52];
for(var i=0;i<array6.length;i++){
    console.log(array6[i]);
}
// 求数组的和
var array7 = [1,2,3,4,5];
var sum = 0;
for(var i=0;i<array7.length;i++){
    sum+=array7[i];
}
console.log(sum);
// 求数组的平均值
var array8 = [1,2,3,4,5];
var avg = 0;
for(var i=0;i<array8.length;i++){
    avg+=array8[i];
}
console.log(avg/array8.length);
// 求数组的最大值
var array9 = [1,2,3,4,5];
var max = array9[0];
for(var i=1;i<array9.length;i++){
    if(max<array9[i]){
        max=array9[i];
    }
}
console.log(max);
// 数组的倒叙
var array10 = [1,2,3,4,5];
for(var i=array10.length-1;i>=0;i--){
    console.log(array10[i]);
}
// 去掉数组中的0
var array11 = [1,0,3,0,5];
var newArray11 = [];
for(var i=0;i<array11.length;i++){
    if(array11[i] != 0){
        newArray11[newArray11.length] = array11[i];
    }
}
console.log(newArray11);
// 冒泡排序：把所有数据按照一定顺序进行排序(从大到小,从小到大)
 
 

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！