前端——JavaScript基础学习【part 1】

最新推荐文章于 2024-07-12 09:36:48 发布

帆高#

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量77

点赞数 1

分类专栏： JavaScript基础学习文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/qq_73958269/article/details/130426194

版权

JavaScript基础学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

JavaScript的介绍
变量
常量
- 1. 常量的基本使用
数据类型
类型转换

JavaScript的介绍

1. JavaScript基础知识

1.1定义

1.1.1是什么

是一种运行在客户端(浏览器)的编程语言,实现人机交互效果
注意:JavaScript是一种编程语言,而HTML和CSS是一种标记语言

1.1.2作用

网页特效
监听用户的一些行为让网页做出对应的反馈,比如轮播图和返回顶部
表单验证
对填入表单数据的合法性进行判断,比如在电话框输入汉字,会报错
数据交互
获取后台的数据,渲染到前端
服务端编程
node.js

1.1.3组成

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

2. JavaScript书写位置

2.1内部JavaScript

2.1.1位置

直接写在html文件里，用script标签保住
script标签写在</body>上面
放在html文件的底部的原因
浏览器会按照我们写的代码的顺序加载，JavaScript是对我们写的html的功能进行进一步完善，所以要放在所有的html之后

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS书写位置-内部</title>
  </head>

  <body>
    <!-- 内部的js -->
    <script>
      alert("无关风月，我题序等你回，悬笔一绝，那岸边浪千叠");
      // 页面弹出警示框
    </script>
  </body>
</html>

2.2外部JavaScript

2.2.1位置

代码写在以 .js 结尾的文件里
通过script标签，引入到html页面中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS书写位置-外部</title>
  </head>
  <body>
    <script src="../JavaScript/liutao.js">
      // 中间不允许写代码，就算是写了代码也会被忽略
    </script>
  </body>
</html>

2.3内联JavaScript

2.3.1位置

代码写在标签的内部

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="alert('独守宿舍')">五一什么安排</button>
  </body>
</html>

3. JavaScript怎么写

3.1 注释

3.1.1 单行注释

符号：//
作用：//右边这一行的代码都会被忽略
快捷键：ctrl+/
3.1.2 块注释
符号：/**/
作用：在/**/之间的所有内容都会被忽略
快捷键：shift+alt+a

3.2 结束符

符号：英文的分号;
实际情况：分号可写可不写
约定：要么每一句都写，要么每一句都不写
注意：现在一般都不写分号

4. JavaScript输入和输出语法

4.1输出语法

4.1.1语法1

内容：document.write('写入要输出的内容')
作用：向body内输出内容
注意：如果内容写的是标签，也会被解析成网页元素

4.1.2语法2

内容：alert('写入要输出的内容')
作用：页面弹出警告对话框
注意：如果内容写的是标签，也会被解析成网页元素

4.1.3语法3

内容：console.log('控制台打印')
作用：控制台输出语法，调试的时候需要使用
注意：如果内容写的是标签，也会被解析成网页元素

4.2输入语法

4.2.1语法

内容：prompt('请输入你出行的时间：')
作用：显示一个对话框，对话框上方有文字信息，用来提示用户需要输入的内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      document.write("今天是五一劳动节");
      document.write("<h2>今天会去哪里</h2>");
      alert("格式错误");
      console.log("调试使用，查看对不对");
      prompt("请输入你出行的时间");
    </script>
  </body>
</html>

4.3JavaScript代码执行顺序

4.3.1

按照代码顺序依次执行

4.3.2

alert('写入要输出的内容'),prompt('请输入你出行的时间：')会跳过其他部分优先被执行

5. 字面量

5.1定义

在计算机中描述的事或者物
举例：

10000 是个数字字面量
'今天是五一’是字符串字面量
[]是数组字面量
{}是对象字面量

变量

1.定义

1.1定义

变量就是一个在计算机中存储数据的容器

1.2作用

被使用来存放数据
注意：变量本身是一个容器而不是数据

2.变量的基本使用

2.1变量的声明

2.1.1语法

let 变量名

2.1.2组成

声明关键字let
变量名

2.1.3let和var的区别

var声明的不足：

可以先使用，后声明
已经声明过的变量可以再次声明
变量提升、全局变量、没有块级作用域
因此我们以后声明变量只用let

2.2变量的赋值

给变量进行赋值操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let height;
      // 声明一个身高变量
      height = 180;
      // 赋值操作，把180给height，把右边的给左边   赋值符号  =
      console.log(height);
    </script>
  </body>
