javascript改变src属性值 js改变变量类型

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>