JavaScript - First step

本文主要是介绍JavaScript - First step，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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 heredocument.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 youif 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 herelet 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 中，一切东西都是对象。

这篇关于JavaScript - First step的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！