JavaScript(1)-CSDN博客

本文链接：https://blog.csdn.net/zy_lalala/article/details/119972129

一、计算机基础

1. 计算机组成

计算机由硬件和软件两部分组成

1）硬件

输入设备——鼠标、键盘、摄像头、手写板等
输出设备——显示器、打印机、投影仪等
CPU——负责处理数据与运算
存储数据——硬盘、内存
- 硬盘——永久存储数据
- 内存——暂时存储数据

2）软件

系统软件——Windows、Linux、macOS
应用软件——浏览器、VSCode、Word等

2. 数据存储

计算机内部使用二进制 0 和 1来表示数据。
所有数据，包括文件、图片等最终都是以二进制数据（0 和 1）的形式存放在硬盘中的。
所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中。
硬盘、内存都是保存的二进制数据。

3. 数据存储单位

位(bit)：1bit 可以保存一个 0 或者 1 （最小的存储单位）
字节(Byte)：1B = 8b
千字节(KB)：1KB = 1024B
兆字节(MB)：1MB = 1024KB
吉字节(GB): 1GB = 1024MB
太字节(TB): 1TB = 1024GB

4. 程序运行

计算机运行软件的过程：

打开某个程序时，先从硬盘中把程序的代码加载到内存中；
CPU执行内存中的代码

注意： 之所以要内存的一个重要原因，是因为 cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械）

二、计算机语言

编程

就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
计算机程序

就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
计算机语言

计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。

计算机语言的种类非常的多，总的来说可以分成机器语言，编程语言两大类。

1. 机器语言

实际上计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。

2. 编程语言

可以通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言（Programming Language）。

编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。

如今通用的编程语言有两种形式：汇编语言和高级语言。

1）汇编语言

汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。

2）高级语言

和汇编语言相比，高级语言不但将许多相关的机器指令合成为单条指令，并且去掉了与具体操作有关但与完成工作无关的细节，例如使用堆栈、寄存器等，这样就大大简化了程序中的指令。

高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有：C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

翻译器

高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器。

翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化。

3. 编程语言和标记语言的区别

编程语言

编程语言有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while等具有逻辑性和行为能力的指令，这是主动的。
标记语言

标记语言（html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的, 他是被动的。

三、JavaScript介绍

1. 为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

2. 什么是 JavaScript?

JavaScript 是面向对象的脚本语言（Script 是脚本的意思）。

1）面向对象

面向对象是相对于面向过程来讲的

面向过程是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了
面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。

例如：从电视塔到钟楼

面向过程需要将从电视塔开始到钟楼结束中途所经历的每一步都要记录【公交车】

面向对象只需要将电视塔作为起始对象，钟楼作为结束对象【滴滴】

2）脚本语言

脚本语言是一种编程语言，它不需要编译，编写好以后放到运行环境中直接就能运行，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行。

3. 浏览器执行 JS

浏览器分成两部分：

1. 渲染引擎

用来解析HTML与css，俗称内核，比如Trident，webkit等

2. JS 引擎

也称为JS解释器

用来读取网页中的JavaScript代码，对齐处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。

JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

4. JavaScript的作用

1）直接写入 HTML 输出流

<body>
  <p>JavaScript 能够直接写入 HTML 输出流中：您只能在 HTML 输出流中使用 document.write 。</p>
  <p>如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。</p>
  <script>
    document.write("<h1>这个标题写在script里面</h1>");
    document.write("<p>这个段落也写在script里面</p>")
  </script>
</body>

显示如下：

在这里插入图片描述

2）改变 HTML 内容

<head>
  <script>
    function myFunction() {
      var x = document.getElementById("demo");
      x.innerHTML = "我是写在script里面的一段话";
    }
  </script>
</head>

<body>
  <h1>我的 Web 页面</h1>
  <p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
  <button onclick="myFunction();">点击改变p的内容</button>
</body>

在这里插入图片描述

3）改变 HTML 图像

<head>
  <style>
    #cute {
      display: none;
    }
  </style>
  <script>
    function changeImage() {
      var img = document.getElementById('img1');
      img.src = "../dog.webp"; // 改变图片路径
      // 改变图片尺寸 不能加单位px
      img.width = "200";
      img.height = "200";
      // 给切换的图片加边框
      img.style.border = "10px solid red";
    }
    function showimg() {
      document.getElementById('cute').style.display = 'block';
    }
  </script>
</head>

<body>
  <h3 id="demo">JavaScript：改变 HTML 图像</h3>
  <img src="../cat.jpeg" id="img1" width="150px" height="150px">
  <button onclick="changeImage();">点击切换照片</button>
  <br>
  <button onclick="showimg();">点击显示照片</button>
  <img src="../cute.png" id="cute">
</body>

在这里插入图片描述

4）改变 HTML 样式

