JavaScript基础(一)

最新推荐文章于 2024-08-22 14:32:34 发布

赛文奥特曼66

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量357

点赞数 1

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

本文链接：https://blog.csdn.net/qq_48666786/article/details/126922588

版权

一.JavaScript介绍

1.JavaScript是什么

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

2.JavaScript作用

JavaScript作用:确定网页的行为交互(教网页做事情)

3. JavaScript组成

JavaScript由ECMAScript、DOM、BOM三部分组成
ECMAScript - JavaScript的核心:

ECMAScript定义了JavaScript的语言规范
JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

DOM - 文档对象模型:

一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

BOM - 浏览器对象模型

一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

4.JavaScript书写位置

1.内部样式(内嵌式)

通过 script 标签包裹 JavaScript 代码
如果js代码较少较少的话可以使用,比较复杂的话不推荐

<script>
// 页面弹出警示框
alert('JavaScript书写位置')
</script>

2.外部样式

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

// my.js
alert('JavaScript书写位置')

<script src="my.js">
// 中间不要写内容
</script>

3.行内样式

<button οnclick="alert('点我')">点我了解JavaScript</button>

二.注释和结束符

1.单行注释

使用 // 注释单行代码
通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：
快捷键:ctrl + /

//这是单行注释

//一次只能注释一行

2.多行注释

使用 /* */ 注释多行代码
快捷键:shift + alt + A (或ctrl+shift+/)

/* 这是多行注释

一次可以注释多行代码*/

3.结束符

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

三.输入和输出语法

1.输出

将数据显示到网页

document.write(' JavaScript')

在网页弹出一个提示框，输出数据

alert('JavaScript')

控制台输出语法，程序员调试使用

console.log('JavaScript')

2.输入

在网页弹出一个输入框，让用户输入数据

prompt('请输入您的姓名')

在网页弹出一个确认框，让用户输入确认/取消二选一

confirm("你确定选择这个产品吗?")

四.数据类型

1.数据类型介绍

1. 为什么要有数据类型 ?

JavaScript不能识别所有的数据，任何编程语言编译器不同, 都有属于自己的数据类型

2. 数据类型分类:

基本数据类型:数字字符串布尔未定义空
引用数据类型:函数数组对象

2.基本数据类型


    // 1 数字型(Number)
    //number类型作用 ： 数学计算
    console.log(123456) // 整数
    console.log(12.345) // 小数
    // 2 字符串类型（string）
    // 一切以  单引号''  双引号""  反引号``   包起来的内容
    //string类型作用 ： 用于显示网页文本
    console.log('我爱JavaScript')
    console.log("学好js,年薪20000w")
    console.log(`js是世界上最好的语言`)
    console.log('我爱'python'')// 报错
    console.log('我爱"JavaScript"')//正确
    // 3 布尔类型（boolean） true(真) 和 false(假)
    //boolean作用 : 条件判断
    console.log(true)
    console.log(false)
    // 4 未定义(undefined) 没有值
    console.log(undefined)
    // 5 空类型 (null ) 空值
    console.log(null)

3.数据类型检测

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

作为运算符： typeof 数据（常用的写法）
函数形式： typeof(数据)

    console.log(typeof 123) //Number
    console.log(typeof '123')  //String
    console.log(typeof true)  //Boolean
    console.log(typeof undefined)  //undefined
    console.log(typeof null) //object

五.变量

1.变量含义

变量就是计算机中用来存储数据的容器,它可以让计算机变得有记忆.简单理解变量就是一个装东西的盒子
变量作用:用来存放数据

2.声明变量

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

  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
  </script>

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

3.变量赋值

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

  <script> 
   // 1 声明变量: let 变量名
    let age  // 声明变量未赋值 undefined

    // 2 变量赋值: 变量名 = 值  
    // = 理解为赋值  将等号右边的值赋给左边
    age = 20

    // 3 变量取值: 变量名
    console.log(age)

    // 4 变量初始化: let 变量名 = 值
    // 声明变量同时赋值就叫做变量初始化
    let num = 10
    console.log(num)
    // 中文变量名 强烈不推荐 有低版本浏览器兼容性问题
    let 大象 = 18
    console.log(大象)
  </script>

4.变量更新

1.变量更新

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

//  1 更新变量 先销毁旧值 然后存入新值(喜新厌旧)
  let num = 20
  num = 30
  console.log(num)
// 2 let 不允许多次声明一个变量
let num = 100 
//3 变量之间赋值 ： 取出变量的数据拷贝一份，然后复制
let num1 = 10
// 变量赋值的时候不是把原始值给别人,而是复制一份
let num2 = num1
console.log( num1,num2)  //10 , 10

2.声明多个变量

多个变量之间使用逗号隔开

// 声明多个变量
let age = 18, uname = '吴彦祖'
console.log(age, uname)
//提倡声明方式 一行声明一个变量,可读性比较好
let age = 18
let uname = '吴彦祖'
console.log(age, uname)

5.交换变量

有2个变量： num1 里面放的是 10， num2 里面放的是20,最后变为 num1里面放的是 20 ，num2里面放的是 10

