【JavaScript】| 01 JavaScript基础 | day01

非机动车坡道

已于 2024-03-21 23:18:12 修改

阅读量1k

点赞数 26

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

于 2024-03-21 22:48:42 首次发布

本文链接：https://blog.csdn.net/qq_56595037/article/details/136913122

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

00 JavaScript介绍

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

作用：① 网页特效；②表单验证；③数据交互；④服务端编程（node.js）

组成：ECMAScript、Web APIs

ECMAScript：规定了js基础语法核心知识，如变量、分支语句、循环对象、对象等等。

Web APIs：由 DOM 和 BOM 组成。
DOM（页面文档对象模型）：操作文档，如对页面元素进行移动、大小、添加删除等操作。

BOM（浏览器对象模型）：操作浏览器，如页面弹窗、检测矿口宽度、存储数据到浏览器等。

JavaScript权威网站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

JavaScript书写位置

方法1：内部JavaScript

规范：script标签写在</body>上面

<body>
  <script>
    alert("JavaScript World")
  </script>
</body>

方法2：外部JavaScript

<body>
  <script src="./index.js"></script>
</body>

方法3：内联JavaScript

<body>
  <button onclick="alert('you click me just now')">点击我</button>
</body>

JavaScript注释

单行注释 //

多行注释 /**/

JavaScript结束符

分号；（可以省略结束符，为了风格统一，要么都加，要么都不加）

JavaScript输入输出语法

输出语法

语法1：向body内输出内容

document.write("无标签")
document.write("<h1>有标签</h1>")

语法2：页面弹出警告对话框

alert("弹出")

语法3：控制台输出

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

输入语法

语法1：prompt

prompt("请输入姓名：")

JavaScript字面量

工资是1000，1000就是数字字面量

"JavaScript"，字符串字面量

还有数组字面量，对象字面量等等

01 变量

旧版本用var，现在用let

定义变量

<script>
  let num = 20
  console.log(num)

  let age = 17, uname = 'pink'
  console.log(age, uname)
</script?

更新变量

<script>
  let age = 18
  age = 19
  console.log(age)
</script>

变量交换

<script>
  let num1 = 20
  let num2 = 10
  let temp
  temp = num1
  num1 = num2
  num2 = temp
  console.log(num1, num2)
</script>

变量命名规范

规则

① 不能使用关键字

② 只能用下划线、字母、数字、$组成，且数字不能开头

③ 字母严格区分大小写

规范

① 起名有意义

② 遵守小驼峰命名法，如userName

02 数组

元素：数组中保存的每个数据

下标：数组中数据的编号

长度：数组中数据的个数，通过数组的length属性获取

声明数组

<script>
  let arr = [10, 20, 30]
  let strArr = ["a", "b", "c"]
</script>

获取数组的值和长度

<script>
  arr = [10, 20, 30]
  console.log(arr[0])
  console.log(arr.length)
</script>

03 常量

用const定义，不允许重新赋值，且声明时必须赋值

声明常量

<script>
  const PI = 3.14
  console.log(PI)
</script>

04 数据类型

基本数据类型

number、string、boolean、undefined、null

数字类型 - number

包括JavaScript中的正数、负数、小数、整数等。

涉及数字类型，就要了解算术运算符👇

① + ：求和

② - ：求差

③ * ：求积

④ / ：求商

⑤ % ：取模（求余数） 👉 开发中经常作为某个数字是否被整除

算术优先级规则：

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用（）可以提升优先级

字符串类型 - string

通过单引号、双引号或者反引号包裹的数据都是字符串，单双引号没区别，推荐单引号。

字符串拼接：用 “+” 号

模板字符串：用反引号结合 ${} 使用

<script>
  let age = 18
  document.write(`我今年${age}岁了`)
</script>

布尔类型 - boolean

它包含两个值：true 和 false。

未定义类型 - undefined

只声明变量，不赋值的情况下，变量的默认值为 undefined

<script>
  let obj
  console.log(obj)
</script>

空类型 - null

<script>
  let obj = null
  console.log(obj)
</script>

检测数据类型

typeof 变量

<script>
  let obj = 18
  console.log(typeof obj)
</script>

类型转换

隐式转换

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

规则：

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

技巧：

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

显示转换

自定义转换类型

Number
- 转成数字类型
- 如果字符串内容里有非数字，转换失败时结果为NaN，即不是一个数字
- NaN也是number类型的数据，代表非数字
parseInt
- 只保留整数
parseFloat
- 可以报留小数

<script>
  let str = '123'
  console.log(Number(str))
  console.log(Number('pink'))
  // let num = Number(prompt('输入年薪'))
  // let num = +prompt('输入年薪') // number
  console.log(parseInt('12px'))
  console.log(parseInt('12.34px'))
  console.log(parseInt('12.94px'))
  console.log(parseInt('abc12.94px'))

  console.log(parseFloat('12px')) // 12
  console.log(parseFloat('12.34px')) // 12.34
  console.log(parseFloat('12.94px')) // 12.94
  console.log(parseFloat('abc12.94px'))
</script>