JavaScripts笔记I(基础)

saddhu.

已于 2024-01-20 22:11:59 修改

阅读量854

点赞数 24

文章标签：笔记 js javascript js基础

于 2024-01-17 18:10:24 首次发布

本文链接：https://blog.csdn.net/2303_77073508/article/details/135657324

版权

JavaScripts基础

js是一门编程语言，可以实现很多的网页交互效果。

JavaScript脚本语言具有以下特点:

（1）脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。

（2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

（3）简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

（4）动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

（5）跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。 [4]不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较倾向于使用JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。

而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖JavaScript在客户端进行支持。

js书写位置

内部 js

直接写在html中，用scripts标签包住，一般scripts标签写在body上面

外部js

在html文件外部创建一个js文件，然后再在html文件中通过scripts标签调用；scripts标签中无需再写代码，否则会被忽视
```
<body>
    <script src="./day01.js"></script>
</body>
```
行内js

代码写在标签内部多用于vue框架

js注释

单行注释
- 符号：//
- 快捷键 ctrl+/
块注释
- 符号：/* */
- 快捷键：shift+alt+a

注意点：结束符号是" ; " 结束符号可以省略不写

输入输出语句

输出语句

语句1

document.write(“hello world”)

作用：向body内输出内容

语句2 ***

alert(“hello world”)

作用：页面弹出警告对话框

语句3

console.log(‘控制台打印’)

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

输入语句

语句1 ***

prompt(‘please write you name？’)

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

执行顺序：

按html文档流顺序执行js代码
alert()和prompt()他们会跳过页面渲染先被执行

变量

抽象：存储数据的容器

语法：

let 变量名

let 是关键字(允许、许可、让、要)，所谓关键字就是系统提供专门用来声明变量的词语

变量赋值初始化：let num =20

注意：声明变量统一使用let

var声明变量缺点：

可以先使用再声明
var声明过的变量可以重复声明
变量提升，全局变量，没有块级作用域等等

数组

声明语法

let  array = ['a','b','c']
//同样通过下标索引获取元素

常量

概念：使用const声明的变量称为常量

使用场景：当某个变量永远不会改变的时候就可以使用const来声明，而不是使用let

命名规范和变量一致

常量使用：

声明：

const G = 10010
console.log(G)

注意：常量不允许重新赋值，声明常量的时候必须初始化(赋值)

不需要重新赋值的数据可以使用常量const

数据类型

js是弱类型语言，变量属于哪种数据类型，只有赋值之后我们才能确认；

不同于java强类型语言

基本数据类型
- Number 数字型
  - 整数、小数、负数、正数
```
let age = 18 //整数
let num = 3.14 //小数
```
  - 算数运算符与java相同
  - NaN
    - 代表计算错误，它是一个不正确或者一个未定义的数学操作所得到的结果。 NaN是粘性的，任何对NaN的操作都会返回NaN。
```
console.log("你好" - 2) //返回NaN
console.log(NaN - 2) //返回NaN
```
- String 字符串型
  - 在js中无论是单引号、双引号、反引号包裹的数据都叫字符串
  - 字符串拼接一样使用+号
  - 模板字符串
    - 使用场景：
      - 拼接字符串和变量
      - 拼接变量较多比较麻烦
      - 语法：
        
        字符串使用反引号包裹
        变量使用${变量}
        
        let age =18 document.write(`今年我${age}岁了`)
- boolean 布尔型
  - 表示肯定或者否定时在计算机中对应的是布尔类型，他只有两个固定的值true和flase，表示真或者假
- undefined 未定义型
  - 比较特殊的类型只有一个值undefined
  - 只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少直接为某个变量赋值为undefined
```
let age //为声明变量
document.write('age') //输出undefined
```
- null 空类型
  - js中的null 仅表示一个代表"无"、”空“、”值未知“的特殊值
  - null 一般作为尚未创建的对象
```
let age =null 
console.log(age) //输出结果为null
typeof  age //输出结果的数据类型为对象
```
引用数据类型
- object 对象
通过typeof关键字可以检测数据类型
1. 作为运算符 typeof age
2. 函数形式 typeof(age)
一般都是用第一种形式

类型准换

JavaScript是一种动态类型的编程语言，它的变量不需要在声明时指定类型，可以根据变量的值自动推断类型。JavaScript中有许多数据类型，包括基本数据类型和复杂数据类型。

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

