JavaScript 基础

最新推荐文章于 2024-08-11 18:40:36 发布

前端六和四

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量158

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_66156767/article/details/124903264

版权

JavaScript 是什么？

是一种在游览器 (客户端) 的弱编程语言，实现人机交互效果。

JavaScript 主要作用

1、网页特效 (监听用户的一些行为让网页作出对应的反馈，比如：轮播图)

2、表单验证 (针对表单数据的合法性进行判断)

3、数据交互 (获取后台的数据, 渲染到前端)

4、服务端编程 (node.js)

JavaScript 主要由什么组成？

别看名字里带着 Java 实际上和 Java 没什么太大的关系，主要组成有：ECMAScript、Web APIs

ECMAScript

规定了js基础语法核心知识。

比如：变量、分支语句、循环语句、对象等等

Web APIs

主要有：DOM 和 BOM

DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

推荐权威网站：MDN (MDN Web Docs)

JavaScript 书写位置

一般都是写在 body 标签里最底下的位置

alert('') 警告弹窗

<!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>
    alert('你知道这五年我是怎么过的吗！？')
  </script>
</body>

</html>

JavaScript 的注释

单行注释 //

多行注释 /* */

<!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>
   // 单行注释
    /* 多行注释
       多行注释
       多行注释*/
  </script>
</body>
</html>

JavaScript 结束符

以英文分号结尾 ( ; ) 也可不写，在实际的开发中一般也是省略不写 (主要是尤大大建议不写)

JavaScript 的书写样式

有三种书写方式 (和 css 一模一样) ：行内样式、内部样式、外联样式，具体代码如下：

<!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('纯纯大冤种')">G了</button>
  <!-- 内部样式 -->
  <script>
    alert('你知道这五年我是怎么过的吗！？')
  </script>
  <!-- 外部样式 -->
  <script src="./index.js">
    // 外部的 js 样式引入里不要写任何内容 会被游览器忽略而不显示
  </script>
</body>

</html>

常见的 JavaScript 输入输出语句

输出语句1：页面输出

语法： document.write('内容')

document.write('要输出的内容')

注意：如果书写的是 html 标签或内容一样会被解析！！！

document.write('要输出的内容<strong>加粗</strong>')

输出语句2：页面警告框

语法： alert('输出的内容')

alert('弹出警告框')

输出语句3：控制台输出

语法：console.log('控制台输出')

console.log('控制台输出')

输入语句1：弹出对话输入框

语法：prompt('请输入内容')

prompt('请输入内容')

JavaScript 代码执行顺序：

按 HTML 文档流顺序执行 JavaScript 代码

alert() 和 prompt() 它们会跳过页面渲染先被执行

JavaScript 变量

变量声明也可以叫定义变量

语法：let 变量名

let uname

let 是比较新的写法，以前使用的都是 var ，但是 var 声明变量本身是一个 BUG 他甚至可以不声明，直接赋值和调用。

变量赋值

语法：变量名 = 赋的值

let variate = null
variate = 1

可以通过变量名来获得变量里的数据，代码如下

let variate = null
variate = 1
alert(variate)

注意：let 不允许重复声明同一个变量

声明多个变量

语法：变量名1 = 赋的值1,变量名2 = 赋的值2,……变量名n = 赋的值n

let variate = null,num = 1

语法和显示均不会有问题，但是在阅读代码时会很混乱，通常开发时不会这么写

变量的本质

变量的本质就相当于一个用来放东西的空间或者盒子

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

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

数据类型

JavaScript 的数据类型有五种：number、string、boolean、undefined、null

number 数字类型数据

数字可以有很多操作，比如，乘法 * 、除法 / 、加法 + 、减法 - 以及取余 % 等等，所以经常和算术运算符一起

数学运算符也叫 算术运算符 ，主要包括加、减、乘、除、取余（求模）

算数运算符的优先级顺序 (基本和小学数学一样)：

1、有 () 先算 () 内的

2、乘、除、取余同级从左到右

3、加减乘除混合在一起的先乘除后加减

string 字符串数据类型

