JavaScript基础语法知识（一）

JavaScript基础语法知识预习

一个跨平台的脚本语言

平台：就是运行环境，这里一般指操作系统。

跨平台：就是在各种环境下，都可以运行。

脚本语言特点：不能够独立运行，要依赖与网页

HTML网页的运行离不开浏览器 JS程序的运行离不开HTML网页

基础语法

script标签的使用

属性：

1. type = ‘text、javascript’ 声明当前标签内写的文本格式

   2. src = ‘demo.js’ 引入外部的.js文件

注意:可以有多个script标签，多个script标签是自上而下顺序执行

​ 一个script标签只能做一个事情

alert() 在当前页面上弹出一个警告框警告框中显示要显示的内容

输出方法

document.write（） 在当前页面上输出内容

​ 注意：如果内容中含有标签会自动解析

console.log（） 在控制台输出内容

转义字符：

​ &lt；代表< &gt； 代表>

常量与变量

常量

定义：值不可以改变的叫做常量

数据类型：

​ 基本数据类型：

​ 数字

​ 类型：number

​ 例子：100 -20

​ 布尔值

​ 类型：boolean

​ 例子：true false

​ 字符符串

​ 类型：所有带单引号或者双引号的都叫做字符串。（单引号/双引号效果一样，必须成对出现）

​ 例子：‘hello’ “world”

​ 特殊数据类型：

​ null 空 undefined NaN（not a number）

​ NaN的数据类型是数字类型也就是typeof(NaN)的结果为number

​ NaN不等于任何数，包括本身自己，NaN == NaN返回false

变量

定义：值可以修改的叫做变量

内存：

1、声明变量（必须声明后才能使用）

​ 关键字（系统征用有特殊功能的单词叫做关键字）： var 声明变量

2、初始化：声明变量的时候，直接给这个变量赋值叫做初始化。

3、如果声明变量的时候，没有给这个变量复制，系统默认赋值成undefined

变量命名和弱引用

标识符

定义：所有用户自定义的名字

变量名也是标识符

命名规则：

• 只有数字、字母、下划线个美元符号（$）组成
• 首字母不能是数字
• 不能以保留字和关键字命名
• 区分大小写
• 见名思义（尽量使用英文全称）
• 单词个数比较多的两个
  • 驼峰式命名 className
  • 下划线方式 class_name

变量：弱引用类型。赋值成什么类型就是什么类型

关键字 typeof

格式：typeof 常量/变量

功能：输出当前常量或者变量的数据类型

parseInt，parseFloat，Number的区别

三者都是强转为数字的函数，但是在具体的某些场景下，有区别 如果转的是布尔值、undefined、null以及纯整数的字符串，他们是相同的 如果转的带小数点的纯数字的字符串，parseInt的结果只有整数，parseFloat和Number是小数， 如果转的前面数字，后面有其他字符，parseInt和ParseFloat会转为数字，但是Number为NaN

答案解析: 三者都是强转为数字的函数，但是在具体的某些场景下，有区别 如果转的是布尔值、undefined、null以及纯整数的字符串，他们是相同的 如果转的带小数点的纯数字的字符串，parseInt的结果只有整数，parseFloat和Number是小数， 如果转的前面数字，后面有其他字符，parseInt和ParseFloat会转为数字，但是Number为NaN

进制转换

十进制转二进制

模二取余，固定流程

算数运算符

运算符

1、算数运算符

+、-、*、/ 、%（取余符号）

2、关系运算符

>	<	<=	>=	==	!=	===	!==

注意：值，绝对是布尔值

自动数据类型转化：

和其他运算符一样，当关系运算符操作非数值时要遵循一下规则：

• 两个操作数都是数值，则数值比较
• 两个操作数都是字符串，则比较两个字符串对应字符串的编码
• 两个操作数有一个是数值，则将另外一个转换成为数值，在进行数值比较

在相等和不相等的比较上，如果操作数是非数值，则遵循以下规则：

• 一个操作数是布尔值，则比较之前讲其转换为数值，false转成0，true转成1；
• 一个操作数数布尔值，则比较之前将其转换程为数值在比较；
• 一个操作数是NaN，则==返回 false，！=返回 true，并且NaN和自身不等；
• ===恒等，必须数字和数据类型都相等，否则返回false

3、逻辑运算符

&&（与运算）