隐式转换

JS中的隐式转换指的是在进行运算或比较时自动将数据类型从原始值（如字符串、布尔值等）转换为其他数据类型。而显式转换则需要通过特定的函数来手动进行转换。

以下是常用的隐式转换示例及对应的结果：

当两个不同类型的操作数相加时，会先将其中一个操作数转换成与另一个操作数相同的类型再进行计算。

示例：let result = "5" + 3; // 输出结果为 “53”
当使用乘法运算符 * 连接两个字符串时，会将第二个操作数视为重复次数并返回新的字符串。

示例：let result = "hello" * 3; // 输出结果为 “hellohellohello”
当使用关系运算符 <, >, <=, >=, ==, !=, ===, !== 进行比较时，会根据操作数的类型进行隐式转换后再进行比较。

示例：console.log(true == 1); // 输出结果为 true
当调用内置函数 parseInt() 或 parseFloat() 时，可以将字符串转换为整数或浮点数。

示例：let numStr = "10"; let numInt = parseInt(numStr); console.log(typeof numInt); // 输出结果为 number

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

注意当当+号作为正号是会将数据转换成数字类型

//+号做拼接
console.log("2"+"2") //输出为22
//+号做正号 加号
console.log(2+"2") //输出为22
console.log(+"2"+"2") //输出为22

缺点是转换类型不明确

显式转换

以下是常用的显式转换示例及对应的结果：

使用全局函数 Number() 将任意类型的变量转换为数字类型。

示例：let strNum = "10"; let num = Number(strNum); // 输出结果为 10 (number)
使用全局函数 String() 将任意类型的变量转换为字符串类型。

示例：let boolValue = false; let strBool = String(boolValue); // 输出结果为 “false” (string)
使用全局函数 Boolean() 将任意类型的变量转换为布尔类型。

示例：let zero = 0; let isZero = Boolean(zero); // 输出结果为 false (boolean)

例如转换成数字类型

Number(数据)
- 如果转换时String中有非数字，转换失败时显示结果为NaN即不是一个数字
- NaN也是Number类型的数据，代表非数字
parselnt(数据)
- 只保留整数
parseFloat(数据)
- 保留整数和小数

自增运算符

前置先加再用、后置先用再加

let i= 1 
console.log(++i + 2 ) //输出结果为4  i先加1再计算
console.log(i++ + 2 ) //输出结果为3  i先参与计算

BUT 在独立使用的时候两者结果并灭有区别

比较运算符

js中需要注意的比较运算符：

==：左右两边值是否相等
===：左右两边时候类型和值都相等

在js开发中比较是否相等推荐使用 ===：

同样比较String 比较的是其对应的ASCII码

运算符比较级

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

一元运算符中！优先级很高

分支语句

if
三元运算符
switch

if分支语句

if单分支

<script>
    //注意这边类型转换我们可以直接在前面写一个+号
    // let score = +( prompt("please you score？"))
    let score=Number( prompt("please you score？"))
    if (score >= 700) {
        alert("you score >= 700")
    }
</script>

双分支语句

<script>
    //注意这边类型转换我们可以直接在前面写一个+号
    // let score = +( prompt("please you score？"))
    let score=Number( prompt("please you score？"))
    if (score >= 700) {
        alert("you score >= 700")
    }else {
        alert("you scoer <700 ")
    }
</script>

多分支语句

