JavaScript的核心语法

变量

理解

在程序执行过程中可以发生改变的量

语法

var 变量名  = 值;

注意

var表示变量的关键字

关键字是JS给我们定义好的具有特殊意义的单词

变量根据不同的值，有对应的数据类型

<script type="text/javascript">
        var v = 10;//声明一个变量，把10赋值给该变量
        console.log(v);//打印变量里的值    
</script>

JS数据类型

分类

number - 数值型 string - 字符串类型 boolean - 布尔类型 undefined - 未定义类型 null - 空类型

<script type="text/javascript">
​
            //number - 数值类型
            //注意：number类型不分整数和小数
            var num = 123;
            console.log(num);
            num = 123.123;
            console.log(num);
            
            //string - 字符串类型
            //注意：字符串的值使用单引号或双引号括起来
            var str = 'abc';
            console.log(str);
            str = "abcdef";
            console.log(str);
            
            //boolean - 布尔类型
            //注意： true - 对的/真的， false - 错的/假的
            var bool = true;
            console.log(bool);
            bool = false;
            console.log(bool);
            
            //undefined - 未定义类型
            var v1;
            console.log(v1);
            v1 = undefined;
            console.log(v1);
            
            //null - 空类型
            var n1 = null;
            console.log(n1);
</script>

深入数据类型

<script type="text/javascript">
            
            //深入number类型
            //注意：Infinity表示无穷大
            console.log(Infinity + (-Infinity));//NaN - not a number
            
            //深入string类型
            //注意：字符串+号为拼接符，其余符号为算数运算符
            var str1 = "10";
            var str2 = "3";
            console.log(str1 + str2);//103
            console.log(str1 - str2);//7
            console.log(str1 * str2);//30
            console.log(str1 / str2);//3.3333333333333335
            console.log(str1 % str2);//1
            
            //深入boolean类型
            //注意："",0,undefined,null都表示false
            if ("") {
                console.log(true);
            } else{
                console.log(false);
            }//false
            
            if (0) {
                console.log(true);
            } else{
                console.log(false);
            }//false
            
            if (undefined) {
                console.log(true);
            } else{
                console.log(false);
            }//false
            
            if (null) {
                console.log(true);
            } else{
                console.log(false);
            }//false
            
            //typeof - 判断变量是什么数据类型的
            var v1 = 100;
            var v2 = 123.123;
            var v3 = 'aba';
            var v4 = true;
            console.log(typeof v1);//number
            console.log(typeof v2);//number
            console.log(typeof v3);//string
            console.log(typeof v4);//boolean
            
            var v5 = undefined;
            var v6 = null;
            console.log(typeof v5);//undefined
            console.log(typeof v6);//object
            
            // == 与===
            //'=='判断值是否相同，'==='既判断值是否相同。又判断类型是否相同
            console.log(100==100);//true
            console.log(100==101);//false
            console.log(100=='100');//true
            console.log(100==='100');//false
            
            
</script>

算数运算符

符号

+、-、*、/、%、++、--

<script type="text/javascript">
            
            var num1 = 10;
            var num2 = 3;
            console.log(num1 + num2);//13
            console.log(num1 - num2);//7
            console.log(num1 * num2);//30
            console.log(num1 / num2);//3.3333333333333335
            console.log(num1 % num2);//1
            
            //++: 自增1
            //++a: 先自增1，再使用
            //b++: 先使用，再自增1
            
            var a = 10;
            console.log(++a);//11
            console.log(a);//11
            
            var b = 10;
            console.log(b++);//10
            console.log(b);//11
            
            //--:自减1
            //--c：先自减1，再使用
            //d--：先使用，再自减1
            
            var c = 10;
            console.log(--c);//9
            console.log(c);//9
            
            var d = 10;
            console.log(d--);//10
            console.log(d);//9
                
</script>

语言的流程控制语句

1.顺序语句 - 从上往下执行 2.分支语句 - 满足某个条件就执行对应的功能 2.1 - if 2.2 - switch

