6-JavaScript基础

Posted 2023-05-14 念念念北

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了6-JavaScript基础相关的知识，希望对你有一定的参考价值。

1. JavaScript 简介

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

JavaScript 是用来控制网页行为的，它能使网页可交互

2. JavaScript 引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript 引入方式有两种：

内部脚本：将 JS 代码定义在 HTML 页面中
外部脚本：将 JS 代码定义在外部 JS 文件中，然后引入到 HTML 页面中

2.1 内部脚本

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间

代码如下：

alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      alert("hello js1");
    </script>
  </body>
</html>

效果如下：

从结果可以看到 js 代码已经执行了。

提示：

在 HTML 文档中可以在任意地方，放置任意数量的 <script> 标签。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script>
      alert("hello js1");
    </script>
  </head>
  <body>
    <script>
      alert("hello js1");
    </script>
  </body>
</html>
<script>
  alert("hello js1");
</script>

一般把脚本置于元素的底部，可改善显示速度
因为浏览器在加载页面的时候会从上往下进行加载并解析。我们应该让用户看到页面内容，然后再展示动态的效果。

2.2 外部脚本

第一步：定义外部 js 文件。如定义名为 demo.js 的文件

项目结构如下：

demo.js 文件内容如下：

alert("hello js");

第二步：在页面中引入外部的 js 文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script src="../js/demo.js"></script>
  </body>
</html>

注意：

外部脚本不能包含 <script> 标签

在 js 文件中直接写 js 代码即可，不要在 js 文件中写 script 标签

<script> 标签不能自闭合

在页面中引入外部 js 文件时，不能写成 <script src="../js/demo.js" />。

3. JavaScript 基础语法

3.1 书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无

如果一行上写多个语句时，必须加分号用来区分多个语句。
注释
- 单行注释：// 注释内容
- 多行注释：/_ 注释内容 _/
注意：JavaScript 没有文档注释
大括号表示代码块

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

if (count == 3)  alert(count);

3.2 输出语句

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

使用 window.alert() 写入警告框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      window.alert("hello js"); //写入警告框
    </script>
  </body>
</html>

上面代码通过浏览器打开，我们可以看到如下图弹框效果

使用 document.write() 写入 HTML 输出

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      document.write("hello js 2~"); //写入html页面
    </script>
  </body>
</html>

上面代码通过浏览器打开，我们可以在页面上看到 document.write(内容) 输出的内容

使用 console.log() 写入浏览器控制台

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      console.log("hello js 3"); //写入浏览器的控制台
    </script>
  </body>
</html>

上面代码通过浏览器打开，我们可以在不能页面上看到 console.log(内容) 输出的内容，它是输出在控制台了，而怎么在控制台查看输出的内容呢？在浏览器界面按 F12 就可以看到下图的控制台

3.3 变量

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

var test = 20;
test = "张三";

js 中的变量名命名也有如下规则，和 java 语言基本都相同

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名

JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样

作用域：全局变量


  var age = 20;

alert(age); // 在代码块中定义的age 变量，在代码块外边还可以使用

变量可以重复定义


  var age = 20;
  var age = 30; //JavaScript 会用 30 将之前 age 变量的 20 替换掉

alert(age); //打印的结果是 30

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

例如：


  let age = 20;

alert(age);

运行上面代码，浏览器并没有弹框输出结果，说明这段代码是有问题的。通过 F12 打开开发者模式可以看到如下错误信息

而如果在代码块中定义两个同名的变量，IDEA 开发工具就直接报错了

ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。通过下面的代码看一下常用的特点就可以了

我们可以看到给 PI 这个常量重新赋值时报错了。

3.4 数据类型

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

使用 typeof 运算符可以获取数据类型

alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型：

number：数字（整数、小数、NaN(Not a Number)）
```
var age = 20;
var price = 99.8;

alert(typeof age); // 结果是 ： number
alert(typeof price); // 结果是 ： number
```
注意： NaN 是一个特殊的 number 类型的值，后面用到再说

string：字符、字符串，单双引皆可

var ch = "a";
var name = "张三";
var addr = "北京";

alert(typeof ch); //结果是  string
alert(typeof name); //结果是  string
alert(typeof addr); //结果是  string

注意：在 js 中双引号和单引号都表示字符串类型的数据

boolean：布尔。true，false

var flag = true;
var flag2 = false;

alert(typeof flag); //结果是 boolean
alert(typeof flag2); //结果是 boolean

null：对象为空
```
var obj = null;

alert(typeof obj); //结果是 object
```
为什么打印上面的 obj 变量的数据类型，结果是 object；这个官方给出了解释，下面是从官方文档截的图

undefined：当声明的变量未初始化时，该变量的默认值是 undefined
```
var a ; alert(typeof a); //结果是 undefined
```

3.5 运算符

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

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

3.5.1 ==和===区别

概述:

==：
1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再去比较其值
===：js 中的全等于
1. 判断类型是否一样，如果不一样，直接返回 false
2. 再去比较其值

代码：

var age1 = 20;
var age2 = "20";

alert(age1 == age2); // true
alert(age1 === age2); // false

3.5.2 类型转换

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

其他类型转为 number
- string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为 NaN
  
  将 string 转换为 number 有两种方式：
  - 使用 + 正号运算符：
```
var str = +"20";
alert(str + 1); //21
```
  - 使用 parseInt() 函数(方法)：
