HTML基础命令#11 JavaScript命令

通过以往文章的学习我们了解到HTML有三大核心技术HTML、CSS、JavaScript。HTML负责网页的架构CSS负责网页的样式和布局JavaScript负责网页的行为和动态响应。我们已经学习完HTML和CSS了所以从本章开始我们将开启一个新的篇章学习JavaScript什么是JavaScriptJavaScript是一种广泛使用的编程语言作为一种脚本语言它允许开发者向网页添加多种交互性例如鼠标点击、动态更新、以及其他。可以说如果没有JavaScript那么网页就只是一个平面的、静态的只能看没有交互性的模样。HTML、CSS、JavaScript三者相结合才使得网页不再是静态的文本和图片而是可以提供丰富的用户交互和体验。那么也不废话啦接下来就让我们一起进入到JavaScript的学习吧JavaScript的使用方式JavaScript和CSS一样都需要有标签包裹起来。CSS是在头部标签head中的style标签中写其语句JavaScript则是在身体标签body中的script标签中写其语句。当然了和CSS一样JavaScript也是有三种使用方式。行内式body!-- 行内式直接在HTML标签中添加js脚本其中onclick用法为监听事件--inputtypesubmitvalue登录onclickjavascript:alert(登录失败);//body在上述语句中我们先是创建了一个input按钮然后使用onclick语句监听这个事件。若按钮被点击那么就会弹窗显示登陆失败四个字如下图内嵌式body!-- 内嵌式在HTML文档中任意处内嵌js脚本--scriptdocument.write(hello world);//document.write()向网页输出内容/script/body上述语句中我们在body标签内嵌入了一个script标签并写入其语句它的效果如下图外链式body!-- 外链式在html文档中任意位置使用script链接外部文件可以是本地文件也可以是网络URL --scriptsrc./tiaoshi.js/script/bodyjavascript语句document.write(hello my worlld);结果如下图JavaScript输出方式在JavaScript中有三种输出方式document.write()直接在网页中输出其内容但现代web前端开发中已经不推荐使用因为它会在事件后覆盖整个页面的内容alert()通过浏览器弹出框进行输出其内容console.log()通过控制台进行输出常用于代码的调试接下来我们一起学习下三种输出方式的写法和演示注上述已经了解过script是写在哪里所以以下语句不在显示只显示关键语句document.writescriptdocument.write(你好世界);/scriptalertscriptalert(你好world);/scriptconsole.logscriptconsole.log(hello世界);/scriptJavaScript变量和数据类型在JavaScript中我们使用var关键字声明变量例如scriptvara0;varb10;alert(ab);/script在上述语句中我们使用var关键字来声明了两个变量a和b并赋值最后使用弹出框输出两者相加的值数据类型数据名称类型String字符串number数字boolean布尔值以上就是我们目前阶段需要掌握的数据类型一起来看看其写法吧字符串scriptdocument.write(你好世界);document.write(你好世界);/script可以看到字符串的写法很简单只需要有一对双引号括起来即可。若不加双引号浏览器则无法解析此包裹在script标签中的文字数字scriptdocument.write(123456879);/script可以看到数字不需要使用双引号包裹起来也可以正常被解析。当然了在有时候我们也会使用双引号将数字包裹起来使其变成字符串布尔值scriptvarafalse;console.log(a的布尔值为Boolean(a));/script布尔值是什么呢布尔值只有两个值对true和错false。它的功能是用于判断语句的正确性。如语句所示我将a赋予了false所以在控制台中就输出了falseQ那这样不只是给a赋值了一个字符串吗赋值什么输出什么A并不是若我们给a赋值的false转换成字符串会是什么样呢scriptvarafalse;console.log(a的布尔值为Boolean(a));/script可以看到a的布尔值变成了true而不再是false。这是因为我们给a赋值了在console.log中的boolean是用于判断a是否有值若有则输出ture若无则输出false。JavaScript运算符在JavaScript中也有其运算符一起来看看吧加减乘除script// 加减乘除和取余vara10;varb10;console.log(ab);console.log(a-b);console.log(a*b);console.log(a/b);console.log(a%b);//两者相除有余数则输出余数/script自增/自减script// 自增自减有一个原则若加减号在变量后那么则会先输出变量再输出自增自减后的值若在前则直接输出自增自减后的值vara1;console.log(a);console.log(a);/script算数赋予结合运算符scriptvara10;varb10;console.log(ab);//等同于a a b ,下述语句同理console.log(a-b);console.log(a*b);console.log(a/b);console.log(a%b);/script比较运算符script// 宽松判定若比较变量数据类型不同则会先进行类型转换再比较// 严格判定不允许不同数据类型相比较varnum110;varnum210;varnum310;console.log(num1num2);console.log(num1num2);console.log(num1num3);// 宽松判定优先转换数据类型所以为trueconsole.log(num1num3);// 严格判定不允许不同数据类型比较所以未false/script取反script// 取反取相反的布尔值若是ture则输出false若是false则输出trueconsole.log(!false);console.log(!123);// 数字/字符串在JavaScript中被判定为true/script与/或运算符script// 与运算符只有当两边都为true时才会输出true否则输出falseconsole.log(10201020);// falseconsole.log(10202030);// true//|| 或运算符若两边有一方为ture则输出true否则是输出falseconsole.log(1020||1020);// trueconsole.log(1020||2030);// false/script