1.定义变量及变量类型及变量类型的转换

1.var + 变量名;

2.js变量类型大致四种:数字型(int(整数)/float(浮点数又叫小数)) 字符型(string) 布尔型(true/false) undefined(未定义)

数字型 在console控制台中显示的颜色是蓝色 字符型显示的颜色是黑色 布尔类型是蓝色

3.变量类型的转换:

转换成数字型:1.parseInt(转换成整数型)I要大写 parseFloat(转换成浮点数)

2.强制转换 Number()N要大写

3.隐式转换 与0进行- * / 运算


<script>
        var age = prompt("请输入年龄");
        console.log(age);//此时是字符型
        //要求:将age转换成数字型
        //方法一 这个只能转换成整数型  小数会变成整数   不是四舍五入  是只取整数
        console.log(parseInt(age)); //此时是整数型
        var age1 = parseInt(age);
        console.log(age1);
        //方法二
        console.log(parseFloat(age));//浮点型,可以写小数,也可以是整数
        age1 = parseFloat(age);
        console.log(age1);
        //方法三强制转换
        console.log(Number(age1));
        age1 = Number(age);
        console.log(age1);
        // 方法四 隐性转换  利用算数运算,- * /都可以
        console.log(age - 0);
        console.log(typeof (age - 0));
        age1 = age - 0;
        console.log(age1);
        console.log(typeof (age1));
    </script>


转换成字符串型:1.变量名.toString S要大写

2.String() 强制转换

  1. 隐性转换,+ - * / 运算
<script>
//要求 : 把num转换成字符串类型
        //方法一:变量名.toString
        var str1 = num.toString();
        console.log(str1);
        //方法二:String(变量名)
        var str2 = String(num);
        console.log(str2);
        //方法三:变量+一个空字符串,又称为隐性转换   很隐蔽的转换成字符串
        var str3 = num + "";
        console.log(str3);
    </script>


转换成布尔型:Boolean()注意B要大写


<script>
        var i = -99;
        console.log(Boolean(i));//true 
        console.log(Boolean('0'));//字符0   true
        console.log(Boolean(0));//0   false
        console.log(Boolean(null));//空字符   false
        console.log(Boolean('null'));//字符true
        console.log(Boolean(undefined));//未被定义的 false
        console.log(Boolean(Infinity));//无穷大   true
        console.log(Boolean(-Infinity));//无穷小   true
        console.log(Boolean(NaN));//非数字  false
        //实践证明:只有 0   null     undefined    NaN   为false  其他的都为true
    </script>


4.查看变量的类型函数 typeof();

2..输入与输出语句

alert() :标准输出语句,(''文字'')js中文字的输出要用引号包裹起来 。页面弹出一个框

prompt()(英译:pro母p忒):可作为采集用户输入的语句,页面弹出一个对话框,用户可输入内容,常定义一个变量用来接收用户输入的内容,记:不论用户输入的是汉字还是数字,变量中的内容都是字符串类型

console.log() 程序员专用

代码演示:


<script>
        var age = prompt('请输入你的年龄:');
        alert(age);
        console.log(typeof (age));
    </script>


3.js代码的书写位置

js代码与css代码类似,分为行内式,内嵌式 ,外链式,当前用的最多的是行内式。

内嵌式:

css代码被 <style></style>>包裹
js代码则被<script></script>>包裹

外链式:script引入文件 js文件要以js做后缀

<script src="./style.js"></script>

行内式:不推荐

4.变量运算符及优先级

1.算数运算符

与小学数学类似 加 减 乘 除 取余(求模)+ - * / %

以下代码一一验证:


<script>
        console.log(1 + 1);//加法
        console.log(2 - 1);//减法
        console.log(2 * 6);//乘法
        console.log(9 / 4);//除法
        console.log(9 % 4);//取余
    </script>


2.比较运算符

(大于) < (小于) >=(大于等于) <= (小于等于) !=(不等于) == (全等于)


<script>
        //运算符一共有  > < >= <= == !=    全等号 ===(类型和数值全相等) !==(判断类型和数值是否都一致)
        console.log(2 >= 3);//false
        console.log(3 <= 2);//false
        console.log(5 == 5);//true
        console.log(2 < 3);//true
        console.log(3 > 2);//true
        console.log('----------------')
        var a = 5;
        var b = '5';
        console.log(a == b);//等于是这样写的==会自动转型
        console.log(a != b);//不等于是这样写的会自动转型
        console.log('---------------');
        //===要求数据类型和内容全相等  全等号
        console.log(a === b);//false
        console.log(a !== b);

    </script>


