js作业（1）

最新推荐文章于 2024-11-23 16:29:53 发布

原创最新推荐文章于 2024-11-23 16:29:53 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #css3 #html5

本文详细介绍了JavaScript的基础语法，包括输入输出语句、变量声明、数据类型及其转换、运算符等内容，适合初学者快速掌握JavaScript的基本操作。

1.输入输出语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 单行注释 Ctrl + /
        /* 多行注释 
        默认：  shift + alt + a
        修改后：Ctrl + shift + / 
        */

        // 输入框
        prompt('input:');
        // 弹出警示 展示给用户看
        alert('No problem! listen to your heard,and believe yourself! At least I believe you,lorrie!I believe you!');
        // 控制台可见
        console.log('program can see');
    </script>
</head>
<body>
    
</body>
</html>

2.声明变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var name = 'guess';
        var address = '火影村';
        var age = 10;
        var email = 'guess@xixi.com';
        var gz = 20000;
        console.log(name);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(gz);
        var myname = prompt('请输入你的名字:');
        alert(myname);
    </script>
</head>
<body>
    
</body>
</html>

3.变量的命名规范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var app = 10;
        var App = 100;
        console.log(app);
        console.log(App);
        // var 18age;
        // var var; 关键字不能用做变量
        // name 尽量不要用name作为变量名
        // console.log(tel);
        console.log(name);
    </script>
</head>
<body>
    
</body>
</html>

4.变量语法扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1. 更新变量 update variable
        var myname = 'xiao';
        console.log(myname);
        myname = 'wang';
        console.log(myname);
        // 2. 声明多个变量 declaring multiple variable
        var age = 18;
        var name = 'ba';
        var address = 'firecounty';
        var age = 18;
            name = 'ba';
            address = 'firecounty';
        // 3. 声明变量的特殊情况 special cases
        // 3.1 只声明不赋值 程序也不知里面存啥 so 结果是undefined 未定义的
        var sex;
        console.log(sex);
        // 3.2 不声明 不赋值 直接用 会报错
        // console.log(tel);
        // 3.3 不声明 直接赋值用
        qq = 10;
        console.log(qq); 
    </script>
</head>
<body>
    
</body>
</html>

5.案例：交换两个变量值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // js 具有很强逻辑 实现思路：先怎么做后怎么做
        // 1. 需要一个临时变量
        // 2. 把 Apple1 给变量 temp
        // 3. 把 Apple2 给 Apple1
        // 4. 把临时变量里的值给 Apple2
        var temp; //先声明临时变量temp
        var apple1 = 'greenap';
        var apple2 = 'redap';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>
</head>
<body>
    
</body>
</html>

6.数据类型

1）Number数字型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 数字型 整数、小数
        var num = 10;
        var PI = 3.1415926;
        // 1.八进制 前面加0
        var num1 = 010;
        console.log(num1);
        var num2 = 012;
        console.log(num2);
        // 2.十六进制 0~9 a~f 前面加0x
        var num3 = 0x7;
        console.log(num3);
        var num4 = 0xa;
        console.log(num4);
        // 3.数字型的最大值
        console.log(Number.MAX_VALUE);
        // 4.数字型的最小值
        console.log(Number.MIN_VALUE);
        // 5.无穷大
        console.log(Number.MAX_VALUE * 2);
        // 6.无穷小
        console.log(-Number.MAX_VALUE * 2);
        // 7.非数字 NaN
        console.log('pink老师' - 100);
    </script>
</head>
<body>
    
</body>
</html>

2）String字符串型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = '我是一个高富帅的程序员 yes!!!';
        console.log(str);
        // 字符串转义字符 都是用 \ 开头 但是这些转义字符写到引号里面
        var str1 = "我是一个'高富帅'的\n程序员 yes!!!";
        console.log(str1);
    </script>
</head>
<body>
    
</body>
</html>

2.1）案例：弹出网页警示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert('酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。\n我审视四周，这里，是我的舞台，我就是天地间的王者。\n这一刻,我豪气冲天,终于大喊一声："收破烂啦~"')
    </script>
</head>
<body>
    
</body>
</html>

2.2）字符串拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.检测获取字符串长度 length
        var str = 'my name is xiaowang';
        console.log(str.length);
        // 2.字符串的拼接 + 只要和其他类型相拼接 最终还是string类型
        console.log('沙漠' + '骆驼');
        console.log('pink老师' + 18);
        console.log(12 +12);
        console.log('12' + 12);
        // 3.字符串加强版
        console.log('pink老师' + 18);
        console.log('pink老师' + 18 + '岁');
        var age = 18;
        console.log('pink老师age岁');
        // 变量不要在写在字符串里，是通过和字符串相连的方式实现的 引引加加
        console.log('pink老师'+ age +'岁');
    </script>
</head>
<body>
    
</body>
</html>

2.3）案例：显示年龄案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 弹出一个输入框(prompt)，让用户输入年龄(用户输入)
        // 把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
        // 使用alert语句弹出警示框(输出结果)
        var age = prompt('请输入年龄');
        var str = '您今年已' + age +'岁';
        alert(str);
    </script>
</head>
<body>
    
</body>
</html>

3）Boolead布尔型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var flag = true; //true = 1
        var flag1 = false; //false = 0
        console.log(flag + 1); //2
        console.log(flag1 + 1); //1
        var str;
        console.log(str); //声明未赋值 = undefined
        var variable = undefined;
        console.log(variable + 'pink'); //undefinedpink
        console.log(variable + 1); //NaN :undefined 和数字相加 = NaN
        var space = null;
        console.log(space + 'pink'); //nullpink
        console.log(space + 1); //1
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age); //prompt 取过来的值是 string型
    </script>
