Web JavaScript Base

Posted Dec 1, 2018

By Cc 6 min read

什么是 JavaScript

JavaScript 是一种高级编程语言,主要用于 Web 开发领域。它是一种动态类型、解释型的脚本语言,广泛应用于前端 Web 开发、服务端开发、移动开发、游戏开发等多个领域。

JavaScript 的主要特点包括

基于原型的面向对象编程: JavaScript 是基于原型继承的面向对象语言,与基于类的面向对象语言如 Java 和 C++ 有所不同。
动态类型: JavaScript 是一种动态类型语言,变量可以保存任意类型的数据,无需事先声明变量的类型。
事件驱动: JavaScript 可以用来定义事件处理程序,从而实现事件驱动的程序设计。
函数式编程: JavaScript 支持函数式编程范式,函数是一等公民,可以作为参数传递、赋值给变量等。
异步编程: JavaScript 通过回调函数、Promises 和 Async/Await 等机制支持异步编程模型。
浏览器端脚本语言: JavaScript 最初是作为客户端脚本语言使用,用于增强网页的交互性和动态性。
跨平台性: JavaScript 可以运行在各种环境中,如浏览器、Node.js 服务器、移动端等。

JavaScript 与 ECMAScript (ES)

关系:
- JavaScript 是 ECMAScript 的一种实现和扩展。ECMAScript 是一种语言规范,而 JavaScript 是符合这种规范的一种编程语言实现。
历史:
- ECMAScript 由 Ecma International 制定和维护,最早的版本是 ES1,发布于 1997 年。
- JavaScript 最初由 Netscape 公司的 Brendan Eich 开发,于 1995 年首次发布。
版本:
- ECMAScript 有多个版本,从 ES1 到最新的 ES13。JavaScript 也会随着 ECMAScript 标准的更新而不断发展。
- 常见的 ECMAScript 版本包括 ES5、ES6(ES2015)、ES7(ES2016)、ES8(ES2017)等。
特点:
- ECMAScript 只定义语法规范,而 JavaScript 则是一种基于 ECMAScript 规范的完整的编程语言实现。
- JavaScript 在 ECMAScript 规范之上增加了一些浏览器相关的 API,如 DOM、BOM 等。

ECMAScript 是一种语言标准或规范,JavaScript 是符合这种标准的一种编程语言实现。
JavaScript 在 ECMAScript 的基础上增加了丰富的 Web 浏览器相关功能,使其成为一种功能更加强大的编程语言。
随着 ECMAScript 标准的不断更新,JavaScript 也在不断发展和完善。开发者需要关注 ECMAScript 的最新版本,以使用 JavaScript 的新特性。

在 HTML 中用法

内联 JavaScript:
- 可以将 JavaScript 代码直接写在 HTML 标签的 onclick、onmouseover 等事件属性中。
- 例如: <button onclick="alert('Hello, world!')">Click me</button>
嵌入式 JavaScript:
- 将 JavaScript 代码写在 <script> 标签中,放置在 HTML 文档的 <head> 或 <body> 部分
  1 2 3 <script> console.log("This is a JavaScript code block."); </script>
外部 JavaScript 文件:
- 将 JavaScript 代码写在独立的 .js 文件中,并使用 <script> 标签引入
  1 <script src="my-script.js"></script>

DOM 操作:

可以使用 JavaScript 选择和操作 HTML 元素。

        
      
<p id="message">Hello</p>
<script>
  document.getElementById("message").textContent = "Hello, world!";
</script>

事件处理:

可以为 HTML 元素绑定事件处理函数,实现交互效果。

        
      
<button onclick="showAlert()">Click me</button>
<script>
  function showAlert() {
    alert("Button clicked!");
  }
</script>

例子

        
      
<!DOCTYPE html>
<html>
  <head>
    <title>Comprehensive JavaScript Example</title>
    <script>
      // 内联 JavaScript
      function showAlert() {
        alert("This is an alert!");
      }
    </script>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #007bff;
        margin: 50px auto;
        transition: transform 0.5s;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to the Comprehensive JavaScript Example</h1>

    <!-- 内联 JavaScript -->
    <button onclick="showAlert()">Click me for an alert</button>

    <!-- 嵌入式 JavaScript -->
    <script>
      console.log("This is a JavaScript code block.");
    </script>

    <div id="myBox" class="box"></div>

    <!-- 外部 JavaScript 文件 -->
    <script src="script.js"></script>

    <!-- DOM 操作 -->
    <p id="message">Hello</p>
    <button onclick="changeMessage()">Change Message</button>

    <!-- 事件处理 -->
    <input
      type="text"
      id="input"
      onkeyup="displayInput()"
      placeholder="Type something..."
    />
    <p id="inputDisplay"></p>
  </body>

  <script>
    // DOM 操作
    function changeMessage() {
      document.getElementById("message").textContent = "Hello, world!";
    }

    // 事件处理
    function displayInput() {
      const inputValue = document.getElementById("input").value;
      document.getElementById(
        "inputDisplay"
      ).textContent = `You typed: ${inputValue}`;
    }
  </script>
</html>

解释
1. 内联 JavaScript: 在 <button> 元素的 onclick 属性中直接调用 showAlert() 函数
2. 嵌入式 JavaScript: 在 <script> 标签中编写 JavaScript 代码块
3. 外部 JavaScript 文件: 引入一个名为 script.js 的外部 JavaScript 文件
4. DOM 操作: 选择 id 为 message 的 <p> 元素,并修改其文本内容
5. 事件处理: 为 id 为 input 的 <input> 元素绑定 keyup 事件,并在事件触发时调用 displayInput() 函数

Language, Web

Web Javascript

This post is licensed under CC BY 4.0 by the author.

什么是 JavaScript

JavaScript 的主要特点包括

JavaScript 与 ECMAScript (ES)

在 HTML 中用法

Trending Tags