JavaScript基础

天希oyyy

已于 2024-05-26 19:43:30 修改

阅读量1.9k

点赞数 33

文章标签： javascript 开发语言 ecmascript

于 2024-05-25 22:50:30 首次发布

本文链接：https://blog.csdn.net/m0_75079074/article/details/139204501

版权

JavaScript基础

JS介绍

1，JS是一种运行在客户端（浏览器）的编程语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等交互效果。

2，JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中。

两种写入方式：

内部样式：通过 script 标签包裹 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来传智播学习前端技术！')
  </script>
</body>
</html>

外部样式：一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入。

//比如再 demo.js这个文件里有写了这样的代码
document.write('嗨，欢迎来传智播学习前端技术！')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

注释和结束符

通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：

单行注释

使用 // 注释单行代码

多行注释

使用 /* */ 注释多行代码

结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

实际开发中有许多人主张书写 JavaScript 代码时省略结束符。

输入和输出语句

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

输出语句

// 1. 输出语句
//  1.1 alert 页面弹出警示框
// alert('你好,js')
// 1.2 document.write 向页面文档输入内容 显示到页面body标签之内, 可以正常的解析标签
document.write('今日特价')
document.write('<h4>今日特价</h4>')
// 1.3 console.log 给我们程序员调试使用的   console 控制台
console.log('给咱们程序员使用的')

输入语句

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 输入输出</title>
</head>
<body>
  
  <script> 
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容');

    // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')
  </script>
</body>
</html>

变量

变量是什么&基本使用

理解变量是计算机存储数据的“容器”，掌握变量的声明方式

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

声明

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
  </script>
</body>
</html>

关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

赋值

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
    // 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18
    // 这样 age 的值就成了 18
    document.write(age)
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!'
    alert(str);
  </script>
</body>
</html>

变量更新

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

// 1.更新变量
let age = 18
age = 19
// 注意: 不要多次声明同一个变量
// let age = 19
console.log(age)

声明多个变量

语法：多个变量中间用逗号隔开。

说明：看上去代码长度更短，但并不推荐这样。为了更好的可读性，一般情况下我们一行只声明一个变量。

// 2. 一次声明多个变量的简写方式 (了解 能认出来就可以了)
// let uname = 'pink老师', sex = '男'
let uname = 'pink老师'
let sex = '男'
console.log(uname, sex)

let 和 var 区别

在较旧的JavaScript，使用关键字 var 来声明变量，而不是 let

var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它。

let 为了解决 var 的一些问题。

var 声明一些不合理的地方：

可以先使用在声明 (不合理)
var 声明过的变量可以重复声明(不合理)
比如变量提升、全局变量、没有块级作用域等等

结论：

var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let

变量的本质

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

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

变量名命名规则

关于变量的名称（标识符）需要遵守：

规则：

只能是字母、数字、下划线、$，且不能能数字开头
字母区分大小写，如 Age 和 age 是不同的变量
JavaScript 内部已占用于单词（关键字或保留字）不允许使用
尽量保证变量具有一定的语义，见字知义

规范：

起名要有意义
遵守小驼峰命名法
1. 第一个单词首字母小写，后面每个单词首字母大写。例：userName

常量

是什么：也是一个容器，用于保存数据的

和变量的区别：常量里面保存的值是不允许改变的

使用场景：当某个值永远不会改变的时候，我们可以使用常量来保存，目的为了程序的安全。

// 常量： 也是一个容器用来保存的数据
const pi = 3.14
console.log(pi)
// 注意事项：
// 1. 常量里面的值是不允许修改的
pi = 3.141592653
console.log(pi)
// 2. 常量必须要初始化(声明常量的时候必须要赋值)
// const url

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

数据类型

计算机世界中的万事成物都是数据。

生活中会把物品进行归类，不同的物品不能混淆在一起。

计算机程序可以处理大量的数据，方便程序员的使用数据。、

数字型和字符串型

数字型：

即我们数学中学习到的数字，可以是整数、小数、正数、负数

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

字符串：

被引号包裹的一段文字信息

JS中的字符串:

通过单引号（ ‘’）、双引号（ “”）或反引号( `` ) 包裹的数据都属于字符串

单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）

一定注意变量名不要加引号，否则认为是字符串

// 1. 数字型： 用于计算的， js数字类型包含： 整数、小数
// let num1 = 18
// let num1 = -18
let num1 = 18.88
// let num1 = -18.88
console.log(typeof num1)  // number   typeof 关键字检测数据类型

// 2. 字符串类型: 被引号包裹的一段文字信息   单引号 双引号  反引号
let goods = '笔记本电脑'
let address = "黑马程序员"
console.log(typeof goods)  // string
console.log(typeof address)  // string
let color = `粉红色`
let tel = '13612342234'
// 2.1 变量是不能加引号的,变量加了引号就不是盒子了，是一个字符串
console.log('goods')
// 2.2 字符串嵌套的问题. 不能嵌套自己, 外单内双  或者 外双内单
console.log('今日特价"跳楼大甩卖"速速抢购')
console.log("今日特价'跳楼大甩卖'速速抢购")

模板字符串

使用场景:

拼接字符串和变量

语法

// 1. 字符串拼接
let age = 91
// console.log('老师今年' + age + '岁')
console.log('老师今年' + age + '岁')

// 2. 模板字符串
console.log(`老师今年${age}岁`)
// 3. 模板字符串里面的字符串可以换行

注意：反引号中间的字符串可以换行的

布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    //  pink老师帅不帅？回答 是 或 否
    let isCool = true // 是的，摔死了！
    isCool = false // 不，套马杆的汉子！

    document.write(typeof isCool) // 结果为 boolean
  </script>
</body>
</html>