```
var str = "20";
alert(parseInt(str) + 1);
```
  建议使用 parseInt() 函数进行转换。
- boolean 转换为 number 类型：true 转为 1，false 转为 0
```
var flag = +false;
alert(flag); // 0
```
其他类型转为 boolean
- number 类型转换为 boolean 类型：0 和 NaN 转为 false，其他的数字转为 true
- string 类型转换为 boolean 类型：空字符串转为 false，其他的字符串转为 true
- null 类型转换为 boolean 类型是 false
- undefined 转换为 boolean 类型是 false
代码如下：
```
// var flag = 3;
// var flag = "";
var flag = undefined;

if (flag) 
  alert("转为true");
 else 
  alert("转为false");
```

使用场景：

在 Java 中使用字符串前，一般都会先判断字符串不是 null，并且不是空字符才会做其他的一些操作，JavaScript 也有类型的操作，代码如下：

var str = "abc";

//健壮性判断
if (str != null && str.length > 0) 
  alert("转为true");
 else 
  alert("转为false");

但是由于 JavaScript 会自动进行类型转换，所以上述的判断可以进行简化，代码如下：

var str = "abc";

//健壮性判断
if (str) 
  alert("转为true");
 else 
  alert("转为false");

JavaScript之基础-1 JavaScript(概述基础语法)

一、JavaScript 概述

JavaScript 概念

- JavaScript 是一种运行于 JavaScript解释器/引擎中的解释型脚本语言

- JavaScript 解释器作为JS脚本的运行环境，有如下两种呈现方式

- 独立安装的 JavaScript 解释器;

- 嵌入在浏览器内核中的 JavaScript 解释器;

- 目前 PC 、平板、手机、机顶盒中安装的主要浏览器全部支持JavaScript

JavaScript 发展史

- 1992年，Nombas公司为自己的CEnvi软件开发了一款脚本语言ScriptEase，可以嵌入在网页中

- 1995年，Netscape公司为自己的Navigator2.0浏览器开发了另一种客户端脚本语言Livescript，为了赶时髦重命名为JavaScript，但其实与Java没任何关系

- 1996年，Microsoft公司为了进军浏览器市场，在IE3.0浏览器发布了一个JavaScript的克隆版，称为JScript

- 1997年，JavaScript 1.1 作为草案提出给ECMA，各个厂家合力退出了ECMA-262标准，定义了全新的ECMAScript标准脚本语言，各大浏览器厂家开始"努力"将ECMAScript作为实现的标准和目标

- 完整的JavaScript 语言由三部分组成:

- 核心(ECMAScript)

- 文档对象模型(DOM,Document Object Model)

- 浏览器对象模型(BOM,Browser Object Model)

JavaScript 特点

- 代码可使用任何文本编辑工具编写，语法类似于 C 和 Java

- 无需编译，由JavaScript 引擎解释执行

- 弱类型语言

- 基于对象

- 用途

二、JavaScript 基础语法

浏览器内核

- 浏览器内核负责页面内容的渲染，主要有两部分组成:

- 内容排版引擎-----解析 HTML/CSS

- 脚本解释引擎-----解析 JavaScript

搭建JavaScript 运行环境

- 安装独立的JavaScript 解释器

- 使用浏览器内核中嵌入的JavaScript解释器

第一个JavaScript 程序

- 方式一: 使用独立的JavaScript 解释器

- 可以一行一行的输入要执行的脚本并执行

- 也可以把多行要执行的脚本写在文本文件中，批量执行

- 方式二: 使用浏览器内核中的内嵌的JavaScript解释器

- 直接在Console中输入脚本并执行

- 将JS脚本嵌入在HTML页面中执行

- html元素事件

- <script> 元素

- 外部脚本文件

html元素事件

- 要执行的脚本语句直接编写在<body>标签中

<script>元素

- 内部脚本块中可以执行多条语句

外部脚本文件

- 将 JavaScript 代码写入一个单独的文件，并保存为后缀名为.js的文件

- 为纯文本文件

- 文件中，不需要包含<script>标签，直接书写js代码

- HTML 页面的 HEAD 中引用.js 文件

- 在 <head> 中添加 <script> 标签

- 设置 <script> 标签的"src"属性，以制定js文件的url

三、JavaScript 调试

JavaScript 代码错误

- 解释型语言，若某行代码错误，则解释器终止此次之行

- 但不会影响后续块的执行，以及后续 HTML 元素的解析

浏览器的调试功能

Chrome控制台

四、JavaScript 语法规范

编写 JavaScript 代码

- 语句----会被 JavaScript 引擎解释执行的代码

- 由表达式、关键字、运算符组成;

- 大小写敏感;

- 使用分号或者换行结束;

- 注释----不会被 JavaScript 引擎解释执行的代码

- 单行注释: //

- 多行注释: /* */

大小写敏感

- 在 JavaScript 程序中大小写是敏感的

- userName、UserName、username是不同的

总结：本章内容主要介绍了 JavaScript (概述、基础语法)

本文出自 “技术交流” 博客，谢绝转载！

以上是关于6-JavaScript基础的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript之基础-6 JavaScript 分支结构（ifif-elseelse ifswitch-case）

Js基础知识6-JavaScript匿名函数和闭包

前端基础-JavaScript的基本概述和语法

6.4 JavaScript

8张JS 基础思维图，超详细！

JavaScript 8张思维导图