3.逻辑运算符

逻辑与 && 逻辑或 || 记住逻辑运算符都是两个连一块的

逻辑与 (表达式1)&&(表达式2) 只有表达式1 与表达式2 都是真 该表达式才为真 否则就为假

逻辑或 (表达式1)||(表达式2) 只有表达式1 与 表达式2 都是假 该表达式才为假 否则就为真


<script>
        // 逻辑与&& 两个都为真,结果才为真,有一个为假,结果就为假
        alert(5 > 3 && 3 < 2);
        alert(5 > 3 && 8 > 5);
        //  逻辑或||  两个有一个为真,结果就为真,两个都为假,结果才为假
        alert(5 < 3 || 8 > 5);
        alert(5 < 3 || 3 < 2);
        //  逻辑非!
        console.log(!(5 > 3));
        prompt('我爱你')
    </script>


4.递增与递减运算符(★★★)

前置递增 与 递减 ++变量名 / --变量名

后置递增 与 递减 变量名++ / 变量名--

前置与后置的区别在于 后置运算,先用原来的变量值进行运算,再递增 前置运算 ,先递增 在用递增后的值进行运算


var i= 1,m = 1; var num = 5 + ++i;   // 此时是前置递增,先递增,再进行运算 所以num = 5 + 2 = 7   此时i的值是2 var   num2 = 5+ m++; // 此时是后置递增   先使用,在进行运算   所以 num = 5 + 1 = 6   运算结束后 i的值是2


5.三元运算符

判断式? 执行语句1:执行语句2; 如果判断式为真,则执行语句1,如果判断式为假,则执行语句2

案例:输出最大值案例


// 用三元运算符做
    <script>
        var num1 = prompt('请输入第一个数字');
        var num2 = prompt('请输入第二个数字');
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        var result = num1 > num2 ? num1 : num2;
        alert('最大值为:' + result);
    </script>


6.特殊情况 短路运算

短路运算分为 逻辑与短路运算 逻辑或短路运算

逻辑与短路运算 :(表达式1)&&(表达式2) 如果表达式1值为真,那么输出表达式2的值,如果表达式1为假,那么输出表达式1,且不再运算表达式2

逻辑或短路运算:(表达式1)||(表达式2) 如果表达式1为真 输出表达式1 不再进行运算

总结:逻辑或遇到真的就会停下,逻辑与 遇到假的就会停下

代码验证:


<script>
        // 短路运算 逻辑与 从左边开始,如果第一个式子结果为真  则输出第二个表达式,如果第一个表达式为假,则输出第一个表达式
        // 逻辑与的短路运算,如果第一个表达式为真,那么就输出第二个表达式,如果第一个表达式为假,那么后面的根本不执行,直接输出第一个表达式
        //var i = 10;
        // console.log(i && i++);
        // console.log(i);
        //console.log('' && i++);
        //console.log(i);//此时i的值还是10  说明后面的i++根本没有被执行
        // console.log(i && i++ && i++);
        // console.log(i);
        //上面两个证明,逻辑与的短路运算,遇到真的就会一直执行下去,直到遇到假的,或者直到遇到结束,才输出最后一个
        //-- -----------------------------------------------
        // 短路运算   逻辑或 
        var i = 10;
        // console.log(i++ || '');
        // console.log(i);
        //如果第一个为真,那么就输出第一个
        // console.log('' || i++);
        // console.log(i);
        //如果第一个为假,那么会跳过第一个执行第二个
        console.log(5 || 'i++')//检测或运算,遇到第一个为真,会不会执行第二个
        console.log(i);//如果执行,则输出i=11  如果不执行,则输出i=10
        //结果输出为10  说明不执行
        //总结:逻辑或遇到真的就会停下,逻辑与  遇到假的就会停下
    </script>


5.流程控制

1.分支语句 if else / if else if else switch case

1.单分支语句 if else

if (判断式) { 如果满足条件,将会继续向下运行,如果不满足条件 跳到else里运行
执行语句1
}else {
执行语句2
}

1.案例:进入网吧案例