3.循环语句 - 满足条件就重复性的执行某个功能 3.1 - for 3.2 - while 3.3 - do-while 4.特殊的流程控制语句 4.1 - break 4.2 - continue 4.3 - return

if分支

<script type="text/javascript">
            //if分支语句
            //写法一：
            if(true){
                console.log("我好像在哪儿见过你");
            }
            //写法二：
            if(false){
                console.log("我好像在哪儿见过你");
            }else{
                console.log("明明就");
            }
            //写法三：
            var num = 25;
            
            if(num>0 && num<=10){
                console.log("我好像在哪儿见过你");
            }else if(num>10 && num<=20){
                console.log("明明就");
            }else if(num>20 && num<=30){
                console.log("泡沫");
            }else{
                console.log("王妃");
            }
</script>

switch分支

<script type="text/javascript">  
            var num = 3;
            switch(num){
                case 1:
                    console.log("aaa");
                break;
                case 2:
                    console.log("bbb");
                break;
                case 3:
                    console.log("ccc");
                break;
                case 4:
                    console.log("ddd");
                break;
                default:
                    console.log("hhh");
                break;
            }
</script>

for循环

<script type="text/javascript">
            /*
             * 知识点：for循环
             * 
             * for(初始化变量;判断条件;更新变量){
             *  ...循环体/代码块...
             * }
             * 执行顺序：
             *      1.初始化变量
             *      2.判断条件  -- 结果必须为boolean类型
             *          true  - 执行代码块，更新变量，重复第二个步骤
             *          false - 跳出整个循环
             */
            var sum = 0;
            for(var i = 1;i<100;i++){
                if(i%2 == 0){
                    sum += i;
                }
            }
            console.log("1~100之间偶数之和："+sum);
            
            
            /*
             * 需求：打印以下图形
             *      *     i=0
                    **    i=1
                    ***   i=2
                    ****  i=3
                    ***** i=4
             */
            
            for(var i = 0;i<5;i++){
                for(var j=0;j<=i;j++){
                    document.write("*");
                }
                document.write("<br/>");
            }
        </script>

while循环

<script type="text/javascript">
            /*
             * 知识点：while循环
             * 
             * 语法结构：while(表达式){
             *      ...代码块...
             * }
             * 
             */
            //问：第一个月存3000，每年递增1000，多少个月后可以存到20万
            var allMoney = 0;//总金额
            var money = 3000;//当月应存金额
            var month = 0;//月数
            
            while(allMoney < 200000){
                allMoney += money;
                month++;
                if(month % 12 == 0){
                    money += 1000;
                }
            }
            console.log(month + "个月后存满20万");
            
        </script>

do-while循环

<script type="text/javascript">
            /*
             * 知识点：do-while循环
             * 语法结构：
             *      do{
             *          ...代码块...
             *      }while(表达式);
             * 理解：先执行一遍代码块，再判断条件
             * 
             */
            do{
                alert("我好像在哪儿见过你");
            }while(false);
        </script>

break

<script type="text/javascript">
            /*
             * 知识点：特殊的流程控制语句 -- break
             * 理解：作用于循环中，表示跳出整个循环语句
             */
            
            for(var i = 0;i<10;i++){
                if(i == 5){
                    break;
                }
                console.log(i);
            }
</script>

continue

<script type="text/javascript">
            /*
             * 知识点：特殊的流程控制语句 -- continue
             * 理解：作用于循环中，表示跳过本次循环，进入到下一次循环
             */
            
            for(var i = 0;i<10;i++){
                if(i == 5){
                    continue;
                }
                console.log(i);
            }
</script>

return

<script type="text/javascript">
            /*
             * 知识点：特殊的流程控制语句 -- return
             * 理解：作用于函数中，表示结束当前函数
             */
            function fun(){
                console.log("aaa");
                console.log("bbb");
                return;
                console.log("ccc");
                console.log("ddd");
            }
            //调用函数
            fun();
        </script>