• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

10 JavaScipt初体验

互联网 diligentman 2周前 (10-17) 18次浏览

等呀等,盼呀盼,终于要开始我们的Javascript之旅啦!在这里,你将会看到比HTML和CSS更好玩的互动模式。大鹏一日


Javascript能干啥呢?
动态,交互,动画等似乎是Javascript的代名词,它是似乎是万能的,啥好玩的都能做,事实上真的是这样吗?
当然,它的代码更简短,同时功能很强大。可以创建动态更新的内容,控制多媒体,制作图像动画等,还有很多,接下来我们就一一来看吧。

注:Javascript区分大小写,且非常明确,可不能马虎,否则就会出错哦!

  • 服务端代码 vs 客户端代码

服务端代码在服务器上运行,接着运行结果才由浏览器下载并展示出来。流行的服务端web语言有:PHP/Python/Ruby/ASP.NET以及…Javascript!Javascript也可以作服务端语言,比如Node.js环境。
客户端代码是是在用户的电脑上运行的代码,在浏览一个网页时,它的客户端代码就会被下载,然后由浏览器来运行并展示。

动态:通过按需生成新内容来更新web页面/应用,使得不同环境下显示不同的内容。

下面是一个简单的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击我试试看</button>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            function createParagraph(){
                let para = document.createElement('p');
                para.textContent = '风中少年勇敢向前!';
                document.body.appendChild(para);
            }
            const buttons = document.querySelectorAll('button');
            for(let i=0;i<buttons.length; i++){
                buttons[i].addEventListener('click',createParagraph);
            }
        })
    </script>
</body>
</html>

这个例子中,js代码写在<script></script>中,<script>又包括在了<body>中,这段代码大致意思是,当你点击按钮时触发了createParagraph事件,可以点击按钮试试看哦!上面有一个事件监听器DOMContentLoaded事件,即HTML文档体加载、解释完毕事件,事件触发时将调用中间的代码。

html代码

<body>
    <button>点击我试试看</button>
    <script src="index.js" async></script>
</body>

js代码

function createParagraph(){
    let para = document.createElement('p');
    para.textContent = '风中少年勇敢向前!';
    document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for(let i=0;i<buttons.length; i++){
    buttons[i].addEventListener('click',createParagraph);
}
        

这两段代码等同于上面的一段代码。async异步起到了关键性的作用,它告知浏览器在遇到<script>元素时不要中断后续HTML内容的加载。源代码可以看https://github.com/unique008/…。

:“外部”示例中 async 属性可以解决调用顺序问题,因此无需使用 DOMContentLoaded 事件。而 async 只能用于外部脚本,因此不适用于“内部”示例。

  • 如果脚本无需等待页面解析,且无依赖独立运行,那么应使用 async
  • 如果脚本需要等待页面解析,且依赖于其它脚本,调用这些脚本时应使用 defer,将关联的脚本按所需顺序置于 HTML 中。

以上均是参考最权威的MDN Web Docs,总结出来的比较重要的知识点,与君共勉。不妥之处,评论区欢迎您!


程序员灯塔
转载请注明原文链接:https://www.wangt.cc/2020/10/10-javascipt%e5%88%9d%e4%bd%93%e9%aa%8c/
喜欢 (0)