JavaScript - First step

最新推荐文章于 2024-03-14 11:07:33 发布

瘦毛毛

最新推荐文章于 2024-03-14 11:07:33 发布

阅读量188

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/u013275171/article/details/84871206

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文深入讲解JavaScript在网页中的角色，包括其执行时机、代码加载策略、动态内容生成及与HTML、CSS的协作机制。探讨了JavaScript作为解释型语言的特点，以及在客户端和服务端的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 在页面做什么？

当浏览器显示文档是，它必须将文档内容和样式信息联合起来。此时分两个步骤处理文档：

浏览器将 HTML & CSS 转换为 DOM(Document Object Model)，此时处于内存中的 DOM 代表这个文档。它使用文档的样式来结合文档的内容。
浏览器显示 DOM 中的内容。

当 HTML & CSS 由网页集合装配完成之后，才由浏览器的 JavaScript 引擎执行页面对应的 JavaScript。这种机制确保页面结构和样式都完成到位之后，JavaScript才开始执行。

Browser security

每一个浏览器页签都在各自独立的空间中运行代码，互不干扰。意思就是在大多数情况下，每个浏览器代码的运行都是完全分离的，这个浏览器页签中的代码无法影响另一个浏览器页签的代码。

JavaScript running order

浏览器一般是以自上至下的顺序，执行所遇到的 JavaScript 代码块。

Interpreted versus compiled code

解释类型的语言，代码是自上至下顺序执行，并且代码执行的结果会被立即返回。

编译类型的语言，代码在被计算机执行前，会被编译转换为另一种排列组织。

JavaScript 是轻量的解释型编程语言。

Server-side versus client-side code

client-side 代码运行在用户的计算机中。当页面显示后，浏览器会下载、执行页面的 client-side 代码。 client-side JavaScript

server-side 代码在服务器中执行，然后它执行的结果会由浏览器下载，并且显示。例如：PHP, Python, Ruby, ASP.Net ...... JavaScript。

例如：在 Node.js 环境中，JavaScript也可以做为 server-side 语言使用。

Dynamic versus static code

若页面没有动态更新的内容，就被称为 static。

如何将 JavaScript 加入页面

Internal JavaScript

<head>
    <meta charset="utf-8">
    <title>Apply JavaScript example</title>
    <script>
        // JavaScript code goes here
        document.addEventListener("DOMContentLoaded", function () {
            function createParagraph() {
                let para = document.createElement('p');
                para.textContent = 'You clicked the button!';
                document.body.appendChild(para);
            }

            const buttons = document.querySelectorAll('button');

            for (let i = 0; i < buttons.length; i++) {
                buttons[i].addEventListener('click', createParagraph);
            }
        });
    </script>
</head>

External JavaScript

  <head>
    <meta charset="utf-8">
    <title>Apply JavaScript example</title>
    <script src="script.js" async></script>
  </head>

<body>
    <p>Player 1: Chris</p>
    <script src="./index.js" async></script>
    <!--或者-->
    <script src="./index.js"></script>
</body>

Script loading strategies

Internal JavaScript 中，‘DOMContentLoaded’此事件，表示 HTML-Body 已经完全加载和解析完成。

External JavaScript 中，处于 <head> 中的

<script src="script.js" async></script>

‘async’ 属性，告诉浏览器在遇到 <script> 标签元素时，继续下载 HTML 内容。

若不使用‘async’属性，但要解决此问题，可以用一个过时的方式，将这段标签元素放在 </body> 之前。但是在大型站点中，这种方式会拖慢站点的载入速度。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Number guessing game</title>
    <link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.7f3da72dcea1.png" type="image/x-icon">
    <style>
        html {
        font-family: sans-serif;
      }

      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }

      .lastResult {
        color: white;
        padding: 3px;
      }
    </style>
</head>

<body>
    <h1>Number guessing game</h1>

    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you
        if your guess was too high or too low.</p>

    <div class="form">
        <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
        <input type="submit" value="Submit guess" class="guessSubmit">
    </div>

    <div class="resultParas">
        <p class="guesses"></p>
        <p class="lastResult"></p>
        <p class="lowOrHi"></p>
    </div>

    <script>
        // Your JavaScript goes here
        let randomNumber = (Math.floor(Math.random() * 100) + 1);

        const guesses = document.querySelector(".guesses");
        const lastResult = document.querySelector(".lastResult");
        const lowOrHi = document.querySelector(".lowOrHi");

        const guessSubmit = document.querySelector(".guessSubmit");
        const guessField = document.querySelector(".guessField");

        guessField.focus();

        let guessCount = 1;
        let resetButton;

        function checkGuess() {
            // alert("I'm a placeholder")
            let userGuess = Number(guessField.value);
            if (guessCount === 1) {
                guesses.textContent = "Previous guesses: ";
            }
            guesses.textContent += (userGuess + " ");

            if (userGuess === randomNumber) {
                lastResult.textContent = "Congratulations! You got it right!";
                lastResult.style.backgroundColor = "green";
                lowOrHi.textContent = "";
                setGameOver();
            } else if (guessCount === 10) {
                lastResult.textContent = "!!!GAME OVER!!!";
                lastResult.style.backgroundColor = "black";
                setGameOver();
            } else {
                lastResult.textContent = "Wrong !";
                lastResult.style.backgroundColor = "red";
                if (userGuess < randomNumber) {
                    lowOrHi.textContent = "Last guess was too low!";
                } else {
                    lowOrHi.textContent = "Last guess was too height!";
                }
            }

            guessCount++;
            guessField.value = "";
            guessField.focus();
        }

        guessSubmit.addEventListener("click", checkGuess);

        function setGameOver() {
            guessField.disabled = true;
            guessSubmit.disabled = true;
            resetButton = document.createElement("button");
            resetButton.textContent = "Start new game";
            document.body.appendChild(resetButton);
            resetButton.addEventListener("click", resetGame);
        }

        function resetGame() {
            guessCount = 1;

            guessField.disabled = false;
            guessSubmit.disabled = false;

            guessField.value = "";
            guessField.focus();

            lastResult.style.backgroundColor = "white";

            randomNumber = (Math.floor(Math.random() * 100) + 1);
        }
    </script>
</body>

</html>

JavaScript 中，一切东西都是对象。