跳到主要内容

02-JavaScript基础-JavaScript基本语法

阅读需 8 分钟

下定决心还是再学一遍JS等前端知识

1. JavaScript编写方式​

1.1 编写在HTML内部​

<a href="#" onclick="alert('百度一下')">百度-下</a>

<a href="alert('百度一下')">百度-下</a>

1.2 编写在Script元素内​

<a class="google" href="#">Google一下</a>

<script>
var google = document.querySelector(".google");
google.onclick = function() {
  alert("google");
}
</script>

1.3 独立的js文件​

  • 通过script的src属性来引入外部文件
  • bing.js
var bing = document.querySelector(".bing");
bing.onclick = function() {
  alert("bing");
}
  • .html
<script src="./bing.js"></script>

2. noscript元素的使用​

<noscript>
您的浏览器不支持JavaScript
</noscript>

3. JavaScript注意事项​

注意一: script元素不能写成单标签 口在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签 口即不能写成; 注意二: 省略type属性 口 在以前的代码中，

<script>标签中会使用 type="text/javascript"口 现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言</script>

注意三: 加载顺序 口 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序;口 推荐将JavaScript代码和编写位置放在body子元素的最后一行 注意四: JavaScript代码严格区分大小写 口 HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写后续补充:script元素还有defer、async属性，我们后续再详细讲解

4. JavaScript交互方式​

4.1 JavaScript交互方式​

  • JavaScript有如下和用户交互的手段

  • 最常用的是console.log

  • 交互方法

    • alert
      • 接受一个参数，弹窗查看
    • console.log
      • 接受多个参数，在浏览器控制台查看
    • document.write
      • 接受多个字符串，在浏览器页面查看
    • prompt
      • 接受一个参数，在浏览器接受用户输入

4.2 Chrome的调试工具​

  • 使用Console来查看JavaScript的一些内容

  • 补充

    • 1.如果在代码中出现了错误，那么可以在console中显示错误
    • 2.console中有个>标志，它表示控制台的命令行
      • 在命令行中我们可以直接编写JavaScript代码，按下enter会执行代码;
      • 如果希望编写多行代码，可以按下shift+enter来进行换行编写;
    • 3.在后续我们还会学习如何通过debug方式来调试、查看代码的执行流程

5. JavaScript语句和分号​

  • 语句是向浏览器发出的指令，通常表达一个操作或者行为(Action)
    • 语句英文是Statements;
    • 比如我们前面编写的每一行代码都是一个语句，用于告知浏览器一条执行的命令

alert("Hello World");

  • 通常每条语句的后面我们会添加一个分号，表示语句的结束:

    • 分号的英文是semicolon
    • 当存在换行符(line break)时，在大多数情况下可以省略分号
    • JavaScript 将换行符理解成"隐式"的分号
    • 这也被称之为自动插入分号(an automatic semicolon)

  • 推荐

    • 前期在对Javascript语法不熟悉的情况推荐添加分号
    • 后期对JavaScript语法熟练的情况下，任意!

6. JavaScript注释方式​

  • 单行注释

    • // xxx

  • 多行注释

    /*
    ...
    */

  • 文档注释

    • 使用插件: jsDoc

    /**

    • 和某人打招呼的函数
    • @param {string} name 姓名
    • @param {number} age 年龄 function sayHello(name, age)

    sayHello("jie", 28) */

7. VSCode 插件和配置​

  • 推荐一个VSCode的插件:(个人经常使用的)
    • ES7+ React/Redux/React-Native snippets
    • 这个插件是在react开发中会使用到的，但是我经常用到它里面的打印语句，

另外再推荐一个插件:

  • Bracket Pair Colorizer2，但是该插件已经不再推荐使用了

    • 因为VSCode已经内置了该功能，我们可以直接通过VSCode的配置来达到插件的效果;
    • 如何配置呢？
      • 右上角打开设置 -> 出现配置文件,放到最下面的位置即可
      • 文件 -> 首选项 -> 设置 ->
    "editor.bracketPairColorization.enabled": true,
    editor.guides.bracketPairs":"active"

  • 比如敲console.log(),

    • 可以直接打log，会出来console.log()
    • 另一种方式是，敲clg,使用的插件是react插件

