JavaScript基础(第一部分 -- 简介、注释、输入输出、变量、数据类型、运算符、流程控制)（一）

2023-08-05 65

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JavaScript基础(第一部分 -- 简介、注释、输入输出、变量、数据类型、运算符、流程控制)

前言

根据视频和PPT整理

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程

视频对应资源(在视频简介里面)

链接：【https://gitee.com/xiaoqiang001/java-script.git】

视频对应资源(百度网盘)

链接：【https://pan.baidu.com/s/1q952v5mnFGR9IFjHlyn7Wg】

提取码：1234

1. JavaScript 简介

1.1 JavaScript 是什么

JavaScript 是一种运行在客户端的脚本语言（Script 是脚本的意思）

脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行

js 现在也可以基于 Node.js 技术进行服务器端编程

1.2 JavaScript 的作用

表单动态校验（密码强度检测）（ JS 产生最初的目的）
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

1.3 HTML/CSS/JS 的关系

HTML页面的结构(骨架)，CSS页面的样式(外观)，JavaScript页面的交互(行为)。

1.4 浏览器执行 JS

浏览器分成两部分：渲染引擎和 JS 引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的webkit
JS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8

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

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

1.5 JS 的组成

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

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

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

2. JavaScript 的书写位置

注意：

JavaScript 每行结束可以写分号也可以不写分号

JS 有3种书写位置，分别为行内、内嵌和外部。

2.1 行内式 JS

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读；
引号易错，引号多层嵌套匹配时，非常容易弄混；
特殊情况下使用

<body>
  <!-- οnclick="alert('Hello JavaScript')" -->
  <!-- 双引号中的代码为js代码 -->
  <!-- 避免引号冲突，js代码使用单引号 -->
  <input type="button" value="按钮" onclick="alert('Hello JavaScript')">
</body>

2.2 内嵌JS

可以将多行JS代码写到 script 标签中

<body>
  <script>
    alert('Hello JavaScript')
  </script>
</body>

2.3 外部 JS文件

利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码（写了不生效）
适合于JS 代码量比较大的情况

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./03-外部JS.js"></script>
</body>
</html>

alert('Hello JavaScript!!!!!')

<body>
  <script src="./03-外部JS.js">
    alert('123123')
  </script>
</body>

script 标签中间代码不生效

3. JavaScript 注释

3.1 单行注释

快捷键：ctrl + /

<body>
  <script>
    // 单行注释
  </script>
</body>

3.2 多行注释

快捷键： alt + shift + a

<body>
  <script>
    /* 多行注释
    多行注释
    多行注释 */
  </script>
</body>

快捷键修改：

vscode => 左下角按钮 => 键盘快捷方式 => 查找原来的快捷键 => 修改为新的快捷键 => 回车确认

3. JavaScript 输入输出语句

方法	说明	归属
alert(‘弹出警示框要显示的内容’)	浏览器弹出警示框	浏览器
console.log(‘要在控制台打印输出的信息’)	浏览器控制台打印输出信息	浏览器
prompt(‘提示信息’)	浏览器弹出输入框，用户可以输入	浏览器

alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

3.1 alert

<body>
  <script>
    alert('弹出警示框要显示的内容')
  </script>
</body>

3.2 console.log

<body>
  <script>
    console.log('控制台显示的内容')
  </script>
</body>

打开浏览器的控制台：

F12
鼠标右键 => 检查
笔记本电脑 (键盘左下角) Fn => F12

3.3 prompt

<body>
  <script>
    prompt('请输入信息')
  </script>
</body>

4. 变量

4.1 什么是变量

变量就是一个存放数据的容器，会在内存中开辟一块空间来存放数据，这个存放数据的空间就是变量。(好比，酒店就是计算机的内存空间，酒店的房间就是一个又一个的变量，住在酒店中的人就是一个又一个的数据)。

由上面的类比我们可以得到，每个变量都有自己的名字(酒店房间号，这样子才可以在内存找到变量中数据)，变量中的数据可以更改(酒店房间内居住的人会变动)。