// 1 声明 num1 num2 2个变量并赋值
let num1 = 10
let num2 = 20
// 2 声明临时变量
let temp
temp = num1
num1 = num2
num2 = temp
console.log(num1, num2)

6.变量命名规范

关于变量的名称（标识符）有一系列的规则需要遵守：

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

注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语

	let age = 18 // 正确
    let age1 = 18 // 正确
    let _age = 18 // 正确

    // let 1age = 18; // 错误，不可以数字开头
    let $age = 18 // 正确
    let Age = 24 // 正确，它与小写的 age 是不同的变量
    // let let = 18; // 错误，let 是关键字
    let int = 123 // 不推荐，int 是保留字

7.常量

概念：使用 const 声明的变量称为“常量”
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let
命名规范：和变量一致

六.运算符与表达式

1.表达式

表达式：由运算符组成的式子,一定会有运算结果(运算数据)

表达式一定会有运算结果

console.log(1 + 2)
console.log(4 > 5)
let num = 1 + 2

2.算术运算符

数学运算符也叫算术运算符，主要包括加(+)、减(-)、乘(*)、除(/)、取余(%)

// 1 算术运算符(用于数学的算术运算) 
// + - * / %(取模)
// 运算符 运算的符号 
console.log(1 + 1) // 2
console.log(1 * 1) // 1
console.log(1 / 1) // 1
console.log(6 - 2) //4 
// % 取模 取余
console.log(4 % 2) // 0
console.log(10 % 3) // 1

3.字符拼接

+运算符可以实现字符串的拼接
口诀：数字相加，字符相连

console.log(1 + 1) // 2
console.log('我叫' + '赛文奥特曼') // 我叫赛文奥特曼
// +号只要遇到字符串,就是连接符(拼接符)
console.log('赛文' + 20)
let age = 25
// 控制台输出我今年xx岁了
// 无法取到变量的值,当做字符串的一部分
console.log('我今年age岁了')
console.log('我今年' + age + '岁了')

4.模板字符串

作用字符串和变量进行拼接
模板字符串外面用`` 里面 ${变量名}

// 作用 字符串和变量进行拼接
// 使用方式:外面用`` 里面${变量名}
let age = 20
document.write(`我今年${age}岁了`)

5.赋值运算符

赋值运算符：对变量进行赋值的运算符
赋值运算符(=)将等号右边的值赋予给左边, 要求左边必须是一个容器
其它赋值运算符:+=,-=,*=,/=,%=;使用这些运算符可以在对变量赋值时进行快速操作

let num = 1
// 采取赋值运算符
// num = num + 1
// num += 1
 num += 3
console.log(num)

6.一元运算符

一元运算符:正负号
前置自增:++i
后置自增:i++

 /* 前置自增 后置自增 */
// 每次都会进行加1操作 
// ++i   i++
let i = 1
++i // i+=1
console.log(i) // 2
// 后置自增
let j = 1
j++  // j+=1
console.log(j) // 2
// 实际开发中 后置用的更多

7.比较运算符

应用场景:比较两个数据大小、是否相等

>：左边是否大于右边
<：左边是否小于右边
>=：左边是否大于或等于右边
<=：左边是否小于或等于右边
==：左右两边值是否相等
===：左右两边是否类型和值都相等(全等)
!==：左右两边是否不全等(不全等)
!=: 不等

比较结果为boolean类型，即只会得到 true 或 false

 /* 比较运算的结果为布尔类型 只会返回true或false */
    console.log(3 > 4) // false
    console.log(3 >=3) // true 
    // == (相等) 只比较值 不比较数据类型
    console.log(4 == 4) // true 
    console.log(4 == '4')// true 
    //  === (全等)
    // 判断值和数据类型 都一样才可以
    // 先比较类型 后比较值 
    /* 以后判断是否相等 请使用 === */
    console.log(2 === '2') // false
    // !== (不全等) 判断值和数据类型
    console.log(4  !== '4') // true
    //  != 不等 
    // != 和 ==(相等) 结果一定相反
    console.log(4 != '4') // false

8.逻辑运算符

逻辑运算符用来解决多重条件判断

 /* 1 逻辑与 &&   一假则假  二元运算符
    // 只要有一个不满足  就是 false 
    */
    console.log(true && true) // true
    console.log(false && true)// false
    console.log(3 < 5 && 3 > 2) // true
    console.log(3 < 5 && 3 < 2) // false
    console.log('---------------')
    /* 2 逻辑或 || 一真则真
     只要有一个满足 就为true 
      */
    console.log(true || true) // true
    console.log(false || true) // true
    console.log(false || false) // false
    console.log('---------------')
    // 3 逻辑非 !    取反  一元运算符
    //取反
    console.log(!true) // false
    console.log(!false) // true
    let num = 6 
    console.log(num > 5 && num < 10) // true

9.运算符优先级

优先级	运算符	顺序
1	小括号	( )
2	一元运算符	++ -- !
3	算数运算符	先 * / 后+ -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 后 \|\|
7	赋值运算符	=
8	逗号运算符	,