格式： 表达式1 && 表达式2

规律：只有当两个表达式都true的时候，整个表达式才为真

短路操作：当表达式1为false的时候，表达式2就不执行了，就直接的出结果为false。

||（或运算）

格式： 表达式1 || 表达式2

规律：只有当两个表达式的值都为false的时候，整个表达式的值都为假

短路操作：当表达式1为true的时候，表达式2就不执行，直接的出结果为true。

！（非运算）

格式：！表达式

规律：先将表达式的值自动数据类型转换成为布尔值，然后在取反。

注意：非0即真 非空即正

规律：

• 操作数是一个空字符串，返回true；
• 操作数是一个非空字符串，返回true；
• 操作数是数值0，返回true；
• 操作数是任意非0数值（包括Infinity），false；
• 操作数NaN，返回true；
• 操作数是undefined，返回true；

4、一元运算符

++ –

++a 值：++后置，先取a的值作为a++表达式的值，然后在对a进行+1.

a++ 值：++前置，先对a进行+1操作，再a的值作为++a表达式的值。

功能：对原有的变量进行+1操作

例子：var a = 10;

​ alert(a++ + ++a + a + ++a + a++ +a);

​ alert(10 + 12 + 12 +13 + 13 +14);

---

a-- 值：–后置，先取a的值作为a–表达式的值，然后再对a进行-1。

–a 值：–前置，先对a进行-1操作，再a的值作为–a表达式的值。

功能：对原有的变量进行-1操作。

例子：var a = 10;

​ alert(a-- + --a + a + --a + a-- +a);

​ alert(10 + 12 + 12 +13 + 13 +14);

5、赋值运算符

​ <1>基本赋值运算符 =

​ 功能：将等号右边的值，赋值给等号左边的变量

​ <2>复合赋值运算符 += -= … x=

​ 表达式：任何数据和运算符组合成的式子叫做表达式。

---

注意：将不同数据类型进行算数运算

自动数据类型的转换：不同数据类型之间没有办法进行运算，将数据转成同一数据类型，在进行计算。

​ 1、其中有一个操作数必须是字符串，运算符必须是+号，别的数据类型转换成字符串，进行字符串拼接

​ 2、任何数据和字符串做假发以外的操作，那么字符串要先转程数字再去进行运算。

​ <1>如果字符串是一个纯数字字符组成的字符串，转成对应的数字

​ <2>如果字符串中含有除数字以外别的字符，转成NaN，NaN和任何数据运算都是NaN。

3、任何其他数据除了和字符串做相加操作，与数字类型做算数运算时，其他数据会自动的转换为数字。

算数运算符练习

练习：

<script>
        /*
            1、入职薪水为10K，每年涨幅入职薪水的5%，50年后的工资是多少？
        */
        var money = 10000;
        //money = money + money * 0.05 * 50;
        money += monry * 0.05 * 50；
        alert(money);
     /*
            2、为抵抗洪水，战士连续作战89小时，编程计算供多少天多少个小时？
        */
        var total = 89;
        var day = parseInt(total / 24);
        var hours = total % 24;
        alert("一共花了" +  day + "天" + hours + "小时");
 /*
            3、小明要到美国旅游，可是那里的温度是华氏度为单位记录的。
            它需要一个程序讲华氏温度（80度）转换成摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
            提示：摄氏度与华氏度的转换公式为：摄氏度=5/9.0*（华氏度-32）
        */
        var Fahrenheit = 80;
        var centigrade = (Fahrenheit - 32) * 5 / 9.0;
        alert("摄氏度：" + centigrade + "℃")
      /*
        4、给定一个三位数，分别把这个数字的首位、十位、个位显示出来
        123
        */
        var num = 123;
        var a = num % 10;
        var b = parseInt(num / 10) % 10;
        var c = parseInt(num / 100);
        
        alert("百位是：" + c  + "十位是：" + b  + "个位是：" + a);

 </script>

强制数据类型转换

Boolean() 将其他数据类型强制转换为布尔值

​ 非0即真 非空即真

Number() 将其他的数据类型强制转换成数字

注意：只有纯数字字符组成的字符串数字，才能专为数字，其他都为NAN

parseInt()

1、取整

2、将别的进制转换成十进制 必须传入字符串

var star = '110100';
alert(parseInt(star, 2))