<body>
  <h3>JavaScript：改变 HTML 样式</h3>
  <p id="p">我原来是这个样子的</p>
  <button onclick="change();">点击我试试</button>
  <script>
    function change() {
      var p = document.getElementById('p');
      p.innerHTML = "改变后的我是这个样子的";
      p.style.color = 'red';
    }
  </script>
</body>

在这里插入图片描述

5）对事件的反应

<h3>JavaScript：对事件的反应</h3>
<button onclick="alert('欢迎！')">点击我有弹窗出现</button>

在这里插入图片描述

6）验证输入

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input type="text" id="demo">
<button onclick="test();">点击这里</button>
<script>
  function test() {
    var x = document.getElementById("demo").value;
    if (x == "" || isNaN(x)) {
      alert("不是数字");
    }
  }
</script>

在这里插入图片描述

5. JavaScript的组成

1）ECMAScript

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

2）DOM——文档对象模型

文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

3）BOM——浏览器对象模型

浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

6. JavaScript的用法

1）`<script>` 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

2）书写位置

内嵌式

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body>或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head>
<script>
function myFunction(){
	document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>

<body>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>

外部JS文件

也可以把脚本保存到外部文件中，外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

外部文件需要使用 <script> 标签引入。

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

四、JavaScript 注释

注释不会执行注释，我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

注释一般书写在被注释代码的上一行，或者被注释代码行的结尾处。

1. 单行注释

单行注释以 // 开头。

// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落：
document.getElementById("myP").innerHTML="这是我的第一个段落。";

var x=5;    // 声明 x 并把 5 赋值给它
var y=x+2;  // 声明 y 并把 x+2 赋值给它

2. 多行注释

多行注释以 /* 开始，以 */ 结尾。

/*
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
*/

五、JavaScript 输出

JavaScript 可以通过不同的方式来输出数据：

1. 使用 window.alert() 弹出警告框

<script>
  alert(10 + 20);
</script>

在这里插入图片描述

2. 使用 document.write() 方法将内容写到 HTML 文档中

<body>
  <p>JavaScript 能够直接写入 HTML 输出流中：</p>
  <p>您只能在 HTML 输出流中使用 document.write 。</p>
  <p>如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。</p>
  <script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落</p>")
  </script>
</body>

浏览器打开后显示如下：内容会追加写在原来html文档后面

在这里插入图片描述

注意：如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

<body>
  <p>JavaScript 能够直接写入 HTML 输出流中：</p>
  <p>您只能在 HTML 输出流中使用 document.write 。</p>
  <p>如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。</p>
  <button onclick="myFunction();">点我</button>
  <script>
    function myFunction() {
      document.write("<h1>这是一个标题</h1>");
      document.write("<p>这是一个段落</p>")
    }
  </script>
</body>

显示如下：页面文档加载完成，点击按钮后，触发函数，新追加的内容会将原来的元素覆盖。

在这里插入图片描述

3. 使用 innerHTML 写入到 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法；

请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容

<head>
  <script>
    function myFunction() {
      var x = document.getElementById("demo");
      x.innerHTML = "我是写在script里面的一段话";
    }
  </script>
</head>

<body>
  <h1>我的 Web 页面</h1>
  <p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
  <button onclick="myFunction();">点击改变p的内容</button>
</body>

在这里插入图片描述

4. 使用 console.log() 写入到浏览器的控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式，在调试窗口中点击 “Console” 菜单。

<script>
  var a = 20;
  var b = 30;
  var c = a + b;
  console.log(c);
</script>

在这里插入图片描述

JavaScript(1)

一、计算机基础

1. 计算机组成

1）硬件

2）软件

2. 数据存储

3. 数据存储单位

4. 程序运行

二、计算机语言

1. 机器语言

2. 编程语言

1）汇编语言

2）高级语言

翻译器

3. 编程语言和标记语言的区别

三、JavaScript介绍

1. 为什么学习 JavaScript?

2. 什么是 JavaScript?

1）面向对象

2）脚本语言

3. 浏览器执行 JS

4. JavaScript的作用

1）直接写入 HTML 输出流

2）改变 HTML 内容

3）改变 HTML 图像

4）改变 HTML 样式

5）对事件的反应

6）验证输入

5. JavaScript的组成

1）ECMAScript

2）DOM——文档对象模型

3）BOM——浏览器对象模型

6. JavaScript的用法

1）<script> 标签

2）书写位置

内嵌式

外部JS文件

四、JavaScript 注释

1. 单行注释

2. 多行注释

五、JavaScript 输出

1. 使用 window.alert() 弹出警告框

2. 使用 document.write() 方法将内容写到 HTML 文档中

3. 使用 innerHTML 写入到 HTML 元素

4. 使用 console.log() 写入到浏览器的控制台

1）`<script>` 标签