前端基础：JavaScript

时间:2022-07-24
本文章向大家介绍前端基础：JavaScript，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

Introduction

脚本语言叫做动态语言，它是一种解释型语言，它一般由文本编辑器编辑。脚本语言，一般它不能单独运行，需要嵌入到其它语言中。

JavaScript 是比较流行的一种脚本语言，通过 JavaScript 可以让用户与 Web 站点之间增强交互。可以将编写的 JavaScript 嵌入到 HTML 代码中，由浏览器解析执行它。

JavaScript 的作用：

1. 表单验证操作；

2. 通过 JavaScript 对 HTML 代码内容进行修改，对 HTML 中的 CSS 样式进行修改。

Syntax

JavaScript 严格区分大小写

JavaScript是一种弱类型语言，可以任意改变变量的类型

在 JavaScript 中一行的结束可以使用分号也可以不使用，如果不使用，默认是换行做为结束，但建议使用分号。

JavaScript 中的注释与 Java 中一样：// 单行注释 /*多行注释*/

JavaScript 组成
ECMAScript

ECMAScript 是一种脚本语言的标准化规范。

ECMAScript 描述的内容：语法，类型，语句，关键字，保留字，运算符，对象。

ECMAScript 仅仅是一个描述，定义了脚本语言的所有属性、方法和对象。其他语言可以实现 ECMAScript 来作为功能的基准。

ECMAScript 的实现有：JavaScript，ActionScript，ScriptEase

DOM

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。

DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

BOM

BOM（浏览器对象模型），只是 JavaScript 的一个部分，没有任何相关的标准。

由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

使用 BOM 可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。

Integrate Javascript into HTML

HTML 中的脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中；脚本的代码必须位于 <script> 与 </script> 标签之间。

<body> 中的 JavaScript
<body>
        <script>
            document.write("<h1>JavaScript</h1>")
</script>
</body>
<head> 中的 JavaScript
<!DOCTYPE html>
<html lang="en">
    <head>
        <script>
            function updateContent(){
                // 先获取p元素，然后修改元素内的数据
                document.getElementById("p1").innerHTML = "被修改";
            }
</script>
    </head>
    <body>
        <p id="p1">我是一个段落</p>
        <button onclick="updateContent()">修改</button>
    </body>
</html>
外部引入
<script src="./js/外部文件.js"></script>

JavaScript 的使用

输出

JavaScript 没有任何打印或者输出的函数。

JavaScript 可以通过不同的方式来显示数据：

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。
变量声明

变量就是用于存储数据的容器。

在 JavaScript 中声明一个变量可以使用 var 运算符。声明一个变量时可以包含数字字母下划线，但是不能以数字开头。如：var i=10;

数据类型

JavaScript 拥有动态类型，这意味着相同的变量可用作不同的类型。

基本数据类型

需要转换成字符串可以直接调用 toString() 方法，转换成数字可以使用 parseInt(值) 和 parseFloat(值)。

Number 数值类型包含整数与小数。八进制以 0 开头，十六进制以 0x 开头。

Boolean 逻辑类型。true 或 false。

String 字符类型。注意在 JavaScript 中它的字符类型可以使用双引号或单引号，因为在 JavaScript 中字符与字符串是同一个类型。

undefined 类型。变量未初始化。

null 类型。对象不存在。

Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

引用数据类型

一般是指类或对象，在 JavaScript 中它是不具有真实类。在 JavaScript 中有一个 Object，它本身没有什么意义，与 Java 中的 Object 类意义一样。对象是由 new 关键字创建的，如：Var obj=new Object();

运算符和表达式
一元运算符

++ --

逻辑运算符

&& || !

Undefined Null 0 空字符串 代表 false

算术运算符

+ - * / %

Infinity 属性用于存放表示正无穷大的数值。

关系运算符

> < >= <= == !=

三元运算符

表达式?表达式1:表达式1

赋值运算符

简单的赋值运算符由等号（=）实现，把等号右边的值赋予等号左边的变量。

乘法/赋值（*=）

除法/赋值（/=）

取模/赋值（%=）

加法/赋值（+=）

减法/赋值（-=）

左移/赋值（<<=）

有符号右移/赋值（>>=）

无符号右移/赋值（>>>=）

逗号运算符

用逗号运算符可以在一条语句中执行多个运算，常用变量声明中。

var iNum1 = 1, iNum = 2, iNum3 = 3;
流程控制语句
if 条件

在 Java 中 if 语句后面的条件必须是 true/false 值，而在 JavaScript 中我们描述 true/false 有多种方式，所以要注意与 Java 中的区别。

switch 语句

switch 与 java 中使用相同，它也可以允许比较字符串。

迭代语句（ 循环语句 ）

while 语句是前测试循环。这意味着退出条件是在执行循环内部的代码之前计算的。

do-while 语句是后测试循环，即退出条件在执行循环内部的代码之后计算。

for 循环

for 语句是前测试循环，而且在进入循环之前，能够初始化变量，并定义循环后要执行的代码。

for-in 语句是严格的迭代语句，用于枚举对象的属性

函数

JavaScript 使用关键字 function 定义函数。

DOM 操作

HTML DOM 方法可以在节点（HTML 元素）上执行的动作。

BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一。

随机文章
Javascript知识点必读
最近更新