JavaScript入门:前端开发必备技能

发表时间: 2020-07-28 18:25

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 对象的属性之一

想了解更多,欢迎关注我的微信公众号:Renda_Zhang