<script>
    //注意这边类型转换我们可以直接在前面写一个+号
    // let score = +( prompt("please you score？"))
    let score=Number( prompt("please you score？"))
    if (score >= 90) {
        alert("you score is 优秀)
    }else if(score >=80) {
         alert("you score is 良好")
    }else if(score>=70) {
        alert("you score is 中等")
    }else {
        alert("you scoer 及格 ")
    }
</script>

三元运算符

语法：

条件 ?  满足条件时执行的代码 : 不满足条件时执行的代码

console.log(3>5?3:5) //返回值为5

数字补0案例

    let num =+("please print number")
    num =num <10 ? 0+num:num
	alert(num)

switch分支语句

语法：

    switch(sp){
        case '+':
            alert(num1+num2)
            break
        case '-':
            alert(num1-num2)
            break
        case '*':
            alert(num1*num2)
            break
        case '/':
            alert(num1/num2)
            break
            default:
                alert(`恁不输入加减乘除恁弄啥嘞`)
    }
//注意switch 需要配合break使用 不然会造成switch穿透

While循环

基本语法：

打印10遍abc

let i = 0 
while (i<10){
    document.write("abc <br>")
    i++
}

循环的退出

break 和continue 与java中作用相同

for循环

for (init value；终止条件；变量变化量){
	loop body
}

数组的增删改查

    <script>
        let arr = ['a','b','c']
        document.write(arr) //a,b,c
    </script>

改

找到对应下标直接重新赋值即可

    <script>
        let arr = ['a','b','c']
        // alter
        arr[0] = '1'
        document.write(arr) //1,b,c
    </script>

增

arr.push()

将一个或多个元素添加到数组的末尾，并返回该数组的新长度

    <script>
        let arr = ['a','b','c']
        // add
        document.write(arr.push('d'))//结果为4
        document.write(`<div>${arr}</div>`)//结果为a,b,c,d
    </script>

arr.unshift() 与push不同之处在于将新增内容添加到开头

删

arr.pop()

delete数组中最后一个元素，并返回该元素的值

    <script>
        let arr = ['a','b','c']
        // add
        document.write(arr.pop())//结果为c
        document.write(`<div>${arr}</div>`)//结果为a,b
    </script>

arr.shift()

删除第一个元素

    <script>
        let arr = ['a','b','c']
        // add
        document.write(arr.shift())//结果为a
        document.write(`<div>${arr}</div>`)//结果为b,c
    </script>

arr.splice(起始下标，数量)

arr.splice(start,deletecount)

    <script>
        let arr = ['a','b','c']
        // add
        document.write(arr.splice(1,2))//结果为b,c
        document.write(`<div>${arr}</div>`)//结果为a
    </script>

start 起始位置因为是下标索引所以从零开始
deletecount
- 表示从零开始删除几个，闭区间
- 不写默认从start删除到结尾

函数

function 函数名() {
    函数体
}

封装一个函数计算两数之和

function getsum(){
            let num1 = +(prompt(`请输入第一个数字`))
            let num2 = +(prompt(`请输入第二个数字`))
            sum = num1 + num2
            alert(sum)
        }
        getsum()

函数传参

function 函数名(参数列表) {
    函数体
}

参数默认值

function getsum(x=0,y=0) {
    document.write(x+y)
}
gensum() // 结果默认为0

这个默认值只会在缺少实际参数传递时才会被执行，所有参数都会优先执行传递过来的实参，否则默认为undenfined

函数返回值

return

#函数可以理解为一个特定的代码块容器，它可以完成特定的需求，并且可以重复利用

注意：

两个相同的函数，后面的函数会覆盖前面的函数
函数的实参和形参的个数可以不一致
- 如果形参过多没有匹配到实参的形参会自动给自己填上undefined
- 如果实参过多那么多余的实参会被忽略不参与运算

作用域

如果函数内部，变量没有声明直接赋值也当全局变量看待

function fn(){
    num =10 
}
fn()
document.write(num) // 10

函数内部的形参可以看作是函数的局部变量
先局部再全局

匿名函数

函数表达式

必须先声明再调用

let fn =function(){}

立即执行函数

避免全局变量之间的污染

(function(){})(x,y);

//第二种写法
(function(){}(x,y));
//多个立即执行函数之间用分号隔开

逻辑中断

逻辑或前面为true则不会执行后面的都为ture 则return 最后一个true

逻辑与前面和false则不会执行后面都为ture 则return 第一个true

转换为boolean型

//0、undefined、null、false、NaN 转换为boolean后都是false 其余则会true

- 减号只能运用于Number 它会使空字符串转换为0

null      经过数字转换以后会变成0
undefined  经过数字转换以后会变成NaN

对象

saddhu.

关注

24
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
JavaScripts笔记I(基础)

js是一门编程语言，可以实现很多的网页交互效果。JavaScript脚本语言具有以下特点:（1）。JavaScript是一种解释型的脚本语言，等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。（2）。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。（3）简单。JavaScript语言中采用的是弱类型的变量类型，对使用的未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。（4）。JavaScript是一种采用。
复制链接

扫一扫