From 84ed0cb55344598e1633e26a6f477a6f1de86fdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A2=E4=BD=B3=E5=87=AF?= <1368935475@qq.com> Date: Sun, 9 Oct 2022 22:28:53 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../10.1 js\345\237\272\347\241\200.md" | 285 ++++++++++++++++++ 1 file changed, 285 insertions(+) create mode 100644 "04\345\215\242\344\275\263\345\207\257/\347\254\224\350\256\260/10.1 js\345\237\272\347\241\200.md" diff --git "a/04\345\215\242\344\275\263\345\207\257/\347\254\224\350\256\260/10.1 js\345\237\272\347\241\200.md" "b/04\345\215\242\344\275\263\345\207\257/\347\254\224\350\256\260/10.1 js\345\237\272\347\241\200.md" new file mode 100644 index 0000000..c260fe2 --- /dev/null +++ "b/04\345\215\242\344\275\263\345\207\257/\347\254\224\350\256\260/10.1 js\345\237\272\347\241\200.md" @@ -0,0 +1,285 @@ +一、JS代码编写位置 +（1）直接写在页面标签里面 + + + + + + 脚本代码的位置：直接写在页面标签里面 + + + + + + + +（2）写在外部JS文件中 + +外部的JS文件: + +alert("欢迎进入JavaScript编程的世界！"); +HTML文件: + + + + + + 脚本代码的位置：写在外部js文件中 + + + + + + + +二、将JS脚本代码作为A标签的属性值 + + + + + 将脚本代码作为a标签的属性值 + + + + 喜欢我就点击我吧 +

