JavaScript入门

最新推荐文章于 2024-10-07 09:24:46 发布

Jack丶空

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量35

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_61772841/article/details/133466254

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JavaScript入门

概述

JavaScript是什么

JavaScript是一种运行在客户端（浏览器）的变成语言，实现人机交互的效果：

网页特效（监听用户的一些行为让网页坐出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台数据，渲染到前端）
服务端编程（node.js）

JavaScript的组成

ECMAScript：规定了js基础语法核心知识
- 比如：变量、分支语句、循环语句、变量等
WebAPIs
- DOM：操作文档，比如对页面元素进行移动，大小，添加删除等操作
- BOM：操作浏览器，比如页面弹窗，检测窗口宽度，存储数据到浏览器等等

JavaScript权威网站:MDN Web Docs (mozilla.org)

入门

书写位置

内联：代码写在标签内部

<body>
    <button onclick="alert('内联JavaScript')">内联JavaScript</button>
</body>

内部：直接写在html文件里，用====标签包裹
- 范围：====标签上面
- 拓展：alert(‘HelloWorld!’);页面弹出对话框
- 注意：将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
.外部：代码写在以.js结尾的文件里
- 语法：在 </body> 标签上面，通过script标签，引入到html页面中。
```
<script src="./index.js"></script>
```
- 注意：script标签中间无需写代码，否则会被忽略! 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读。
.

注释与结束符

注释

单行注释
- 符号：//
- 作用：//右边的一行会被忽略
- 快捷键：ctrl+/
块注释
- 符号：/* */
- 作用：在/* 和 */之间的内容都会被忽略
- 快捷键：shift+alt+a

结束符

作用：使用英文；代表语句结束

实际情况：实际开发中，可写可不写，浏览器的JavaScript引擎会自动推断语句的结束位置

为了风格统一，结束符要么每句都写，要么每句都不写

输入输出语法

人和计算机打交道的规则约定

输出

语法一：向body内输出内容
```
doucument.write('HelloWorld');
```
注意：如果输出的内容写的是标签，也会被解析成网页元素
语法二：页面弹出警告对话框
```
alert('HelloWorld')；
```
语法三：控制台打印，程序员调试使用
```
console.log('Hello World');
```

输入

语法：

prompt('请输入：');

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

代码执行顺序

按HTML文档流顺序执行JavaScript代码
alert() 和 prompt() 它们会跳过页面染先被执行

字面量

在计算机科学中，字面量（literal）是在计算机描述事物（数据类型）

变量

变量是计算机用来存储数据的容器，变量本身不是数据本身，他们仅仅是一个用于存储值的容器；可以理解为一个个用来装东西的箱子

基本使用

变量的声明

要想使用变量，首先需要创建变量也就是声明变量或者定义变量

语法：

let 变量名
let age;

声明变量有两部分构成：声明关键字、变量名（标识）

let：关键字，所谓的关键字就是系统提供的专门用来声明或定义变量的词语

声明多个变量：多个变量之间用==,==隔开(可读性差，不建议这种写法)

let age = 18 , name = 'jack';

变量的赋值

定义了一个变量后，就能够初始化（赋值）它；在变量名之后跟上一个"="，然后是数值。

let age;
age = 18;
let name = 'jack';//声明变量并赋值（变量的初始化）

更新变量

变量赋值后，还可以通过简单的给他一个不同的值来进行更新

let age = 18;
age = 19;

变量的本质

内存：计算机中存储数据的地方，相当于一个空间

变量的本质：是程序在内存中申请的一块用来存放数据的小空间

变量命名规范与规则

规则：必须要遵守，不遵守会报错
- 不能使用关键字
- 只能由字母、数字、下划线和$组成，且不能以数字开头
- 字母严格区分大小写
规范：建议，不遵守不会报错，但不符合业内通识
- 起名要见名知意
- 遵守驼峰命名法（第一个单词首字母小写，后面的单词首字母大写）

var和let的区别

在旧版本的JavaScript，使用关键字var来声明变量。

let的出些解决了一些var声明的问题：

var声明：

可以先使用在声明（不合理）
var声明的过程变量可以重复声明（不合理）
变量提升、全局变量、没有块级作用域

==结论：==var声明有太多的bug，let可以完全替代var

数组

一种将一种数据存储在单个变量名下的优雅方式

定义语法：

let 数组名 = [数据1,数据2,数据3,......数据n];
let nums = [1,5,6,1,8,3,5,4,6,......];

使用数组：

数组名[索引]；
	索引：从0开始，往后依次递增1
nums[0];

console.log(nums[索引])；

数组术语：

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得
```
let nums = [1,5,6];
let len = nums.length;//len=3
```

常量

概念：使用const声明的变量称为常量

使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let

常量的使用：

//定义一个常量
const G = 10;
//输出这个常量
console.log(G);

注意：常量不允许被重新赋值，声明的时候必须被初始化（赋值）

数据类型

基本数据类型

number：数字型
- 可以是正数，小数，正数，负数
- 数字类型常与算术运算符一起使用：
  
  主要包括加（+）、减（-）、乘（*）、除（/）和取余（%）
  
  取余：开发中经常作为某个数字是否能被某个数字整除
  
  运算规则符合四则运算
- NaN：Not a Number(不是一个数字)表示当前数据不是一个数字类型
  
  NaN代表一个计算错误。他是一个不正确的或者一个未定义的数学操作所得到的结果。NaN是粘性的，任何对NaN的操作都会返回NaN（NaN！=NaN）
string：字符串类型
- 通过但单引号 ’ '，双引号 " " 或反引号 `` 包裹的数据都叫字符串，单引号和双引号没有本质的区别，推荐使用单引号
- 注意事项：
  - 无论单引号或是双引号都必须成对使用。
  - 单引号双引号可以互相嵌套，但是不可以自己嵌套（口诀：外双内单，外单内双）
  - 必要时可以用转义字符 \ 输出单引号或双引号。
- 字符串拼接： + 运算符可以实现字符串的拼接。（数字相加，字符相连）
- 模板字符串：拼接字符串和变量（ES6新语法）
  - 语法：
    1. ``(反引号)
    2. 内容拼接变量时，用 ${ } 进行包裹
```
let age = 18;
document.write(`我今年${age}岁了`);//我今年18岁了
```
boolean：布尔型

表示肯定或是否定时在计算机中对应的是布尔类型数据，它有两个固定的值true（表肯定：真）和false（表否定：假）
undefined：未定义型

未定义是比较特殊的类型，只有一个值 undefined；当我们只声明变量，不赋值的情况下，变量默认为undefined类型
- 开发中表示：值还没有被传入
null：空类型

仅仅代表"无"，"空"或"值未知"的特殊值
null和undefined的区别
- undefined表示没有赋值
- null表示赋值了，但是内容为空

JS是弱数据类型的语言，变量到底属于哪种类型只有赋值之后我们才能确认。

Java是强数据类型。例如，int a=3，必须是整数。

检测数据类型

通过typeof关键字检测数据类型（两种方法）

作为运算符：typeof x （常用写法）
函数形式：typeof（x）

let num = 18 ;
let str = 'Hello';
let flag = true;
let un;
let obj = null ;
console.log(typeof num);//number
console.log(typeof str);//string
console.log(typeof flag);//boolean
console.log(typeof un);//undefined
console.log(typeof obj);//object
console.log(typeof (obj));//object