同学们有没有为想学习JS而没有详细教程而烦恼今天给大家上一道硬菜JS速成同学们学习完快来评论区交作业吧一JS的使用方式1内行式直接在HTML内添加脚本2内嵌式可在任意位置添加脚本ps所有JS代码都写在script标签内~!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的使用方式及执行顺序/title /head body !-- 行内式直接在HTML标签内添加js脚本一般用于监听事件非常不推荐了解即可 -- !-- input typesubmit value提交 onclickjavascript:alert(提交失败);/ -- br !-- 内嵌式在HTML文档中任意位置内嵌js脚本 -- !-- script // 所有JS代码都写在script标签内主要使用这种方法推荐 document.write(你好云中医计算机学院); //document.write()向网页输出内容 document.write(你好计算机应用技术); /script --3外链式利用阻塞函数document.write(外链式引用JS脚本); // 阻塞函数用于阻塞主进程指定的毫秒数 // 让我们的程序休息多少ms function blockForMilliseconds(ms) { const start Date.now(); while (Date.now() - start ms) { // 空循环体仅用于阻塞 } } // def blockForMilliseconds(ms): console.log(开始阻塞); blockForMilliseconds(3000); // 阻塞5秒让主进程休息5s console.log(阻塞结束);二JS的输出方式1直接在网页页面输出2通过浏览器弹出框输出3通过浏览器控制台输出推荐!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的输出方式/title /head body !-- 在现代Web前端开发中已经不推荐使用因为它会覆盖整个页面的内容 -- script // document.write(第1种直接在网页页面中进行输出); /script !-- 代码调试时偶尔能用一下 -- script // alert(第2种通过浏览器弹出框进行输出); /script !-- 主要用于代码的调试强烈推荐这种方式 -- script // 类似于python的print console.log(第3种通过浏览器控制台进行输出此方法最常用); /script /body /html三JS的变量和数据类型语法特性一无需显示指定变量类型语法特性二未定义类型!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的变量和数据类型/title /head body h1JS的变量和数据类型/h1 script // 4课时学完js语言的核心语法为什么这么快 // 1. 嘴巴编程时代语法细节不再重要语法的特性很重要。手指编写代码的机会很渺茫。 // 2. 高等职业教育要有“速学”能力尤其是在AI时代。 // 我们现在学习编程语言掌握语法特性即可认为已掌握该语言。 // js的语法特性一 无需显式指定变量类型 //普通整型 number var num 10; //一条语句完成声明和赋值其中声明部分会被提到代码最前面 console.log(num); // //字符串 string var strGood morning!; console.log(str - 数据类型 typeof str br); // //双引号包含带单引号的字符串 string var str2This is Tom; console.log(str2 - 数据类型 typeof str2 br); // //单引号包含带双引号的字符串 string var str3This is Tom; console.log(str3 - 数据类型 typeof str3 br); // 数字 number var x165.30; console.log(x1 - 数据类型 typeof x1 br); // 数字 number var x265; console.log(x2 - 数据类型 typeof x2 br); // 数字 number var y117e3; console.log(y - 数据类型 typeof y br); // 数字 number var z117e-3; console.log(z - 数据类型 typeof z br); // 布尔值 boolean var xtrue; console.log(x - 数据类型 typeof x br); // 对象 object 对象类型下的数组注意没有独立的数组类型 var personsnew Array(Tom,Jack,Kate); console.log(persons - 数据类型 typeof persons br); // 未定义类型 undefined // var person1; // console.log(person1 - 数据类型 typeof person1 br); // // 特殊情况尽管 null 是一个表示空值的特殊关键字但 typeof null 会返回 object。 // // 这是一个著名的 JavaScript 特性虽然有些令人困惑但已经存在了很长时间知道一下就行不必理会 // var person2null; // console.log(person2 - 数据类型 typeof person2 br); /script /body /html四JS的各种运算符1加减乘除运算符2取余运算符3自增自减运算符4算术赋值结合运算符5比较运算符6取反运算符7且运算符 参与“且运算”的项必须同时为真才输出为真否则为假8或运算符||参与“或运算”的项当中有一个为真就输出为真否则为假!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的算术运算符/title /head body !-- 加减乘除运算符 -- !-- script console.log(10 10); // 20 console.log(100 - 10); // 90 console.log(10 * 2); // 20 console.log(10 / 5); // 2 /script -- !-- 取余运算符 -- !-- script // 13对5取余数的运算 console.log(13 % 5); // 3 /script -- !-- 自增自减运算符 -- !-- 自增和自减运算符有一个需要注意的地方就是放在变量之后会 先返回变量操作前的值再进行自增/自减操作放在变量之前会 先进行自增/自减操作再返回变量操作后的值。 即 后置返回变量操作前的值再递增/递减 前置先递增/递减再返回变量操作后的值。 -- !-- script var a 1; var b 1; // aa1 console.log(a); // 2 // bb-1 console.log(--b); // 0 /script -- script // var x 1; // var y 1; // // 运算法放在变量后先返回原值再自加 // console.log(x); // 1 即返回 x // // console.log(x); // 2 // // 运算法放在变量前直接返回自加后的值 // console.log(y); // 2 即返回 y1 /script !-- 算术赋值结合运算符 -- script // // 等同于 x x y // var x 2; // var y 1; // console.log(x y); //3 // // 等同于 x x - y // var x 2; // var y 1; // console.log(x - y); //1 // // 等同于 x x * y // var x 2; // var y 1; // console.log(x * y); //2 // // 等同于 x x / y // var x 2; // var y 1; // console.log(x / y); //2 // // 等同于 x x % y // var x 2; // var y 1; // console.log(x % y); //0 /script !-- 比较运算符 -- !-- JS的语法特性二 (宽松相等) 与 (严格相等) 的核心区别 运算符‌会执行隐式类型转换后再比较值不要求类型也相等 ‌ 运算符‌不执行任何类型转换必须要求类型也相等 -- script var num1 10 ; var num2 10 ; var num3 10; console.log(num1 num2); // true console.log(num1 num2); // true console.log(num1 num3); // 返回true因为字符串10会被转换为数字10 console.log(num1 num3); // 返回false因为类型不同数字 vs 字符串 /script !-- 取反运算符 【以下知识为重点】 以下值在布尔上下文中会被转换为false其他所有值都会被转换为true false (布尔值false本身) 0 (数字零) (空字符串) null undefined NaN (特殊的非数字值) -- script console.log(!undefined); // true undefined在布尔上下文中被视为false console.log(!null); // true null在布尔上下文中也被视为false console.log(!0); // true 数字0在布尔上下文中被视为false // NaN的意思是“Not a Number”即“非数值”或“不是一个数值” // 它用于表示一个本来要返回数值的操作数未返回数值的情况。 // NaN通常出现在数学运算中以下几种情况可能导致NaN的产生 // 除以0在进行除法运算时如果除数为0那么结果就无法定义通常会被设置为NaN。 // 非法数学运算当进行一些非法数学运算时比如对负数进行平方根运算结果也会被设置为NaN。 // 数据类型不匹配在类型转换时如果类型转换失败或者转换后的结果不是有效数值结果也会被设置为NaN。 // 数值溢出当进行数值计算时如果计算结果超出了所能表示的范围结果也会被设置为NaN。 // 缺失数据在某些数据分析任务中如果数据中存在缺失值那么在进行数据计算时结果也会被设置为NaN。 console.log(!NaN); // true console.log(! ); // true console.log(!888); // false console.log(!you are my baby); // false /script !--【且运算和或运算是超级超级重点的知识】 -- !-- 且运算符 参与“且运算”的项必须同时为真才输出为真否则为假 -- script console.log(10 20 10 5); // true console.log(10 20 10 5); // false /script !-- 或运算符|| 参与“或运算”的项当中有一个为真就输出为真否则为假-- script console.log(10 20 || 10 5); // true console.log(10 20 || 10 5); // true console.log(10 20 || 10 5); // false /script /body /html五JS的条件语句1条件语句if和if...else!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的条件语句/title /head body script // if语句 var num 3; if (num 3) { num; } console.log(num); // 4 // if...else...语句及其嵌套使用 var eat true; var food 猪肉炖粉条; if (eat) { if (food 双椒鱼头) { console.log(就吃双椒鱼头); } else { console.log(就吃猪肉炖粉条); } } else { console.log(还没到饭点); } // 用三目运算符代替if...else...语句 // 判断一个数是奇数还是偶数if...else...语句实现 var n 100; if (n % 2 0) { console.log(偶数); } else { console.log(奇数); } // 判断一个数是奇数还是偶数三目运算符实现 var n 100; console.log(n % 2 0 ? 偶数 : 奇数); /script /body /html2条件语句 if...else if和swich!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的条件语句/title /head body script // 多向判断语句 if...else if...else... var greeting; var timenew Date().getHours(); if (time12) { greeting现在是上午; } else if (time18) { greeting现在是下午; } else { greeting现在是晚上; } console.log(greeting); // 多向判断语句 switch var x 3; switch (x) { case 0 : console.log(x为0); break; case 1 : console.log(x为1); break; default : console.log(x既不是0也不是1); } var str 1; // var str 1; switch (str) { case 0 : console.log(str是0); break; //break语句用于跳出代码块或循环 case 1 : console.log(str是1); break; default : console.log(str既不是0也不是1); } /script /body /html3循环语句for和while!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的条件语句/title /head body script // 多向判断语句 if...else if...else... var greeting; var timenew Date().getHours(); if (time12) { greeting现在是上午; } else if (time18) { greeting现在是下午; } else { greeting现在是晚上; } console.log(greeting); // 多向判断语句 switch var x 3; switch (x) { case 0 : console.log(x为0); break; case 1 : console.log(x为1); break; default : console.log(x既不是0也不是1); } var str 1; // var str 1; switch (str) { case 0 : console.log(str是0); break; //break语句用于跳出代码块或循环 case 1 : console.log(str是1); break; default : console.log(str既不是0也不是1); } /script /body /html六JS的函数及其用法1JS的函数定义和调用!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的函数定义和调用/title /head body script function calculator(a, b) { c ab; alert(函数被调用了 ab c); return c; } // 1. 直接在JS程序中被调用 包括有返回值和无返回值的调用 // console.log(直接在JS程序中被调用 ab calculator(3, 3)) /script !-- 2. 在按钮或超链接被点击时调用监听点击事件 -- !-- 2.1 监听按钮点击 -- !-- input typesubmit value计算ab的和 onclickcalculator(1,2) / -- br !-- 2.2 监听超链接点击 -- a href# onclickcalculator(3,4)百度一下你就知道/a /body /html2JS的函数全局变量和局部变量!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的函数/title /head body script var c1; //全局变量既可以作用于所有函数内又可以作用于函数外 function calculator1(a,b) { var d2; //局部变量只作用与函数内 return (abc)*d; //返回6 } rlt1 calculator1(1,1); console.log(计算结果为: rlt1); rlt2 (11c)*d //函数外可以调用全局变量c但无法调用局部变量d控制台将报错 -- Uncaught ReferenceError: d is not defined console.log(计算结果为: rlt2); /script /body /html七JS对象的定义和使用!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的对象/title /head body script // 1.直接手动定义一个对象而不是通过类实例化 // 对象这种数据结构的定义语法基本与python的字典一致 // python里面字典是一个键值对 // 可以这么理解把JS的对象当成一个java类的定义包含变量和方法的定义 // 但是不需实例化直接使用对象 var person { firstName:毛, lastName:主席, age:83, eyeColor:黑色, getName: function(){ // 注意this对象的使用指向自身 // 没有this直接用属性名控制台会报错 allName this.firstName this.lastName; return allName; }, cal: function(a,b){ return ab; } }; // 2.使用定义好的对象的属性和方法 // 在使用AI开发时为了保证项目的可维护性 // 嘴巴编程时颗粒度尽可能小好对齐 // 要求在AI辅助下开发出一个微信简易版 // 拿着微信这个作品去找工作。 console.log(person.eyeColor) //使用对象的属性 -- 黑色 console.log(person.getName()) //使用对象的方法 -- “毛主席” console.log(person.cal(1,2)) //使用对象的方法 -- 3 // 学习计算机的方法按需快速学习 /script /body /html