要求:用户输入年龄,如果大于等于18岁,可以进入网吧,如果小于18 不能进入网吧

代码:


<script>
        var age = prompt('请输入你的年龄');
        console.log(age);
        if (age >= 18) {
            alert('欢迎进入网吧');
        }
        else {
            alert('你不能进入网吧');
        }
    </script>


2.经典:判断闰年案例


<script>
        var year = prompt('请输入一个年份,我来判断是不是闰年:');
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert(year + '是闰年');
        }
        else {
            alert(year + '是平年');
        }
    </script>


2.多分支语句 if elseif elseif ..... else

案例:判断成绩等级

要求:用户输入成绩,根据成绩判断等级


<script>
        var score = prompt('请输入你的成绩:');
        if (score >= 90) {
            alert('A');
        }
        else if (score >= 80) {
            alert('B');
        }
        else if (score >= 70) {
            alert('C');
        }
        else if (score >= 60) {
            alert('D');
        }
        //特别注意 else后面不能加括号
        else {
            alert('不及格');
        }
    </script>


案例2


<script>
        //接收班长口袋里的钱数?如果大于等于2000  请大家吃西餐  小于2000 大于等于1500 请吃快餐 小于1500 大于等于1000 请喝饮料  小于1000 大于等于500  请吃棒棒糖 否则提醒班长下次把钱带够
        var count = prompt('班长大大,你口袋你有多少钱?');
        //转换成纯数字
        count = parseFloat(count);
        if (count >= 2000) {
            alert('班长大大请大家吃西餐');
        }
        else if (count >= 1500) {
            alert('班长大大请大家吃快餐');
        }
        else if (count >= 1000) {
            alert('班长大大请大家喝饮料');
        }
        else if (count >= 500) {
            alert('班长大大请大家吃棒棒糖');
        }
        else {
            alert('下次请把钱带够');
        }
    </script>


3.switch case语句 switch(条件){

case 条件1: 执行语句1;break; (如果不写break,会继续执行下面的case语句,直到碰到break停止)

case 条件2 : 执行语句2; break;
.......
}

案例:用户输入水果,判断输入

<script>         var fruits = prompt('请输入一种水果:');         switch (fruits) {             case '苹果': alert('3.5一斤! ');                 break;             case '梨': alert('5.5一斤!');                 break;             case '草莓': alert('35一斤! ');                 break;             default: alert('没有你要的水果');                 break;         }     </script>

案例2:


 

<script>
        var day = prompt('请输入一个1-7的数字:');
        day = parseFloat(day);
        switch (day) {
            case 7: alert('星期日'); break;
            case 6: alert('星期六'); break;
            case 5: alert('星期五'); break;
            case 4: alert('星期四'); break;
            case 3: alert('星期三'); break;
            case 2: alert('星期二'); break;
            case 1: alert('星期一'); break;
            default: alert('你的输入不符合规定'); break;
        }
    </script>

总结:switch case语句,要比ifelse语句执行效率高 , switch语句会根据条件,直接找到对应的case执行,但是在实际应用中,if else要用的更多

2.循环语句 for 语句 do while 语句 while语句

1.for循环 ☆☆☆☆

for(表达式1;判断1 ;运算1){

执行语句

}

案例:输出1-100的累加和


<script>
        //分析:定义一个变量result用来存放最后的结果,将每次的值都加给result
        var result = 0;
        for (var i = 1; i <= 100; i++) {
            result += i;
            console.log(result);
        }
    </script>


2.while循环

while(条件语句){

执行语句

}

while循环, 只要满足条件,就会进入while循环中,切记,一定要设置变量,用于跳出循环,否则会出现死循环。

案例代码:


<script>
        //案例1:打印人的一生,从1岁到100岁
        // var num = 1;
        // while (num <= 100) {
        //     if (num == 1) {
        //         console.log('你今年' + num + '岁,你出生了!');
        //     } else if (num == 100) {
        //         console.log('你今年' + num + '岁了,你该死了');
        //     }
        //     else {
        //         console.log('你今年' + num + '岁了');
        //     }
        //     num++;
        // }
        //案例2  打印1-100之间所有整数的和
        // var num = 1;
        // var translate = 0;
        // while (num <= 100) {
        //     translate += num;
        //     num++
        // }
        // console.log(translate);

        //案例3 弹出一个提示框  你爱我吗? 如果输入我爱你,就提示结束  否则,一直询问
        // var love = prompt('你爱我吗?');
        // while (love != '我爱你') {
        //     love = prompt('你爱我吗?');
        // }
        // alert('我谢谢你祖宗');
        //条件判断循环
        // for (; love != '我爱你';) {
        //     love = prompt('你爱我吗?')
        // }
        // alert('我谢谢你祖宗唉');
       
    </script>


