javascript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。被广泛的应用于web应用。(刚入门的小白理解不到哈哈哈,感兴趣的宝子百度吧哈哈哈,一些专业名词咱真的理解不到)
js代码的引用
- 外部文件引入
<script src="输入路径"></script>
- 标签引入
<script>
//这里可以书写js代码
<script>
拓展(简单讲述一下js文件和css文件的位置对页面渲染效率的影响)
首先我们大概了解一下页面渲染的过程
- 解析html并构建dom树
- 把dom树和cssom树结合起来构建渲染树
- 布局渲染树,计算几何形状
- 把渲染树投到屏幕并绘制(即遍历render树)
渲染过程图如下:
其次我们还需要了解:
当解析到一个script标签的时候,渲染引擎判断这是一段js脚本,此时HTML解析器会暂时停止DOM解析,因为js可以修改当前已经生成的DOM结构。此时专门用于解析js代码的V8引擎介入,开始解析执行这段js脚本,等待js脚本执行完成之后,HTML解析器开始继续解析后续的内容,可以看出这段js脚本就将之前形成的DOM树节点进行了修改。 这也是js文件会影响页面渲染效率的原理。
以及:
CSSOM具体的体现在DOM中就是document.styleSheets,它的数据结构是一个数组列表,列表中的每一项都是一个个的对象,指定了一系列CSS样式渲染的规则和信息。
接下来我们来简述一下css文件是怎么影响页面渲染的速率的:
从js角度来看,CSSOM向js提供了操作DOM节点样式的能力。
不管是内联的CSS文件还是外部引入的CSS层叠样式表,有一个前提就是如果解析HTML文档的时候页面中有script脚本,那么在script脚本的执行需要等待当前文档中的CSS文本被渲染引擎解析成为CSSOM这种结构之后,V8引擎中的JS代码才可以开始执行,因为V8引擎在执行js代码之前,是并不知道js代码要操作css样式的。也就是说,在CSSOM未加载完成时,此时恰巧在解析js代码段,这时候需要检查CSSOM树立有没有js操作DOM样式对应的方法和规则,若没有,则需要等待CSSOM加载完毕,才能继续解析js代码段。只有js执行完成之后才可以继续进行后续的DOM解析,总的来说就是script脚本的加载和执行会阻塞DOM解析,而CSS文件又会阻塞JS脚本的执行,所以CSS文件也是会间接的影响DOM的解析,从而影响布局树的合成,最终影响渲染流水线。
总之,在执行js代码时,需要保证CSSOM的完整性。因此尽量把css文件放在head内部,把js文件放在文档的底部。
这里附上一篇讲的比较详细的博客的链接:http://www.muzhuangnet.com/show/59368.html
http://www.muzhuangnet.com/show/59368.html
正确的引用格式如下图:
变量
定义变量的方法
- let
- const(常量)
- var
//方法:关键字 变量名 = 值
let Myname="lucy"
注意事项:
- 声明之前不可调用
- 不可重复声明
- 值可更改
- 常量不可修改
弹窗和日志
普通弹窗
alert("用于代码调试")
确认弹窗
confirm("你确认退出吗?")
输入弹窗
let name=prompt("请输入你的姓名:")
alert(name)
日志(控制台输出)
console.log("控制台输出")