javaScript介绍
- javaScript是1995年产生的，也是脚本语言
*JavaScript是弱类型脚本语言- 同一个变量可以改变不同的数据类型，比如变量y一开始为数值类型，可以更改为字符串类型
- 相反强类型语言的变量是不可以变的，比如：java，c后台语言
- y = 3 + 2 = 5;
- 在数学中y代表的是未知数
- JavaScript中这个y就是代表一个变量，等号叫赋值运算符。
- y=5；
- y=“文字”；
- 像上面的“文字”用双引号括起来的东西叫做字符串。
*javaScript是由三个部分构成
- ECMAScript：描述了JavaScript的核心语法。
- DOM（document object model）即文档对象模型，用来操作html文档。
- BOM（browser object model）即浏览器对象模型，用来操作浏览器。
- 怎么将JavaScript应用到网页中
- 1、通过script标签插入到网页中，在script标签中写入JavaScript代码
- 可以插入head标签中或者body结束标签前面，建议把script标签插入到>body标签前面。
- 2、把JavaScript代码直接插入到标签中。
- 3、通过script标签的src属性引入外部js脚本
*javascript的核心语法- 1,、变量的声明
- 通过关键字var来声明变量，语法
- var 变量名 = 值；
- 在javascript中分号代表着一句话的结束，是可选的，建议写上去。
- 变量的命名规则
- 1、第一个字符必须是字母、下划线（_）或者美元($)；
- 2、变量名中间不能使用空格或者其他特殊符号（下划线和美元符除.外）；
- 3、变量名区分大小写。
- 4、不能使用关键字或者保留字。
怎么在网页中查看声明变量的值？ /
*1、alert();弹窗- 2、document.write()；写入网页中
- 3、console.log()；将内容打印在浏览器控制台上
内容
点击我弹出一个提示语
JavaScript的数据类型
*JavaScript的数据类型（2种）
- 原始类型和引用类型他们的储存方式不一样，原始类型的是储存在栈里面的，
- 引用类型是储存在堆里面的。
- 1、简单数据类型(原始类型)
- a、字符串(string)
- 用引号括起来的就是字符串，包括单双引号。
- 注意：双引号不能嵌套双引号，单引号也不可以嵌套单引号，但是可以交叉嵌套。
- b、数值类型(Number)
- var num = 123;
- var num = 12.34;
- 也可以用其他进制表示，比如16进制等
- 有三个特殊值
- +Infinity,正无穷大
- -Infinity,负无穷大
- NaN：表示不是一个数值，但是他的类型是数值类型。
- isNaN（）方法用于检查其参数的数值类型是否为非数值类型。
- c、布尔值(boolean)
- 只有两个值：true(真)，false(假)
- d、undefiend,表示变量未赋值的默认值,也可以代表空。
- D、null，空，表示对空对象的引用。
- 通常可以用null来清空数据。
- 2、复杂数据类型(引用类型)
- a、对象(object)，是属性和方法的集合。
- 判断数据类型，可以通过typeof()方法来得到。
点击我改变颜色
*数据类型：
* 简单数据类型
- 1、字符串（string）
- 2、数值（number）
- 3、布尔值（Boolean）
- 4、undefined
- 在定义变量后未赋值的时候，JavaScript会自动给变量赋值为undefined
- 5.null
- JavaScript有垃圾自动回收机制，在变量不需要使用的时候，系统会自动把此变量赋值为null（即清空改变量）
* 复杂数据类型
- 1、对象（object）属性和方法的集合。
- 语法：键值对写法，即："键名"："键值"。
- 我们可以通过.（点来操作符）来访问对象上的属性或者方法
- 怎么来调用对象里面的方法
- 通过对象的方法名后面加个小括号来执行这个方法。
- return用来定义函数的返回值。
- 2、数组（array），也是数据的集合
- 数组的下标是从0开始也就是序列号，数组长度(length)的计算是从1开始计算的。
- 怎么获取数组里面的数据？
//获取数组长度
console.log(arr.length);
var str = "123";
//字符串也能获取其字符长度
console.log(str.length,str[1]);- 可以通过数组名加中括号，括号里面填下标值。
- 3、function(函数)，具有一定功能的代码块。
- 语法：通过关键字function来定义，如下：
- 函数名和参数是可选的。
function 函数名(参数)
{
书写功能代码区域
}
- return用来定义函数的返回值，以及结束函数的执行。
//定义了一个函数，就相当于生产了一台机器。
function myFun(){
// alter弹窗会阻止js代码的运行
alert("hello world!");
return "你好";
}
//执行函数,相当于按下机器的运作开关。
console.log(myFun());
/*- 匿名函数
- 不能直接定义匿名函数，需要有事件触发的时候才可以，或者是赋值给一个变量。
- 匿名函数只能在函数定义的后面进行调用。
- 具名函数无论在哪里都可以调用。
// fun();调用会报错
var fun = function(){
console.log("我是一个匿名函数");
}
fun();- 函数的参数
- 可以又多个，参数之间用逗号隔开
- 定义函数时写的参数我们称为形参
- 当我们要调用的函数时传入的参数称为实参
function testFun(username,age,sex){//形参
return "你好，我是"+username+"，今年"+age+"岁，性别"+sex+"";
}
console.log(testFun("小白",10,"男"));//实参
var uName = "刘";
document.write(testFun(uName,10,"男"));
var obj ={
"name" :"小芳",//前面的是键名//键值
"age":"18",
"skill":function(){//方法
console.log("做菜");
// return "我是一个方法"
return "obj" //return返回
}
}
console.log(obj.age,obj.name);
console.log(obj.skill);//访问skill方法
console.log(obj.skill());//执行skill方法
数据类型的转换
1、toString()，将其他类型(包括字符串，布尔值，数值)的数据转换为字符串
当转换数值时tostring方法可以传入一个参数，这个参数代表你想转换的进制数。
2、toFiexd(),将数值类型的数据转换为字符串
接收一个参数，当不填写的时候默认为零；参数代表数值所要保留的小数点位数，遵循我们的四舍五入。
3、parseInt(),字符串类型转换为数值类型的整数
从左到右检测字符串的字符，如果第一个字符为非数字的类型，则终止检测，返回NaN
如果是数字则继续检测继续往下面检测直到遇到非数字为止然后返回前面检测到的数字。
如果需要将为其他进制的数字转换为十进制，需要通过第二个参数来声明其进制数。
比如：var x = "a";=>console.log(parseInt(x,16));//10
4、parsefloat(),将其他类型的数距转换为浮点数值类型
当小数点后面的值为0时，会忽略掉为0
用法和parseInt相同，但是parsefloat是没有第二个参数
var num =123;
var str = num.toString();
console.log(str,typeof(str));//123 string
var bool = true;
console.log(typeof (bool.toString()));//string
// var und = undefined;
// console.log(typeof(und.toString()));//报错，undefined是没有tostring方法的
//null没有tostring方法
// var n = null;
// console.log(typeof(n.toString())); 报错，
var num1 = 10;
var num2 = num1.toString(2);
console.log(num2);
var num3 = 10.5;
console.log(num3.toString());
var num4 = 2e2;//相当于2*10^2 e代表的是10
console.log(num4,num4.toString());//200,"200"字符串的两百，最后一个。
var str = 123.45;
var num = str.toFixed();
console.log(num,typeof(num));//string
var num = 12.56;
console.log(num.toFixed(1));//12.6
var str = "123";
console.log(typeof parseInt(str));
var str1 ="123.45";
console.log(parseInt(str1),typeof(parseInt(str1)));
var str = "string";
console.log(parseInt(str));//NaN
var str = "true";
console.log(parseInt(str));//NaN
var bool = "true";
console.log(parseInt(bool));//NaN
var str = "";
console.log(parseInt(str));//NaN
var str = "123string";
console.log(parseInt(str));//123
var str = "a12b";
console.log(parseInt(str));//NaN
var num = "a";
console.log(parseInt(num,16));//10
var num = "012";
console.log(parseInt(num,8));//10
console.log(parseInt(num));//12
var num = "12.0";
console.log(parseFloat(num));//12
var num = "12.1";
console.log(parseFloat(num));//12.1
var num = "12.3.5";
console.log(parseFloat(num));//12.3
强制类型转换
1、Boolean()，强制转换为布尔值
非空字符串转换为布尔值都为true，空字符串为false，
非零的数值转换为布尔值都为true，零就转换为false
undefiend/null都转换为false
var str = "string";
console.log(Boolean(str));//true
var str = "123";
console.log(Boolean(str));//true
var str = " ";
console.log(Boolean(str));//true
var str = "";
console.log(Boolean(str));//false
var num = 23;
console.log(Boolean(num));//true
var num = 0;
console.log(Boolean(num));//false
var num = -12;
console.log(Boolean(num));//true
console.log(Boolean(undefined));//false
console.log(Boolean(null));//false
2、Number(),强制转换为数字类型
布尔值true //转换为1
false，null，"" // 转换为0
undefined //转换为NaN
```
console.log(Number(str));//NaN
var str = "12.35";
console.log(Number(str));//12.35
var str = "12.3.5";
console.log(Number(str));//NaN
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(undefined));//NaN
console.log(Number(null));//0
var str = "";
console.log(Number(str));//0
3、String()，强制转换为字符串
```
console.log(typeof(String(undefined)));//string
console.log(String(undefined));//"undefined"
console.log(String(null));//"null"
var str = "123";
var num = 123;
var total = num + parseInt(str);
console.log(total);
```
1、算术运算符
*+ 、 - 、 * 、 / 、% 、 ++ 、--
+加号运算符：
1、如果加号左右两边都为数值类型，则进行加法运算
2、如果加号左右两边其中一个为字符串类型数据，则进行字符串拼接。
3、如果在字符串前面添加一个加号，会隐式的将字符串转换为数值类型。
var num1 = 23;
var num2 = 27;
console.log(num1 + num2);//50
var num3 = "10";
console.log(+num3 + num2);//37
var num4 = "20";
console.log(+num3 + (+num4));//30
var num1 = 0.1;
var num2 = 0.2;
console.log(num1 + num2);//0.30000000000000004
console.log((num1 + num2).toFixed(1));//0.3
减法运算符(-)
1、可以进行减法运算
2、在字符串前面加个（-）,可以将该字符串转换为数值类型，注意转换后的值为原来值的相反数。
即：-"12"转换为-12
var num1 = 12;
var num2 = 10;
console.log(num1 - num2);//2
var num3 = "23";
console.log(num3 -num1);//11
var num4 = "25";
console.log(num4 - num3);//2
console.log(typeof(-num4),-num4);//number -25
console.log(-num4 + num2);//-15
console.log(num1 - true);//11
console.log(num2 - null);//10
console.log(num1 -" ");//12
乘法运算符(*)
var num1 = 2;
var num2 = 3;
console.log(num1 * num2);//6
var num3 = "10";
console.log(num3 * num1);//20
var num4 = "8";
console.log(num3 * num4);//80
除法运算（/）
JavaScript中分母可以为0，且分母为0时得到的结果是无穷大(Infinity)
var num = 10;
var num1 = 5;
console.log(num / num1);//2
var num2 = 0;
console.log(num2 /num1);//0
console.log(num1 / num2);//Infinity是无穷大
var num3 = "2";
console.log(num / num3);//5
求余(%)
var num1 = 10;
var num2 = 2;
console.log(num1%num2);//0
var num3 = 3;
console.log(num1%num3)//1
var num4 = 0;
console.log(num1%num4);//NaN
前增量/后增量(++i/i++)；
自增1
后增量的优先级是比较低的，基本上和其他的运算一起运算的时候，后增量是最后进行计算的。
前增量和后增量是相反的，他的优先级比较高的，和其他运算符一起运算的时候，前增量基本是最先计算的。
var i = 10;
// i++; console.log(i++);//10 // console.log(++i);//11 console.log(i);//11 var a = i++; console.log(a);//11
前减量/后减量(--i / i--)
自减1
var i = 10;
i--; //i = i-1 = 10-1=9
console.log(--i);//8
console.log(i);//8
比较运算符
、<、>=、<=、！=(不等于)、！==(完全不等于)、==(等于)、===(完全等于)
两个等号表示判断两个值是否相等，只比较数值大小
三个等号表示判断两个值是否完全相等，既要比较大小，也要比较类型。
浮点数进行计算时，存在不准确性。
var num1 = 0.1;
var num2 = 0.2;
var num3 = 0.3;
console.log(num3 == num1+num2);//false
完全不等于。不仅要比较转换后的值，还要比较转换前的数据类型。
console.log(2 !== "2")//true
！=表示不等于，值比较数值
console.log(2 != "2")//false
var obj = {
"name":"123"
}
var obj2 = {
"name":"123"
}
var obj3 = obj2;
console.log(obj == obj2);//false
//当两个操作数都指向同一个命名空间的时候，返回一个true
console.log(obj2 == obj3);//true
//只要操作的数值有一个为NaN,则返回false
console.log(NaN == NaN);//false
console.log(0 == -0);//true
如果比较的数据都为字符串的话，会进行字符串比较。
字符串比较是根据Unicode来比较的，从左到右一个字符对应一个字符来进行比较，如果第一个字符已经比较出结果，就只能返回结果，不需要再往下比较，以此类推。
console.log("23" > "5");//false
大写字母小于小写字母
console.log("A" > "a");//false
赋值运算符
= += -= *= /= %=
var num = 10;
num += 1;//=>num=num+1
console.log(num);//11
num += 10;//=>num = num +10;
console.log(num);//21
var num1 = 20;
var num2 = 30;
num1 += num2; //=>num1=num1+num2
console.log(num1);//50
num -=5;//=>num=num - 5;
console.log(num)//16
var num3 = 20;
num3 *= 2;//=>num3=num3 * 2;
console.log(num3);//40
num3=num3 / 2;
num3 /= 2;
console.log(num3)//20
var num4 = 5;
num4 %= 2;//=>num4=mun4 % 2;
console.log(num4);//1
转义字符
"" =>双引号
'' =>单引号
\n =>换行符
\b =>退格符
\ =>反斜杠
document.write("今天天气很\"好\"");
逻辑操作符
&&(与)、||(或)、！(非)
逻辑与(&&)
只有两个条件同时满足的时候才会返回true,两个条件都是假的返回的结果是false
即：一假即假
当逻辑语操作不是布尔值的时候，返回值就不一定是布尔值，
可分为以下几种情况
1、当第一个操作数据是对象时，返回第二个操作数据的值。
2、当第二个操作数据为对象时，如果第一个操作数据的值为true，则返回对象的值，如果为false，则返回false。
3、当两个操作数据都是为对象时，会返回第二个操作数据的值。
4、如果操作数据有一个为空(null)，则最终结果为null。
5、如果操作数据有一个为(NaN)，则最终结果为NaN。
6、如果操作数据有一个为(undefined)，则最终结果为undefined。
var bool = true;
var bool1 = false;
console.log(bool && bool1);//false
if(bool && bool1){
console.log("我要去打水");
}
逻辑或(||)
只要当两个条件有一个满足，就会返回true，两个条件都是假的返回的结果是false
即一真即真
当逻辑或操作不是布尔值的时候，返回值就不一定是布尔值，
可分为以下几种情况
1、当第一个操作数据是对象时，返回第一个操作数据的值。
2、当第二个操作数为对象时，则第一个操作数为true，返回true；为假的时候返回第二个操作数。
3、、当两个操作数据都是为对象时，会返回第一个操作数据的值。
逻辑非(!)
就是取反，即true取反false或false取反true，就是真变假，假变真
!bool
可以通过！！把其他类型的值转换为布尔值。
比如：
var str = "null";
console.log(!!str);//true
var bool2 = false;
console.log( bool1 || bool2);//false
console.log(bool || bool1);//true
console.log(!bool);//false
console.log(bool1 && bool2);//false
var obj = new Object();
var str = "123";
console.log(obj && bool2);//false
console.log(obj && str);//123
console.log(bool1 && obj);//false
console.log(bool && obj);//{}
var str = bool && obj;
var obj1 = {
"name":"test"
}
console.log(obj && obj1);
var str = null;
console.log(str && bool);//null
var str1 = NaN;
console.log(str1 && bool1);//NaN
var str2 = undefined;
console.log(str2 && bool);//undefined
console.log(str1 && str2);//NaN
console.log(obj || bool);//{}
var str = "null";
console.log(Boolean(str));//true
console.log(!str);//false
console.log(!!str);//true
条件语句
1、if(条件判断语句){
语句一
}
如果条件语句成立，则执行语句一。
2、if(条件语句){
语句一
}else{
语句二
}
如果条件语句成立，则执行语句一，否则执行语句二。
3、if(条件语句){
语句一
}else if(条件语句二){
语句二
}else{
语句三
}
如果条件语句一成立则执行语句一，然后结束判断，如果不成立继续判断条件语句二，如果成立，则执行语句二，否则执行语句三。
4、switch语法
语法：
switch(参数){
case 匹配参数一:
执行语句一
break；
case 匹配参数二：
执行语句二
break；
case 匹配参数三：
执行语句三
break；
default：
默认执行语句
var price = 15;
if(price <= 15-3){
console.log("我们去美餐乐吃饭吧！");
}else{
console.log("我们去吃黄焖鸡！");
}
在JavaScript中判断语句不能连写：
例如：错误写法：
100>=grade>=90
正确写法：grade<=100 && grade>=90
var grade = 98;
if(grade>=90 && grade<=100){
console.log("优秀");
}else if(grade>=75){
console.log("良好！");
}else if(grade>=60){
console.log("你的成绩及格！");
}else{
console.log("不及格！")
}
判断闰年的条件
能被400整除
能被4整除且不能被100整除
var year = 2000;
var name = "闰年";
var name1 = "平年";
console.log(year%400 == 0 || (year%4 == 0 && year%100!=0)?name:name1);
if(year%400 == 0 || (year%4 == 0 && year%100!=0)){
console.log(""+year+"是闰年");
}else{
console.log(""+year+"是平年");
}
var name = "苍老师";
switch(name){
case "苍老师":
console.log("啊啊啊啊");
break;
case "波多野结衣":
console.log("噢噢噢噢");
break;
case "陈老师":
console.log("skyblue");
break;
default:
onsole.log("咿呀咿呀");
}
if(name == "苍老师"){
console.log("啊啊啊啊");
}else if(name == "波多野结衣"){
console.log("噢噢噢噢");
}else if(name == "武藤兰"){
console.log("skyblue");
}else{
console.log("咿呀咿呀")
}
条件运算符(三元运算符)
语法：
条件语句？语句一：语句二
即：如果条件语句成立则执行语句一，否则执行语句二。
var num1 = 10;
var num2 = 20;
var num3 =30;
console.log(num1>num2?num1:num3>num2?num3:num1);//30
var num3 = num1>num2?num1:num2;
console.log(num3);//20
var year = 2000;
var name = "闰年";
var name1 = "平年";
console.log( year%400 == 0 || (year%4==0 && year%100!=0)?name:name1);
位运算符
位运算是根据二进制来进行计算的(二进制逢二进一)。
1、左移(<<)
十进制的4用二进制来表示
console.log(parseInt(100,2));//4
000000000000000000000000000000 1 0 0
2^2*1 + 2^1*0 + 2^0*0
var num1 = 4;
var num2 = num1<<2;
num1:000000000000000000000000000000100
num2:000000000000000000000000000010000
console.log(num2);//16=>num1 * 2^2=16
var num1 = 3;
var num2 = num1 <<2;
console.log(num2);//12=>num1 22=12
var num1 = 4;
var num2 = num1<<1;
console.log(num2);//8=>4*2
var num1 = 3;
var num2 = num1 <<1;
console.log(num2);//6=>3*2
循环语句
1、while
语法：while(条件语句){
语句一
}
档条件成立的时候循坏语句一，直到不成立为止。
var num = 5;
var i = 6;
while(i先执行一次语句一，然后再进行判断，条件成立才继续循环执行语句一，直到条件不成立为止。
注意：无论条件成立与否，语句一都会至少执行一次。
do{
i++
console.log(i)
}while (ifor循环
语法：
for(语句一；语句二；语句三){
需要循环执行的内容
}
1、语句一：初始化条件判断的初始值
2、语句二：条件判断语句
3、语句三：初始值的自增量
循环过程，先进行条件判断，为true的时候，进入循坏体，执行我们定义的代码，然后进行自增，
自增之后又进入条件判断语句，为true的时候，进入循坏体，然后执行我们定义的代码，然后进入自增，
自增之后再次进入判断语句如此往返循坏，直到条件判断为false的时候，跳出循坏。
for(var i = 0; i < 5; i++) {
console.log("test");
}
var i = 0;
for(; i < 5;) {
i++;
console.log("test");
}
for(var i = 1; i <= 5; i++) {
console.log(i);
}
for(var j = 1; j <= 10; j++) {
if(j % 2 == 0) {
console.log(j);
}
}
/*
*j++>=j=j+1
* j+=>=j=j+2
*
* */
for(var j = 2; j <= 10; j += 2) {
console.log(j);
}
for(var i = 1; i <= 10; i += 2) {
console.log(i);
}
//计算5的阶乘：5！=5*4*3*2*1
var num = 1;
for(var i = 1; i <= 5; i++) {
num *= i;
}
console.log(num);
var result = 1;
for(var i = 1; i <= 5; i++) {
document.write("result" + "=" + result + "*" + i);
result = result * i;
document.write("
")
}
console.log(result);
var num = 0;
for(var i = 1; i <= 10; i++) {
num += i;
}
console.log(num);
break,是用于switch语句和循坏里面的，用于终止语句。
continue用于循环语句，用来跳过循环中的某一次次循环（一个迭代）。
var name = "123";
switch(name){
case "123":
console.log("123");
break;
case "678":
console.log("678");
break;
default:
console.log("456");
}
for(var i=0;i<5;i++){
if(i==2){
break;
}
console.log(i);
}
for (var i=0;i<5;i++) {
if(i==2){
continue;
}
console.log(i);
}
多层循环
for(var i = 0; i < 3; i++) {
console.log("我在外面");
for(var j = 0; j < 5; j++) {
console.log("我在里面");
}
}
for(var i = 0; i < 4; i++) {
for(var j = 0; j < 6; j++) {
document.write("*");
}
document.write("
");
}
//方法一
for(var i = 0; i < 5; i++) {
for(var j = 0; j <= 5; j++) {
if(j <= i) {
document.write("*");
}
}
document.write("
");
}
//方法二
for(var i = 0; i < 5; i++) {
for(var j = 0; j <= i; j++) {
document.write("*");
}
document.write("
");
}
for(var i = 1; i < 6; i++) {
for(var j = 1; j < 6; j++) {
if(j > (5 - i)) {
document.write("*");
} else {
document.write("*");
}
}
document.write("
");
}
// 6 6 6 6
// i 1 2 3 4 5
// j 5 4.6 3.7 2.8 9
// 4 4 4
// j=6-i||j=4+i
for(var i = 1; i <= 5; i++) {
document.write(i);
for(var j = 1; j <= 9; j++) {
if(j == (6 - i) || j == (4 + i) || i == 5) {
document.write("*");
} else {
document.write("*");
}
}
document.write("
");
}
//
// 1000 1010 1020.1 1030.301
// 10 10.1 10.201 10.30301
/*
*本息和=本金+本金*利息
*
* */
var result = 1000;
for(var i = 0; i < 30; i++) {
result = result + result * 0.01
}
console.log(result);
var mony = 1000;
for(var i = 1; i <= 30; i++) {
mony += (mony * 0.01)
}
console.log(mony);
var rmb = 1010;
for(var i = 1; i <= 22; i++) {
rmb += (rmb * 0.01);
}
console.log(rmb);
for (var i=1;i<=9;i++) {
for (var j=1;j<=9;j++) {
if(j<=i){
document.write(i+"*"+j+"="+i*j );
}
}
document.write("
");
}
for (var i=1;i<=9;i++){
for (var j=1;j<=9;j++) {
if(j>(9-i)){
document.write(i+"*"+j+"="+i*j);
}else{
document.write("*")
}
}
document.write("
");
}
var sum = 0;
var x = 2;
var y = 1;
for(var i= 0;i<20;i++){
var div = x/y;
var t = x;
x = x+y;
y = t;
sum+=div;
}
console.log(sum);
for...in循环
var arr=[1,2,3,4,5];
for(item in arr){
console.log(item,arr[item]);
}
for (var i=0;i