初识JavaScript道友，看我如何攻略它

一.什么是JavaScriptJavaScript是一种轻量级、解释型或即时编译的编程语言主要用于网页开发它支持事件驱动、函数式和基于原型的编程风格。JavaScript与CSS的区别JavaScript和CSS一样都需要有标签包裹起来。但是CSS是在头部标签head中的style标签中写其语句JavaScript则是在身体标签body中的script标签中写其语句二.JavaScript的三种引入方式1.行内式直接在HTML标签内添加js脚本一般用于监听事件如果要修改时很不方便非常不推荐了解即可此方法的优缺点优点是简单直接适合快速测试或小型项目无需额外引入外部文件或编写独立的脚本标签缺点是代码可读性和可维护性差HTML与JavaScript混合难以复用和调试不符合现代前端开发中“关注点分离”的原则小拓展οnclickjavascript:alert(登录失败); 是一个 HTML 事件处理属性用于在用户点击某个元素时触发 JavaScript 代码。当用户点击绑定该属性的元素如按钮、链接等时浏览器会弹出一个警告框内容为“登录失败”括号内的内容是可以随意设置的这是一种简单的用户反馈机制通常用于提示操作失败或其他信息!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript/title /head body script src./1_my.js/script h1阻塞任务完成后才会渲染我..../h1 /body /html2.内嵌式在HTML文档中任意位置内嵌js脚本通过script /script标签嵌入 JavaScript 代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript/title /head body script document.write(你好我是一名学生); //document.write()向网页输出内容 document.write(你好我是酹月); /script br script document.write(你好我是一名学生); //document.write()向网页输出内容 // document.write(你好我是酹月); /script br script // document.write(你好我是一名学生); //document.write()向网页输出内容 document.write(你好我是酹月); /script /body /html注意 在演示图中显示没有换行符的语句是无法自动换行的因此需要我们使用到br换行符(但是script内是无法使用br换行符的需要在script外部使用)3.外链式在HTML文档中任意位置通过src属性链接外部js脚本(一般为 .js文件并在此文件里写需要表达的)!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript/title /head body script srcJavaScript.js/script /body /htmljs文件代码演示成品演示三.JavaScript的输出方式1.document.write()直接在网页中输出其内容但现代web前端开发中已经不推荐使用因为它会在事件后覆盖整个页面的内容!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript/title /head body !-- 在现代Web前端开发中已经不推荐使用因为它会覆盖整个页面的内容 -- script document.write(第一种直接在网页页面中进行输出); /script /body /html2.alert()通过浏览器弹出框进行输出其内容但是会阻塞页面交互通常用于简单提示!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript/title /head body !-- 代码调试时偶尔能用一下 -- script alert(第二种通过浏览器弹出框进行输出); /script /body /html3.console.log()通过控制台进行输出常用于代码的调试(控制台打开方式浏览器页面右键打开检查页面右边能看见控制台)!!!比较推荐此方法!!!!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript/title /head body !-- 主要用于代码的调试比较推荐这种方法 -- script console.log(第三种通过浏览器控制台进行输出此方法最常用); /script /body /html四.JavaScript的变量和数据类型1.什么是变量变量可以理解为装数据的盒子我们可以对盒子里的数据进行存储、读取、修改、替换操作2.变量的命名规范只能由字母、数字、下划线_组成不能以数字开头不能使用JS关键字如let、var、function等严格区分大小写name和Name是两个不同变量3.五大数据类型1String 字符串被单引号/双引号包裹的所有内容文字、符号、数字文本均为字符串无字符类型所有文本统一为string 类型2Number 数字JS中不区分整数、小数、科学计数法所有数值统一为Number类型包含正数、负数、0、小数、科学计数法数值3Boolean 布尔值仅有两个值 true真、false假专门用于条件判断、逻辑判断是分支、循环语句的核心4Undefined 未定义变量只声明、未赋值时的默认值代表变量存在但无任何数据5Null 空值开发者手动赋值的空值代表主动清空数据、占位空对象用于释放变量内存!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS的变量和数据类型/title /head body script //字符串 string var strGood morning!; console.log(str - 数据类型 typeof str ); //双引号包含带单引号的字符串 string var str2This is Tom; console.log(str2 - 数据类型 typeof str2 ); //单引号包含带双引号的字符串 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 e3 → 即*10的三次方 var y117e3; console.log(y - 数据类型 typeof y br); // 数字 number e-3 → 即*10的负三次方 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五.JavaScript的运算符1.加减乘除等的算数运算符!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript的运算符/title /head body !-- 加减乘除运算符 -- script console.log(100 100); // 200 console.log(100 - 50); // 50 console.log(100 * 2); // 50 console.log(100 / 5); // 20 /script /body /html2.取余运算符计算除法中无法被整除的余数!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript的运算符/title /head body !-- 取余运算符 -- script console.log(13 % 2); // 1 console.log(10 % 4); // 2 /script /body /html3.自增自减运算符专门用于变量自身1、-1分为前置、后置两种写法执行顺序完全不同 / --放在变量之前会先进行自增/自减操作再返回变量操作后的值 / --放在变量之后会先返回变量操作前的值再进行自增/自减操作前置先递增/递减再返回变量操作后的值后置先返回变量原值再递增/递减!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript的运算符/title /head body !-- 自增自减运算符 -- script var a 1; var b 1; // 放在变量前 先递增/递减再返回变量操作后的值 console.log(a); // 2 console.log(--b); // 0 /script script var x 1; var y 1; // 放在变量后 先返回变量原值再递增 console.log(x); // 1 即返回 x console.log(x); // 2 // 放在变量后 先返回变量原值再递减 console.log(y--); // 1 即返回 y console.log(y); // 0 /script /body /html注意口诀后置先用后加前置先加后用4.算数赋值结合运算符!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript的运算符/title /head body !-- 算术赋值结合运算符 -- 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 /body /html5.比较运算符!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript的运算符/title /head body !-- 比较运算符 -- // 宽松判定若比较变量数据类型不同则会先进行类型转换再比较 // 严格判定不允许不同数据类型相比较 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因为宽松判定优先转换数据类型 console.log(num1 num3); // 返回false严格判定不允许不同数据类型比较 /script /body /html6.取反运算符取相反的布尔值若原本应输出为true的则输出为false若原本应输出为false的则输出为true!!数字或字符串在JavaScript中会被判定为true但是数字0空字符串null以及undefined则为false!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript的运算符/title /head body !-- 取反运算符 -- script console.log(!0); // true 数字0在布尔上下文中被视为false console.log(!); // true 空字符串在布尔上下文中被视为false console.log(!null); // true null在布尔上下文中也被视为false console.log(!undefined); // true undefined在布尔上下文中被视为false console.log(!888); // false console.log(!you are my baby); // false /script /body /html7.且或运算符且运算符()中参与运算的项要全为真的才为真即true否则为false或运算符(||)中参与运算的项只要有一个为真的就为真即true否则为false!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJavaScript的运算符/title /head body !-- 且运算符参与“且运算”的项全部为真即返回真否则返回假 -- script console.log(10 20 10 5); // true console.log(10 20 10 5); // true /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