</html>

也可以在声明变量的时候直接完成赋值操作

<script>
      let height = 180;
      // 声明一个身高变量，同时在这个变量里面存放了180这个数据
    </script>

2.3变量的更新

一个变量名只能声明一次，不允许多次声明一个变量

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let height = 180;
      //   声明height这个变量，并且把180这个数据放到height这个盒子里面
      height = 190;
      //   更新变量，又把190这个数据放到height这个盒子里面
      console.log(height);
    </script>
  </body>
</html>

2.4声明多个变量

多个变量之间用逗号隔开
注意：建议声明变量的时候分开写

3.变量的本质

通俗的理解和梳理，变量就是一个酒店中的房间，而变量名就是这个房间的编号，而这个酒店就是计算中存储数据的地方，叫内存

专业	俗称
内存	酒店
房间	变量
房间号	变量名

4.变量命名规则与规范

4.1变量命名规则

不能使用关键字
关键字：有特殊含义的字符，比如：let、var、if、for
只能使用下划线、字母、数字、$组成，并且数字不能开头
字母严格区分大小写，Height和height是两个完全不同的变量

4.2变量命名规范

起的变量名需要有意义
遵守小驼峰命名法
第一个单词首字母小写，后面每个单词首字母大写
例如：userName

5.变量拓展-数组

5.1基础知识

5.1.1定义

数组是一种将一组数据存储在单个变量名的方式

5.1.2声明

let 数组名[数据1，数据2，数据3，数据4，...数据n]

数组是按照顺序保存的，所以每一个数组元素都有自己的编号，从0开始
数组可以存储任意类型的数据

5.1.3数组的使用

数组名[序号（索引号）]
注意：序号是从0开始的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = [10, 60, 90];
      let names = ["兰亭序", "丢了你", "永不失联的爱"];
      console.log(arr[2], names[0]);
    </script>
  </body>
</html>

5.1.4相关术语

元素：数组中保存的每个数据
下标：数组中数据的编号
长度：数据中数据的个数，通过数组的length属性获得

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let date = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      console.log(date[6]);
      console.log(date.length);
    </script>
  </body>
</html>

常量

1. 常量的基本使用

1.1概念

使用const声明的变量称为常量

1.2使用场景

当我们需要一个变量永远不在改变的时候，就可以用const来声明

1.3命名规范

不能使用关键字
关键字：有特殊含义的字符，比如：let、var、if、for
只能使用下划线、字母、数字、$组成，并且数字不能开头
字母严格区分大小写，Height和height是两个完全不同的变量
起的变量名需要有意义
遵守小驼峰命名法
第一个单词首字母小写，后面每个单词首字母大写
例如：userName

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const e = 2.78;
      // 常量的声明 关键字：const
      // 常量声明之后不允许再次赋值，并且在声明的时候必须赋值
      console.log(e);
    </script>
  </body>
</html>

数据类型

1. 数据类型

1.1基本数据类型

1.1.1数字类型

定义：
整数，小数，正数，负数统称为数字类型
注意：JavaScript是一种弱数据型的语言，只有赋值之后才知道是什么数据类型，而Java不一样，是强数据型的语言，只要有int num无论给不给赋值，都一定是整形数据
算术运算符：

+：求和
-：求差
*：求积
/：求商
%：取余（取模）

NaN代表一个计算错误
NaN是粘性的，任何对NaN的操作都会返回NaN

1.1.2字符串类型

