JavaScript入门指南：从基础到实践-优快云博客

本文链接：https://blog.youkuaiyun.com/JASPERV11/article/details/128689451

JavaScript

目标：

1、掌握 JavaScript 的基础语法
2、掌握 JavaScript 的常用对象（Array、String）
3、能根据需求灵活运用定时器及通过 js 代码进行页面跳转
4、能通过DOM 对象对标签进行常规操作
5、掌握常用的事件
6、能独立完成表单校验案例

JavaScript简介

JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

在这里插入图片描述

JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，只是名字比较像而已。但是基础语法类似，所以我们有java的学习经验，再学习JavaScript 语言就相对比较容易些。
JavaScript（简称：JS）在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准就叫ECMAScript ，所有的客户端校验语言必须遵守这个标准，当然 JavaScript 也遵守了这个标准。ECMAScript 6 (简称ES6) 是最新的 JavaScript 版本（发布于 2015 年)，我们的课程就是基于最新的 ES6 进行讲解。

JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：
内部脚本：将 JS代码定义在HTML页面中
外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

内部脚本

在这里插入图片描述

外部脚本

在这里插入图片描述

JavaScript基础语法

书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
如果一行上写多个语句时，必须加分号用来区分多个语句。
注释
单行注释：// 注释内容
多行注释：/* 注释内容 */

注意：JavaScript 没有文档注释

大括号表示代码块
下面语句大家肯定能看懂，和 java 一样大括号表示代码块。

在这里插入图片描述

输出语句

js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同

在这里插入图片描述

变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。格式 var 变量名 = 数据值; 。而在JavaScript 是一门弱类型语言，变量可以存放不同类型的值；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数

在这里插入图片描述

js 中的变量名命名也有如下规则，和java语言基本都相同
1、组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
2、数字不能开头
3、建议使用驼峰命名

在这里插入图片描述

针对如上的问题，ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var ，但是所声明的变量，只在 let 关7键字所在的代码块内有效，且不允许重复声明。
例如：

在这里插入图片描述

数据类型

JavaScript 中提供了两类数据类型：原始类型和引用类型。

在这里插入图片描述

原始数据类型：

在这里插入图片描述

运算符

JavaScript 提供了如下的运算符。大部分和 Java语言都是一样的，不同的是 JS 关系运算符中的== 和===一会我们只演示这两个的区别，其他运算符将不做演示

一元运算符：++，–
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==, ===…
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? true_value : false_value

==和===的区别

在这里插入图片描述

类型转换

上述讲解 == 运算符时，发现会进行类型转换，所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。

其他类型转为number

string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
将 string 转换为 number 有两种方式：
使用 + 正号运算符：

在这里插入图片描述

使用 parseInt() 函数(方法)：

在这里插入图片描述

其他类型转为boolean

在这里插入图片描述

使用场景：

在这里插入图片描述

流程控制语句

在这里插入图片描述

if 语句

在这里插入图片描述

switch语句

在这里插入图片描述

for循环

在这里插入图片描述

while循环语句

在这里插入图片描述

dowhile循环语句

在这里插入图片描述

函数

函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。

在这里插入图片描述

函数调用

在这里插入图片描述

JavaScript常用对象

在这里插入图片描述

Array对象

JavaScript Array对象用于定义数组

在这里插入图片描述

元素访问

在这里插入图片描述

特点

在这里插入图片描述

方法

Array 对象同样也提供了很多方法，如下图是官方文档截取的

在这里插入图片描述

String对象

在这里插入图片描述

自定义对象

在这里插入图片描述

BOM

BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如：我现在想将浏览器地址栏的地址改为
https://www.itheima.com 就可以通过使用 BOM 中定义的 Location 对象的 href 属性，代码： location.href = “https://itheima.com”;
BOM 中包含了如下对象：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系

在这里插入图片描述