parseFloat() 取浮点数

流程控制语句

顺序结构

代码自上而下顺序执行

分支结构/选择结构/条件结构

单分支语句：

语法： if(判断的条件){
		执行语句;（判断条件为true的时候执行）
}

例题：判断一个数是偶数还是奇数

var num = 8;
if(num % 2 == 0){
   	alert("这个数是偶数");
   }

要根据不同的条件，执行不同的操作

双分支语句：

语法： if(判断的条件){                   
    	执行语句;（判断条件为true的时候执行）
      }
	  else{
          执行语句;（判断条件为false的时候执行）
      }

例题：判断一个数是偶数还是奇数

var num = 8;
if(num % 2 == 0){
   	alert("这个数是偶数");
   }
else{
    alert("这个数是奇数");
}

步骤：

1、确定判断条件是什么

2、根据结果的不同，编写相应的执行语句

注意：if()里面可以写任何的表达式，都会自动数据类型转换成布尔值。

例题：求两个数的最大值

var num1 = 10,num2 = 20;
    if(num1 > num2){
        alert("最大数是num1：" + num1);
    }
    else{
        alert("最大数是num2:" + num2);
    }

例题：判断一个年份是闰年还是平年；

注意：能被4整除且不能被100整出，或者能被400整出；

var year = 2014;
    if(year % 4 == 0 &&　year % 100 !=0 || year % 400 == 0){
        alert("这是一个闰年：" + year);
    }
    else{
        alert("这是一个平年:" + year);
    }

多分支语句：

语法：
if(判断条件1){
    	执行语句1；
}else if(判读条件2){
    	执行语句2；
}
...
else{
    	执行语句;(上述所有条件都不成立，执行这里)
}

例题：计算y值并输出

var y = 0;
    var x = 10;

    //判断x区间
    if(x < 1){
        y = x;
    }else if(x>=1 && x < 10){
        y = 2 * x + 1;
    }else{
        y = 5 * x - 17;
    }
    alert("当x的值是："+ x + ", y的值是：" + y);

例题：成绩判定

 var score = 90;
    if (score > 85){
        alert("优秀");
    }else if(score = 75 && score <= 85){
        alert("良好");
    }else if (score >= 60 && score < 75){
        alert("及格");
    }else{
        alert("不及格");
    }

重复去做一件事

选择结构

switch语句

 switch(表达式){
     case 常量1:语句；break；
     case 常量2:语句；break；
     case 常量3:语句；break；
     ...
     case 常量1:语句；break；
     default:语句；break；         
 }

注意：表达式的结果等于哪个case的常量，则执行其后的语句，执行完break就跳出switch结构，都不满足则执行default语句：

break的作用：是跳出switch结构，如果没有break，则继续执行下面的分支的语句（而不进行判断）

注意：

1、注意switch的应用场景

2、注意case穿透。要加break语句。

3、每一个switch语句都需要加default语句。

例题：根据成绩等级，返回分数的范围

var garde = "B"
        switch(garde){
            case "A":
                alert("80~100");
                break;
            case "B":
                alert("70~79");
                break;
            case "C":
                alert("60~69");
                break;
            case "D":
                alert("<60");
                break;
            default:
                alert("error");
                break;
        }

三目运算符

格式： 表达式1 ？ 表达式2 ： 表达式3；

执行：

​ 1、先去判断表达式1是否为真

​ 2、表达式1为真，直接去执行表达式2

​ 3、表达式1为假，直接执行表达式3

【注】本质是双分支语句。

省略break简化代码

例：输入月份，显示当天的天数

​ 要求：1）利用case穿透简化代码

 var month = 4;
        switch(month){
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                alert("31天");
                break;
            case 2:
                if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                    alert("29天");
                }else{
                    alert("28天");
                }
                break;    
            default:
                alert("30天");
                break;
        }

循环语句

while循环

格式：
while（循环条件）{	
		   循环语句；
}
//执行：如果循环条件成立就执行循环语句，直到循环条件不成立为止

例题：输出10句Hello world

 var i = 0;
        while(i<10){
            document.write("hello world");
            i++;
        }

练习题：1~100的累加和

var i = 1;
        var sum = 0;
        while(i <= 100){
            sum += 1;
            i++;
        }
        alert("1~100的和为：" + sum)