通过单引号、双引号、反引号包起来的数据都叫字符串类型，单双引号无本质上的区别，单双引号可以互相嵌套但是不能自己嵌套自己即：外单内双或者外双内单，实在想用一样的可以使用 / 转义，反引号在键盘 ESC 正下方感叹号的左边，代码如下：

<!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>
    // 字符串类型 string
    let str =  "法外狂徒"
    let sr1 =  '张三'
    // 反引号 tab 上面数字 1 左边那个就是
    let str2 =  `这五年`
    // 引号里包的数字也算字符串类型
    let str4 = "10"
    // 单双引号嵌套 外单内双 或者外双内单 实在想用一样的引号可以使用转义 \
    let str7 = "你知道这\"五年\"我是怎么过的马"
    let str5 = "你知道这'五年'我是怎么过的马"
    let str6 = '你知道这"五年"我是怎么过的马'
    let str8 = "你挑的嘛，偶像"
  
  </script>
</body>
</html>

模板字符串

以往我们拼接字符串只能使用 + 相连，而现在我们可以使用模板字符串：使用反引号包住所有内容变量名用 ${} 包裹，代码如下：

let name = '渣渣辉'
//原来的标准写法
document.wirte('我是' + name + '是兄弟就来砍我')
//模板字符串写法 使用反引号
document.wirte(`我是${name}是兄弟就来砍我`)

boolean 数据类型 (布尔类型)

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

undefined 数据类型

未定义是比较特殊的类型，只有一个值 undefined

什么情况出现未定义类型？

只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为

undefined，代码如下

let name  // 声明一个变量但是不赋值
document.write(name) // 会输出 undefined

开发中的使用场景：

我们开发中经常声明一个变量，等待传送过来的数据。

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

null 数据类型

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

null 和 undefined 区别：

undefined 表示没有赋值

null 表示赋值了，但是内容为空

null 开发中的使用场景：

官方解释：把 null 作为尚未创建的对象

大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

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

typeof of 运算符可以返回被检测的数据类型。他支持两种语法：

1、作为运算符： typeof x （常用的写法）

2.、函数形式： 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>
    // typeof关键字可以检测数据类型//1运算符typeof变量推荐使用//2-函数形式typeof(变量)
    let num = 10
    console.log(typeof num)// numberconsole.l1og(typeof (num))// numberlet str = 'pink'
    console.log(typeof str)// stringLet bool = true
    console.log(typeof bool)// booleanlet age
    console.log(typeof age)// undefinedlet obj = null
    console.log(typeof obj)//object
    //为什么检测null数据类型得到的是object?
    //原因是因为js底层的语言设计缺陷所导致的,后期有相关开发人员提供解决此bug的方案,但是被js官方无情的拒绝
    let num1 = prompt('请输入数字')
    console.log(typeof num1)//string
  </script>
</body>
</html>

JavaScript 数据类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

坑: 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

此时需要转换变量的数据类型。

通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型

隐式数据类型

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
除了+以外的算术运算符比如 - * / 等都会自动把数据转成数字类型

减、乘、除、取余都会隐形转换数据类型，也就是说让字符串和数字进行减、乘、除、取余操作，如果引号里包裹的是数字那就可以正常进行运算，如果是字符类型运算结果就会是 NaN (not a number)

+ 号较为特殊，在 JavaScript 里它也可以作为字符串的连接符使用，所以字符串和数字做加法会让两个数据结合在一起，代码和运行截图如下所示：

<!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')//控制台输出结果 0
    console.log(6 / '2')//控制台输出结果 3
    console.log(6 * '4')//控制台输出结果 24
    console.log(24 % '4')//控制台输出结果 0
    console.log(1 - '字符串')//控制台输出结果 NaN not a number
    // + 号两边只要有一个是字符串，都会转换为字符串类型
    console.log(1 + "1") //控制台输出结果 11
    // 任何数字和字符串相加结果都是字符串
    console.log("马哥" + 1) //控制台输出结果 强哥1
    console.log("马哥" + "1") //控制台输出结果 强哥1
    console.log(3 + 6) //控制台输出结果 9
    // + 号被当做正号解析时会被转换为数字
    console.log(1 + +'123') //控制台输出结果 数字 124

  </script>
</body>
</html>