代码行间,遇见JS
基础定义JavaScript简称 JS是一种动态类型、弱类型、基于对象和事件驱动并具备相对安全性能的脚本语言它可与HTML、CSS一起用于实现在一个Web页面中链接多个对象起到与web客户交互的作用从而开发出客户端的应用程序。JS的使用方式行内式非常不推荐了解即可直接在HTML标签内添加js脚本一般用于监听事件!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS测试/title /head body button onclickjavascript:alert(点击弹窗)点击/button /body /html结果内嵌式在HTML文档中任意位置内嵌js脚本script document.write(高冷男孩 澈清酱); /script /body /htmldocument.write()向网页输出内容结果外链式在HTML文档中任意位置通过src属性链接外部js脚本可以是本地文件也可以是网络URLscript srcD:\tupan\澈清1.jpg /script /body /html注意script 标签写 src 时标签内部代码不会执行。JS的输出方式浏览器代码调试时偶尔能用一下script alert(浏览器弹出框进行输出) /script /body /html网页页面在现代Web前端开发中已经不推荐使用因为它会覆盖整个页面的内容script document.write(在网页页面中进行输出) /script /body /html浏览器控制台主要用于代码的调试强烈推荐这种方式script console.log(浏览器控制台进行输出) /script /body /html注意不会显示在页面上JS的数据类型number(数值)类型所有数字都属于 number不分整数、小数、负数、正数,也可以包含一个e大小写均可表示10的幂let age 18 br let n12 /body /htmlstring(字符)类型被引号包裹的就是字符串可以是文字、符号、数字、空格let str1 单引号 br let str2 双引号 /body /htmlboolean(布尔)类型只有两个值true /falselet is true br let is false /body /htmlobject(对象)类型是JS的重要组成部分用于说明对象var personsnew Array(Tom,Jack,Kate); /body /html未定义类型 undefined变量声明了但没有赋值var person1; /body /html注意在JS基本数据类型的数据可以是常量也可以是变量JS的变量变量是命名的内存空间通过自定义的变量名读取 / 修改里面存储的数据对于变量必须明确变量的命名、变量的类型、变量的声明及变量的作用域变量的命名1.第一个字符必须是字母大小写均可、下画线或美元字符“$”2.后续字符可以是字母、数字、下划线或美元字符变量名中不能有空格、“”“-”“,”或其他特殊符号3.不能使用JS中的关键字作为变量如var、int、double、true。变量的类型变量的类型有字符型、数值型、布尔型变量的声明JS变量可以在使用前先做声命并赋值通过使用var关键字对变量做声明变量的声明和赋值语句var的语法var 变量名称1[初始值1]变量名称2[初始值2]...;注意一个var可以声明多个变量期间用“,”隔开。变量作用域变量的有效访问范围var str1字符 br var number20 br var is true /body /htmlJS的运算符用来操作数据的符号算术运算符用来做加减乘除、取余等。script console.log(10 10); console.log(100 - 10); console.log(10 * 2); console.log(10 / 5); console.log(13 % 5); /script /body /html自增自减运算符!-- 自增和自减运算符有一个需要注意的地方就是放在变量之后会 先返回变量操作前的值再进行自增/自减操作放在变量之前会 先进行自增/自减操作再返回变量操作后的值。 即 后置返回变量原值再递增/递减 前置先递增/递减再返回变量操作后的值。 -- 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); // 2 即返回 y1 /scriptscript // 等同于 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比较运算符!-- (宽松相等) 与 (严格相等) 的核心区别 运算符会执行隐式类型转换后再比较值 运算符不执行任何类型转换 -- 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最核心总结1.字符串 数字 字符串拼接2.比较永远用 和3.一假即假||一真即真4.a先用再加a先加再用5. 6 个假值0、、null、undefined、false、NaN练习!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title简单数学运算/title /head body script var r 10.0; var Π3.14 document.write(已知圆的半径为: r br); var C2*Π*r document.write(圆形的周长Cbr); var SΠ*r*r document.write(圆形的面积Sbr) /script /body /html结果