3.do while 循环

do while循环 与 while循环的区别 :

do while 先运行一次,再判断是否进行循环 至少会执行一次

while 先判断是否进行循环,可能会一次都不执行

案例:


<script>
        //案例1 :打印一个人的一生
        // var i = 1;
        // do {
        //     if (i == 1) {
        //         console.log('你今年' + i + '岁,你出生了');
        //     } else if (i == 100) {
        //         console.log('你今年' + i + '岁,你很长寿!');
        //     } else {
        //         console.log('你今年' + i + '岁了');
        //     }
        //     i++;
        // } while (i <= 100)
        //案例2计算1~100所有的整数和
        // var i = 1;
        // var result = 0;
        // do {
        //     result += i;
        //     i++;
        // } while (i <= 100)
        // alert(result);
        //案例3   弹出一个提示框   询问 你爱我吗??  如果回答我爱你  则程序结束,否则就会一直询问
        var str = '';
        do {
            str = prompt('你爱我吗?');
        } while (str != '我爱你')
        alert('我谢谢你啊');
    </script


4.break与continue

break 跳出循环,直接跳出整个循环体,不再进行循环

continue 跳出本次循环,进行下次循环。

案例:


<script>
        //案例1:求1~100之间,除了能被7整除之外的整数和
        var result = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                continue;
            } else {
                result += i;
            }
        }
        console.log(result);
    </script>


6.结束语

以上内容都是基础,是所有高级语言的基础,相信有过c语言或者c++或者任何一门高级语言基础的同学都不会看不懂,最后,再放几个案例

1.for循环打印三角形


<script>
        var str = '';
        var row = prompt('请输入行数:');
        for (var i = 1; i <= row; i++) {
            for (var j = 1; j <= i; j++) {
                str += '☆';
            }
            str += '\n';
        }
        console.log(str);
    </script>


2.for循环打印九九乘法表


<script>
        var str = '';
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                str += j + 'x' + i + '=' + (i * j) + '\t';
            }
            str += '\n';
        }
        console.log(str);
    </script>


3.接收用户名与密码并判断登入模块


<script>
        //分析:接收用户的用户名和密码
        var user = '';
        var keyworlds = '';
        do {
            user = prompt('请输入用户名:');
            keyworlds = prompt('请输入密码:');
        } while (user != 'admin' || keyworlds != '123456')
        alert('登入成功');
    </script>


4.求1-100的累计值,但要跳过个位为3的数


<script>
        //求1-100的累加值
        var sum = 0;// 存放最后结果
        for (var i = 1; i <= 100; i++) {
            if ((i - 3) % 10 == 0) { // 排除所有个位是3的数字,我真是太聪明了
                continue;
            }
            else {
                sum += i;
            }
        }
        alert(sum);
    </script>


5.小组项目:简易ATM系统 希望独自完成

要求:里面现存有100块钱

如果存钱,就用输入钱数加上先存的钱数,之后弹出显示余额提示框

如果取钱,就减去取得钱数,之后弹出显示余额提示框

如果显示余额,就输出余额

如果退出,弹出退出信息提示框


<script>
        //简易的ATM
        //分析:里面现存有100块钱
        //定义一个存的钱的变量
        var sum = 100;// 初始钱数
        var select = 0; //控制选择语句
        //定义一个选择
        while (select != 4) {
            select = prompt('请选择你要进行的业务' + '\n' + '1.存钱' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出');
            switch (select) {
                case '1':
                    var count = prompt('请您输入存的钱数:');
                    sum += parseFloat(count);
                    alert('你的余额为:' + sum);
                    break;
                case '2':
                    var reduce = prompt('请您输入取的钱数:');
                    sum -= parseFloat(reduce);
                    alert('你的余额为:' + sum);
                    break;
                case '3':
                    alert('你的余额为:' + sum);
                    break;
                case '4': break;
                default: alert('输入错误');
                    break;
            }
        }
    </script>