8. 变量与数据类型​

8.1 认识JavaScript变量​

8.1.1 程序中的变量​

  • 在我们平时开发中，使用最多的并不是固定的数据，而是会变换的数据:
    • 比如购物车商品的数量、价格的计算等等
    • 比如一首歌曲播放的时间、进度条、歌词的展示等等
    • 比如微信聊天中消息条数、时间、语音的长度、头像、名称等等;
    • 比如游戏中技能的冷却时间、血量、蓝量、buff时间、金币的数量等等;

8.1.2 变化数据的记录-变量​

  • 如果我们希望记录某一个之后会变量的数据，在JavaScript中我们可以定义一个 变量

    • 一个变量，就是一个用于存放数值的容器
    • 这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据
    • 变量的独特之处在于它存放的数值是可以改变的；

  • 我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子进行一个特性的名称。

    • 例如，变量 message 可以被想象成一个标有"message"的盒子，盒子里面的值为"Hello!"
    • 并且，这个盒子的值，我们想改变多少次，就可以改变多少次;

8.2 变量的定义，规范等​

8.2.1 变量的命名格式​

  • 在JavaScript中如何命名一个变量呢?包含两部分:

    • 变量的声明:在JavaScript中声明一个变量使用var关键字(variable单词的缩写)(后续学习ES6还有let、const声明方式)
    • 变量的赋值:使用=给变量进行赋值;

  • 也可以分开操作

    var name;
    name = "Jie";

  • 同时声明多个变量

    var name, age, height;
    name = "Jie";
    age = 18;
    height = 188;

8.2.2 变量的命名规范​

变量命名规范:建议遵守

  • 多个单词使用驼峰标识
  • 赋值 =两边都加上一个空格
  • 一条语句结束后加上分号;也有很多人的习惯是不加!
  • 变量应该做到见名知意

8.2.3 练习​

  • 定义两个变量保存两个数字，对两个变量中的数字进行交换
    • 方法一：借助第三个变量
    • 方法二：不借助第三个变量 
      num1 = num1 + num2
      num2 = num1 - num2
      num1 = num1 - num2

8.2.3 注意​

  • 如果一个变量没被声明，就直接使用，会报错

  • 如果一个变量声明了，但是没被赋值，默认值是 undefined

  • 如果没有使用var声明变量也可以，但是不推荐，（事实上会被添加到window对象上）

8.3 数据类型和typeof​

8.3.1 JavaScript的数据类型​

  • JavaScript 中的值都具有特定的类型。

    • 例如，字符串或数字。
    • 我们可以将值赋值给一个变量，那么这个变量就具备了特定的类型
    • 一个变量可以在前一刻是个字符串，下一刻就存储一个数字,
    • 允许这种操作的编程语言，例如JavaScript，被称为"动态类型"(dynamically typed)的编程语言;

  • 在JavaScript 中有8种基本的数据类型(7 种原始类型和1种复杂类型)

    • Number
    • String
    • Boolean
    • Undefined
    • Null
    • Object
    • Bigint(后续了解)
    • Symbol(后续了解)

8.3.2 typeof操作符​

  • 因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型

    • typeof 操作符就是为此而生的。

  • 对一个值使用 typeof 操作符会返回下列字符串之一:

    • "undefined"表示值未定义;
    • "boolean"表示值为布尔值;
    • "string"表示值为字符串;
    • "number"表示值为数值;
    • "object"表示值为对象(而不是函数)或 null;
    • "function"表示值为函数;
    • "symbol"表示值为符号

  • typeof()的用法:

    • 你可能还会遇到另一种语法:typeof(x)，它与 typeof x 相同
      • 类似 var result = (2+3)*4;, ()是将 2+3作为一个整体
    • typeof是一个操作符，并非是一个函数，()只是将后续的内容当做一个整体而已

8.4 常见的数据类型​

8.5 数据类型的转换​

Loading Comments...
0%