定义：
通过单引号（‘’）、双引号（“”）、或者反引号（`）包裹的数据都叫字符串
推荐使用单引号，单引号和双引号没有实际区别
注意：

无论是单引号，双引号还是反引号必须成对使用
单引号和双引号可以互相嵌套
必要时使用转义符\，输出单引号或者双引号

字符串的拼接

符号：+可以实现字符串的拼接
口诀：数字相加，字符相连
注意：变量不需要加引号，加了就是字符串类型的数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let str = "sparkle";
      let str1 = "stirve";
      let str2 = `sparkle`;
      console.log(str, str1, str2);
      console.log(`五一好"无聊"`);
      外单内双的写法;
      console.log("我很'难过'");
      外双内单的写法;
      console.log("'同频共振'的人");
      let age = 18;
      document.write("我今年" + age + "岁");
      //   +用来拼接;
    </script>
  </body>
</html>

1.1.3模板字符串

场景：

拼接字符串和变量

语法：

用的是反引号（``）
内容拼接变量的时候，用${ }包住变量

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let age = 20;
      document.write(`我今年${age}岁了`);
     // 最外面用反引号包含，变量用${}包含
    </script>
  </body>
</html>

1.1.4布尔类型

定义：

计算机表示肯定或者否定的时候对应的事布尔型数据
有两个固定的值true和flase

1.1.5未定义类型

定义：
只是声明一个变量而没有给这个变量赋值，这个变量的默认值为undefined

1.1.5null类型

定义：
仅仅代表无，空或者值未知的特殊值

1.1.6未定义类型和null类型的区别

undefined表示没有赋值
null表示赋值了，但是内容是空的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let isCool = true;
      let ud;
      let obj = null;
      //  true, false是布尔型字面量;
      console.log(isCool);
      console.log(4 % 5 == 0);
      console.log(ud);
      //   未定义类型数据
      console.log(obj);
      //   空类型数据
      console.log(undefined + 1);
      //   NaN   undefined不知道里面是什么东西
      console.log(null + 1);
      //   1
    </script>
  </body>
</html>

2.检测数据类型

2.1控制台输出语句和检测数据类型

2.1.1控制台输出语句

控制台语句经常用于测试结果来使用
数字型和布尔型的数据字体颜色是蓝色，而字符串和undefined字体颜色是灰色

2.1.2通过`typeof`关键字检测数据类型

语法：

作为运算符：typeof x
函数形式：typeof(x)
注意：有无括号得到的结果是一样的，所以我们使用运算符形式的写法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let num = 10;
      console.log(typeof num);
      //   数字类型
      let str = "sparle";
      console.log(str);
      //   字符串类型
      let answer = true;
      console.log(answer);
      //   布尔类型
      let object = null;
      console.log(object);
      //   空类型
    </script>
  </body>
</html>

类型转换

1. 为什么需要类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能进行简单的加法运算
我们需要把一种数据类型的变量转换成我们需要的数据类型

2. 隐式转换

2.1定义

某些运算符被执行时，系统内部自动将数据类型进行转换

2.2规则

+号的两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符，比如-，*，/都会把数据转成数字类型

2.3缺点

转换类型模棱两可

2.4技巧

+号作为正号解析可以转换成数字型
任何数据和字符串 =相加==结果都是字符串

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log(1 + 1);
      //   结果是1
      console.log("sparkle" + 1);
      // 结果是sparkle1
      console.log(2 + 2);
      //   结果是4
      console.log("2" + 2);
      //   结果是22,读作二二
      console.log(2 - 2);
      //   结果是0
      console.log("2" - 2);
      //   结果是0,是-运算符，把数据'2'转换成数字类型
      console.log(+12);
      //   结果是12
      console.log(+"321");
      //   结果是321,把数据'321'转换成数字类型
    </script>
  </body>
</html>

3. 显式转换

3.1为什么需要显式转换

由于隐式转换规律并不清晰，大多都是经验总结的规律，通常根逻辑需要对数据进行显式转换

3.2定义

通过人为写出来的代码告诉计算机系统应该转换成什么类型

3.3转换成数字型

3.3.1Number(数据)

转成数字类型
如果字符串内容里有非数字，转换失败时结果为NaN（不是一个数字）

3.3.2parseInt(数据)

只保留整数

3.3.3parseFloat(数据)

可以保留小数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let str = "321";
      console.log(Number(str));
      //   强制转换成数字型数据
      let num = Number(prompt("请输入你的工资："));
      //   显式转换
      //   console.log(Number(num));
      console.log(num);
      let num1 = prompt("请输入你的年薪：");
      console.log(+num1);
      // 隐式转换
      let num2 = "3.14";
      console.log(parseInt(num2));
      //   只保留整数
      console.log(parseFloat(num2));
      //   可以保留小数部分
    </script>
  </body>
</html>

帆高#

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端——JavaScript基础学习【part 1】

是一种运行在客户端(浏览器)的编程语言,实现人机交互效果注意:JavaScript是一种编程语言,而HTML和CSS是一种标记语言在计算机中描述的事或者物10000 是个数字字面量'今天是五一’是字符串字面量[]是数组字面量{}是对象字面量变量就是一个在计算机中存储数据的容器数组是一种将一组数据存储在单个变量名的方式定义：只是声明一个变量而没有给这个变量赋值，这个变量的默认值为undefinedundefined表示没有赋值null表示赋值了，但是内容是空的let ud;
复制链接

扫一扫