练习题：打印输出1000~2000年中所有的闰年，并且以每行四个数输出。

        var i = 1000;
        var count = 0; //计算闰年的个数
        while(i<=2000){
            //判断是否是闰年
            if((i % 4 == 0 && i % 100 != 0) || i % 400 == 0){
                document.write(i + "&nbsp;");
                count++;
                if (count % 4 == 0){
                    document.write("<br/>")
                }
            }
            i++;
        }

do_while和for循环_break和continue

do_while

语法：

do{
	循环语句；
}while(循环条件)

【注】do…while循环后面的分号不要省略。

例题:1~100的和

var i = 1;
        var sum = 0;
        do{
            sum += 1;
            i++;
        } while(i <= 100);
        alert(sum)

while循环和do…while循环的区别：

1、while循环，先判断循环条件

2、do_while循环，先运行一次循环语句，在去判断循环条件。

for循环

格式：

for（表达式1;表达式2;表达式3）{
	执行语句；
}

例题：1~100的和

var sum = 0;
for(var = 1; i <= 100; i++){
    sum += 1;
}
alert(sum);

break和continue关键字

break：终止当前循环

continue：跳过本次循环，执行下次循环。

循环嵌套

练习：打印输出九九乘法表

for(var i = 1; i <= 9; i++){
            for(var j = 1; j <= i; j++){
                document.write(j + "*" + i + "=" + (i * j) + "&nbsp");
            }
            document.write("<br/>")
        }

练习：山上有一口缸可以装50升水，现在有15升水，老和尚和小和尚下山挑水，每次可以挑5升，问：小和尚要挑几次可以把水缸挑满？

var water = 15;
        var count = 0;
        while(water < 50){
            count++;
            water += 5;
        }
        alert("一共挑了" + count + "次水");

练习：判断一个数是不是合数（自然数中能被1和其本身整除，还能被其他数整除的数（不包括0））。

            var num = 7;
            var isYes= false;
            for(var i = 2; i < num; i++){
                if(num % i == 0){
                    isYes = true;
                    break;
                }
            }
            if(isYes){
                alert("该数是合数");
            }else{
                alert("该数是质数");
            }

扩展练习：找出所有的水仙花数，三位数，各位立方和等于该数本省。例如：153=1³⁺⁵3+3^3

  //Math.pow(x,y); //求x的y次方
            var num = 100;
            for(num; num < 1000; num++){
                a = num % 10;  //个位
                b = (num % 10) % 10; //十位
                c = parseInt( num / 100);//百位
                var sum = Math.pow(a,3)+Math.pow(b,3)+Math.pow(c,3)
                if( sum == num){
                    alert(num);
                }
            }

练习:输入两个数n，a，如果n3，a2；输出2+22+222的值

如果n4，a3；输出3+33+333+3333的值。

 var n = 3;
                var a = 2;
                var tmp = a;
                var sum = 0;
                for(var i = 0; i < n ;i++){
                    sum += tmp;
                    tmp = tmp * 10 + a;
                }
                alert(sum)

练习：五位数中，对称的数称为回文数，找出所有的回文数。如12321

var count = 0;      
for(var i = 10000; i < 100000; i++){
    var a = i % 10;  //个位
    var b = parseInt(i / 10) % 10;  // 十位
    var c = parseInt(i / 1000) % 10;  //千位
    var d = parseInt(i / 10000);   //万位
    if(a==d && b===c){
       count += 1;
       document.write(i + "&nbsp")
       if(count % 6 == 0){
          document.write("<br/>")
          }
      }
 }

练习：输入年、月、日，极端某一日天是该年的第几天（周）

var year = 2008;
        var month = 8;
        var date = 8;
        var sum = 0;//记录总天数
        switch(month){
            case 12:
                sum += 30;
            case 11:
                sum += 31;
            case 10:
                sum += 30;
            case 9:
                sum += 31;
            case 8:
                sum += 31;
            case 7:
                sum += 30;
            case 6:
                sum += 31;
            case 5:
                sum += 30;
            case 4:
                sum += 31;
            case 3:
                sum += 28;
                if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                    sum += 1;
                }
            case 2:
                sum += 31;
            case 1:
                sum += date;
                break;
            default:
                alert("error");
                break;
        }
        alert("这是第" + sum + "天");
        var week = parseInt(sum / 7) + 1;
        alert("这是第" + week + "周");