10 JavaScipt初體驗

時間 2020-10-18

標籤 html git github web 瀏覽器服務器 app 異步 async 動畫欄目 Java 简体版

原文原文鏈接

等呀等，盼呀盼，終於要開始咱們的Javascript之旅啦！在這裏，你將會看到比HTML和CSS更好玩的互動模式。大鵬一日

Javascript能幹啥呢？
動態，交互，動畫等彷佛是Javascript的代名詞，它是彷佛是萬能的，啥好玩的都能作，事實上真的是這樣嗎？
固然，它的代碼更簡短，同時功能很強大。能夠建立動態更新的內容，控制多媒體，製做圖像動畫等，還有不少，接下來咱們就一一來看吧。html

注： Javascript區分大小寫，且很是明確，可不能馬虎，不然就會出錯哦！

服務端代碼 vs 客戶端代碼

服務端代碼在服務器上運行，接着運行結果才由瀏覽器下載並展現出來。流行的服務端web語言有：PHP/Python/Ruby/ASP.NET以及...Javascript!Javascript也能夠做服務端語言，好比Node.js環境。
客戶端代碼是是在用戶的電腦上運行的代碼，在瀏覽一個網頁時，它的客戶端代碼就會被下載，而後由瀏覽器來運行並展現。git

動態：經過按需生成新內容來更新web頁面/應用，使得不一樣環境下顯示不一樣的內容。github

下面是一個簡單的例子：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代碼app

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/...。異步