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