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