乐趣区

关于前端:10-JavaScipt初体验

jiezi

等呀等，盼呀盼，终于要开始咱们的 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，总结进去的比拟重要的知识点，与君共勉。不妥之处，评论区欢迎您！

退出移动版