</head>
<body>
    
</body>
</html>

7. 数据类型转换

1）转换为字符型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 把数字型转换成string型
        // 1. 变量.toString()
        var num = 10;
        var str = num.toString();
        // 看控制台里结果的颜色
        console.log(num);
        console.log(str);
        console.log(typeof str);
        // 2. 利用String（变量）
        console.log(String(num));
        // 3. 利用 + 拼接字符串 隐式转换
        console.log(num + '');
    </script>
</head>
<body>
    
</body>
</html>

2）转换为数字型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1. parseInt(变量) 把String转换为数字型 得 整数
        console.log(parseInt('3.123')); // 3 取整
        console.log(parseInt('3.98')); // 3 取整
        console.log(parseInt('123px')); // 123 会去掉px单位
        // console.log(parseInt(we123look)); //出错
        console.log(parseInt('rem123px')); //NaN
        // 2. parseFloat(变量) 把String转换为数字型 得 小数（浮点数）
        console.log(parseFloat('3.12')); //3.12
        console.log(parseFloat('456px')); //456
        console.log(parseFloat('rem123px')); //NaN
        // 3. 利用Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('234'));
        // 4. 利用算数运算 - * / 隐式转换
        console.log('12' - 0);
        console.log('123' - '120');
        console.log('123' * 1);
    </script>
</head>
<body>
    
</body>
</html>

2.1）案例：计算年龄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1. 弹出一个输入框(prompt)，让用户输入出生年份(用户输入)
        // 2. 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄(程序内部处理)
        // 3.  弹出警示框(alert)，把计算的结果输出(输密结果)
        var year = prompt('请输入出生年份');
        var age = 2022 - year;
        alert('your age is: '+ age +' old');
    </script>
</head>
<body>
    
</body>
</html>

2.2）案例：简单加法器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.弹出第一个输入框，提示用户输入第一个值 保存起来
        // 2.每弹出第二个框，提示用户轮入第二个值保存起来包这两个值相加，并将结果赋给新的变量(注意数据类型转换)
        // 3.弹出警示框(alert)，把计算的结果输出(输出结果)
        var num1 = prompt('输入第一个数');
        var num2 = prompt('输入第二个数');
        // alert(parseFloat(num1) + parseFloat(num2));
        var result = parseFloat(num1) + parseFloat(num2);
        alert('your result is: ' + result);
    </script>
</head>
<body>
    
</body>
</html>

3）转换为布尔型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log(Boolean());
        console.log(Boolean(''));
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(null));
        console.log(Boolean(undefined));
        console.log('--------------------');
        console.log(Boolean('123'));
        console.log(Boolean('你好'));
        console.log(Boolean('ni'));
    </script>
</head>
<body>
    
</body>
</html>

8.运算符

1）算数运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log(1 + 1); //2
        console.log(1 - 1); //0
        console.log(1 * 1); //1
        console.log(1 / 1); //1
        // 1. % 取余（取模）
        console.log(4 % 2); //0
        console.log(5 % 3); //2
        console.log(3 % 6); //3
        console.log(3 % 5); //3
        // 2.浮点数 算数运算里会出问题
        console.log(0.1 + 0.1); //0.2
        console.log(0.02 * 100); //2
        // 3.不能直接拿着浮点数来进行比较 是否相等
        //  what??? 
        var num = 0.1 + 0.1;
        console.log(num == 0.2); //true
        var num1 = 0.1 + 0.2;
        console.log(num1 == 0.3); //false
        var num2 = 0.2 + 0.2;
        console.log(num2 == 0.4); //true
        var num3 = 0.1 + 0.4;
        console.log(num3 == 0.5); //true
        var num4 = 0.3 + 0.3;
        console.log(num4 == 0.6); //true
        var num5 = 0.2 + 0.6;
        console.log(num5 == 0.2); //false
    </script>
</head>
<body>
    
</body>
</html>

2）表达式和返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 表达式由数字、运算符、变量等组成的式子 1 + 1
        console.log(1 + 1);
        // 程序中 变量 = 1 + 3 即把结果赋给左边的变量
        var num = 1 + 3;
        console.log(num);
    </script>
</head>
<body>
    
</body>
</html>

3）比较运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log(3 >= 5); //false
        console.log(2 <= 3); //true
        // 1. 程序中的等号是 == 默认转换数据类型会把字符串的数据转换成数字型 只要求值相等就可以
        console.log(3 == 4); //false
        console.log('你是人' == '你是牛马'); //false
        console.log(18 == 18); //true
        console.log(18 == '18'); //true
        console.log(18 != 18); //false
        // 2.程序中有全等 一模一样 要求 两侧的值 和 数据类型完全一致才可以 true
        console.log(18 === 18); //true
        console.log(18 === '18'); //false
    </script>
</head>
<body>
    
</body>
</html>

4）逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1. 逻辑与 && and 两侧都要true才可以true
        console.log(1　> 2 && 3 > 2); //false
        console.log(1 < 2 && 3 > 2); //true
        // 2. 逻辑或 || or 两侧有一个true就可以true
        console.log(1　> 2 || 3 > 2); //true
        console.log(1 > 2 || 3 < 2); //false
        // 3.逻辑非 not ！
        console.log(!true); //false
    </script>
</head>
<body>
    
</body>
</html>