+ 喜欢我就点击我吧 + + +三、JS中数据类型和变量 +（1）JavaScript是弱类型语言，在定义变量的时候不用确定数据类型，在赋值的时候根据值自动确定其类型 。 + +（2）数据类型有：undefined，number，boolean，string，object + +（3） var是声明变量的关键字 。 + +（4）给变量命名的时候，需要遵循如下规则： + +​ 【1】 第一个字符必须是一个字母、下划线（_）或一个美元符号$。 + +​ 【2】 后面的字符可以是字母、下划线、美元符号或数字。 + +​ 【3】 区分大小写。 + +​ 【4】 不能与关键字同名 ，如while、for和if等。 + +代码演示： + +var msg; +alert(typeof msg); //undefined类型 +alert(typeof xyz); //undefined类型 +var num = 211; //number类型 +alert(typeof num); + +var num = 211.11; //number类型 +alert(typeof num); + +v = 2; +var y = 'a'; +var r = v * y; +//结果为not a number,但是数据类型仍然为number类型 +alert(r); //NaN +alert(typeof r); //number类型 +var flag = true; //boolean类型,取值只能是true或者false +alert(typeof flag); +var str = "JavaScript"; //string类型 +alert(typeof str); + +var str = 'JavaScript'; //string类型 +alert(typeof str); +var now = new Date(); //获取当前时间:object类型 +alert(now + "\n" + typeof now); + +var obj = null; +alert(typeof obj + "\n" + obj); //object类型 + +var arr = [11,22,33,44]; //object类型 +alert(typeof arr); + + +## 四、运算符 + +**（1）算数运算符** + + 算术运算符用在数学表达式中，它们的作用和在数学中的作用一样。下表列出了所有的算术运算符。 + + 表格中的实例假设整数变量A的值为10，变量B的值为20： + +| 操作符 | 描述 | 例子 | +| :----- | :-------------------------------- | :------------------------------------ | +| + | 加法 - 相加运算符两侧的值 | A + B 等于 30 | +| - | 减法 - 左操作数减去右操作数 | A – B 等于 -10 | +| * | 乘法 - 相乘操作符两侧的值 | A * B等于200 | +| / | 除法 - 左操作数除以右操作数 | B / A等于2 | +| ％ | 取余 - 左操作数除以右操作数的余数 | B%A等于0 | +| ++ | 自增: 操作数的值增加1 | B++ 或 ++B 后B等于 21（区别详见下文） | +| -- | 自减: 操作数的值减少1 | B-- 或 --B 后B等于 19（区别详见下文） | + +其中+运算符，除了数学运算，还可以进行数据的拼接，例如： +var a = 10; var b = "10"; alert(a+b); //此处不进行数学运算，进行拼接，结果将打印1010 + + +此处和强类型语言不同，强类型语言例如C#，此结果应该为2，但是在JS中结果为2.5，例如： +var a = 5; var b = 2; alert(a/b); //将打印结果2.5 + + +自增++运算符和自减--运算符，符号写在前面和后面的区别如下： + +++在前，先自增，在运算； ++在后，先运算，在自增 （--运算符同理） +var a = 10; ++a; //或者a++,执行结果一样 alert(a); //打印11 + +var a = 10; var b = a++; alert(a); //打印结果11 alert(b); //打印结果10 + +var a = 10; var b = ++a; alert(a); //打印结果11 alert(b); //打印结果11 + + +**（2）赋值运算符** + +| 操作符 | 描述 | 例子 | +| :----- | :----------------------------------------------------------- | :--------------------------------------- | +| = | 简单的赋值运算符，将右操作数的值赋给左侧操作数 | C = A + B将把A + B得到的值赋给C | +| + = | 加和赋值操作符，它把左操作数和右操作数相加赋值给左操作数 | C + = A等价于C = C + A | +| - = | 减和赋值操作符，它把左操作数和右操作数相减赋值给左操作数 | C - = A等价于C = C - A | +| * = | 乘和赋值操作符，它把左操作数和右操作数相乘赋值给左操作数 | C * = A等价于C = C * A | +| / = | 除和赋值操作符，它把左操作数和右操作数相除赋值给左操作数 | C / = A，C 与 A 同类型时等价于 C = C / A | +| ％= | 取模和赋值操作符，它把左操作数和右操作数取模后赋值给左操作数 | C％= A等价于C = C％A | + +例如： +var a = 1; //正确 // =赋值运算符左边只能是变量，不能是数据常量。 1 = a; //错误 a + 1 = 2; //错误 + +var a = 10; var b = 5; a += b; // 等价 a = a + b; alert(a); //打印15 alert(b); //打印5 + + +**（3）关系运算符** + +表格中的实例整数变量A的值为10，变量B的值为20： + +| 运算符 | 描述 | 例子 | +| :----- | :----------------------------------------------------------- | :--------------- | +| == | 检查如果两个操作数的值是否相等，如果相等则条件为真。 | （A == B）为假。 | +| != | 检查如果两个操作数的值是否相等，如果值不相等则条件为真。 | (A != B) 为真。 | +| > | 检查左操作数的值是否大于右操作数的值，如果是那么条件为真。 | （A> B）为假。 | +| < | 检查左操作数的值是否小于右操作数的值，如果是那么条件为真。 | （A = | 检查左操作数的值是否大于或等于右操作数的值，如果是那么条件为真。 | （A> = B）为假。 | +| <= | 检查左操作数的值是否小于或等于右操作数的值，如果是那么条件为真。 | （A <= B）为真。 | + +=与==的区别： +a = b; //代表将b的值赋给a a == b //代表比较a和b的值是否相等 + + +**（4）逻辑运算符** + +下表列出了逻辑运算符的基本运算，假设布尔变量A为true，变量B为false + +| 操作符 | 描述 | 例子 | +| :----- | :----------------------------------------------------------- | :------------------ | +| && | 称为逻辑与运算符。当且仅当两个操作数都为真，条件才为真。 | （A && B）为假。 | +| \| \| | 称为逻辑或操作符。如果任何两个操作数任何一个为真，条件为真。 | （A \| \| B）为真。 | +| ！ | 称为逻辑非运算符。用来反转操作数的逻辑状态。如果条件为true，则逻辑非运算符将得到false。 | ！（A && B）为真。 | + +例如： +var a = 20; var b = 500; alert(a > b && a > 0); //打印false alert(a > b || a > 0); //打印true alert(!(a > b || a > 0)); //打印false + + +**（5）三目运算符** + + 该运算符有3个操作数，并且需要判断布尔表达式的值。该运算符的主要是决定哪个值应该赋值给变量。 + +**条件表达式 ？结果1 ：结果2** （表达式成立，执行结果1，否则执行结果2），例如： +var a = 10; var b = 20; var c = a > b ? a : b; alert(c); //此处打印20 + + +## 五、选择分支结构 + +**（1）IF单分支结构** + +获取当前日期，判断当前日期是否为自己的生日，如果是则提示"生日快乐" +var now = new Date(); var nowMonth = now.getMonth(); var nowDay = now.getDate(); if(nowMonth+1==6 && nowDay==22) //月份从0开始编号 alert("生日快乐！"); + + +**（2）IF双分支** + +获取当前时间，判断是否为星期六，星期日，如果是提示"我要出去浪",否则提示"努力工作" +var now = new Date(); var nowWeek = now.getDay(); //星期从0开始编号，并且星期天是一个星期第一天 if(nowWeek == 0 || nowWeek == 6) alert("我要出去浪!"); else alert("努力工作!"); + + +**（3）if多分支** + +获取当前时间，如果0点-12点提示：早上好；如果12点-14点提示：中午好；如果14点-18点提示：下午好；剩下时间提示：晚上好。 +var now = new Date(); var nowHour = now.getHours(); if(nowHour < 12) alert("早上好!"); else if(nowHour < 14) alert("中午好!"); else if(nowHour < 18) alert("下午好!"); else alert("晚上好!"); + + +**（4）if嵌套** + +获取当前时间： + +如果是工作日（星期一到星期五） + +​ 10点之前提示："开会中..." 10点之后提示:"努力敲代码中..." + +如果是双休日（星期六星期天） + +​ 10点之前提示："还在睡梦中..." 10点之后提示:"游戏中..." +var now = new Date(); var nowWeek = now.getDay(); var nowHour = now.getHours(); if(nowWeek >=1 && nowWeek <=5) { if(nowHour < 10) alert("开会中..."); else alert("努力敲代码中..."); } else { if(nowHour < 10) alert("还在睡梦中..."); else alert("游戏中..."); } + + +**（5）switch case结构** + +获取当前时间星期几，自动提示当天的课表信息，课表如下： + +星期一：语文、体育、英语 +星期二：数学、化学、计算机 +星期三：政治、历史、物理 +星期四：语文、数学、英语 +星期五：计算机、英语、美术 +星期六和星期天：休息 +var now = new Date(); var nowWeek = now.getDay(); switch(nowWeek) { case 1: alert("语文、体育、英语"); break; case 2: alert("数学、化学、计算机"); break; case 3: alert("政治、历史、物理"); break; case 4: alert("语文、数学、英语"); break; case 5: alert("计算机、英语、美术"); break; default: alert("休息"); break; } + + +## 六、循环结构 + +**（1）while循环和do...while循环** + +while循环打印1-10. +var i = 1; while(i <= 10) { document.write(i+" +") i++; } + + +do...while循环打印1-100. +var i = 1; do { document.write(i+" +") i++; }while(i <= 10); + + +while和do...while区别： + +【1】while先判断后执行,do...while先执行后判断 + +【2】如果将上述程序修改成var i = 11,while循环将一次都不执行,而do...while会至少执行一次。 + +**利用while或do...while循环解决如下问题：** + +假设迟到一次罚款10元，第二次罚款20元，第三次40元，依次翻倍罚款，计算迟到第几次的时候总罚款金额会超过10000元,并显示总罚款金额。 +var fakuan = 10; var sum = 10; var i = 1; do { i++; fakuan = fakuan*2; sum = sum + fakuan }while(sum < 10000); alert("第" + i + "次罚款总金额超过10000,罚款总金额为:" + sum); + + +**（2）for循环** + +for循环打印1-10： +for(var i = 1;i<= 10;i++) { document.write(i+" +"); } + + +**使用for循环打印九九乘法表:** +for(var i = 1;i<=9;i++) { for(var j = 1;j<=i;j++) { document.write(i + "" + j + "=" + ij); if(i*j <=9) document.write(" "); else document.write(" "); } document.write(" +"); } + + +**（3）break和continue** + +break和continue区别： + +【1】break:退出整个循环 + +【2】continue:退出本次循环，马上进入下一次循环 -- Gitee