五分钟看完js基础

夜雨声烦969
205 阅读12分钟

编程目的：计算机为解决某个问题而使用某种程序设计语言编写程序代码

js全称：JavaScript， 是一种运行在客户端的脚本语言（script是脚本的意思） 脚本语言：不需要编译，运行过程中通过js解析器（js引擎）逐行进行解析

JavaScript的作用：

1.网页特效 2.表单动态校验 3.服务器开发（Node.js） 4.桌面程序开发（Electron）

使用JavaScript有三种方式

1.行内式引用

<input type="bottom" value="点击" onclick="alert('hello world!')">

on开头的属性都是事件 ​ 要注意单引号和双引号的区别 ​ 可读性差，在HTML中编写js大量代码，不方便阅读 ​ 引号容易错误 2.内嵌式引用 ​ 在HTML中添加script标签

<script>
    alert("Hello World!")
</script>

3.外部JS文件引用 如何引入JavaScript文件 1.创建Script标签（Script标签可以写在网页的任意地方） 2.在Script标签中添加src属性引入JavaScript文件路径

HTML和JavaScript的关系

HTML/CSS标记语言 ​ HTML决定网页的结构和内容 （身体） ​ CSS决定网页呈现的模样 （外表）

JavaScript脚本语言-编程类 ​ JavaScript实现业务逻辑和页面控制 （行为）

浏览器执行JavaScript

浏览器分为两类：渲染引擎和JS引擎 ​ 渲染引擎：浏览器内核；用来解析HTML和CSS ​ JS引擎；js解析器：用来读取网页中的JavaScript代码，对其处理后运行

JavaScript組成

js分为三类组成 ​ 1.ECMAScript（JavaScript语法） ​ ECMA（European Computer Manufactures Association 原名欧洲计算机制造商协会） ​ ECMA国际进行标准化的编程语言 ​ 2.DOM（Document Object Model）页面文档对象模型 ​ 是W3C组织推荐的可处理可扩展标记语言的标准编程接口， ​ 可以通过DOM提供的接口对页面上各种元素进行操作（大小，位置，颜色等） ​ 3.BOM（Browser Object Model）浏览器对象模型 ​ 提供了独立内容，可以与浏览器窗口进行交互的对象结构， ​ 可以通过BOM操作浏览器的窗口，比如弹出框、控制浏览器跳转等

JavaScript注释： // 单行注释 /**/ 多行注释

变量

什么是变量 白话;变量就是一个可以改变的量（装内容的盒子） 俗语：变量是用于存放数据的容器，可以通过变量名获取数据， 甚至可以改变数据

使用变量 1.声明变量 var 变量名； var：是JavaScript的关键字，用来声明变量（variable变量的意思）

2.赋值 变量名 = ”数据值“；

3.前两部可以写出一步 var 变量名=数据值;

变量名命名规则 首字母：只能是英文字母，下划线，符开头其他位：英文字母，下划线，符开头 其他位：英文字母，下划线，符，数字 不能以数字开头 不能是关键字、保留字。例如：var、for、while 变量名必须有意义 严格区分大小写

var规则里面可以省略，但编程规范里面不能省略，增强阅读性

let 和 var 区别

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

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

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

  1. 可以先使用 再声明 (不合理)
  2. var 声明过的变量可以重复声明(不合理)

结论：

var 就是个吭，别迷恋它了，现在开发中程序员声明变量统一都使用 let

数据类型

为什么需要数据类型 ​ 在计算机中，不同的数据类型占据的空间不同，为了充分利用存储空间

JavaScript数据类型分为两类

简单数据类型(基本数据类型) ​

string 字符串 默认值”“

​ 字符串转义符

​ \ 转义符

​ \n 换行 n:newline

​ \t 缩进 t:tab ​

\b 空格 b:blank ​

number 数字型 默认值0 无论二进制 十进制 八进制 十六进制都是这一类型

​ boolean 布尔类型 true（真）和false（假） 默认值false ​

undefined 未定义 声明了变量没有赋值 默认值undefined ​

null 空值 var a=null; 默认值null

复杂数据类型（引用数据类型） ​ object 对象 ​ Array 【】 数组

typeof 用于检查变量的数据类型 ​ 语法：typeof（变量名）;

类型转换

parseInt（）：把字符类型转换成整型，不保留小数点

案例： parseInt（num1）

parseFloat（）：把字符类型转换成浮点型

案例：parseFloat（num1三）

toString（）; 把其他数据类型转换成字符串类型

案例：变量名.toString（）;

String（）;强制转换 把其他类型转换成字符串类型

案例：String（变量名）;

加号拼接字符串

案例：alert(number+"");

Boolean()函数; 把其他类型装换成布尔类型

案例：alert（Boolean（））; 有值输出true， 无值输出false

JavaScript的输出语句

document.write(); 显示在文档 ​ console.log(); 输出在控制台 ​ alert(); 提示框 ​ confirm(); 确定和取消的提示框 确定值未true 取消值未false

JavaScript的输入语句

prompt("message","default"); 输入框 ​ var test = prompt("请输入你要的数据")

基本if选择结构

if判断 if(如果) else（否则） ​ 语法:if(boolean类型的表达式){ ​ //ture进入if ​ document.write(); ​ } ​ else{ ​ //false进入else ​ document.write(); ​ } ​ 嵌套if选择结构 ​ if(){ ​ if(){

} ​ }else[

} ​ 多重if选择结构 ​ if(){

}else if(){

}else if（）{

}..... ​ else{

}

isNaN 是否是非数字

JavaScript运算符分类

1.算术运算法

    +   加   10+10=20
    -   减   10-5=5

  • 乘 5*5=25 / 除 5/5=1 % 取余数（取模） 7%5=2

    2.递增递减运算符

    ++ 递增 var num=1；num++； alert（“num”） 放在后面先赋值再自加1 放在前面先自加1再赋值 ​ -- 递减递增 var num=1；num--； alert（“num”） 放在后面先赋值再自减1 放在前面先自减1再赋值

    3.比较运算符

    运算符 说明 案例 结果 ​ > 大于 2>1 true ​ < 小于 2<1 false ​ >= 大于等于 ​ <= 小于等于 ​ != 不等于 ​ == 判等符 ​ === 全等符 ​ !=== 不全等服

    4.逻辑运算符

    && 逻辑与 true&&false false 满足两个条件 ​ || 逻辑或 true||false true 满足一个条件 ​ ! 逻辑非 !ture false 反转

    5.赋值运算符

    = 赋值 ​ += 先加再赋值 num=10 mun += 6 mun=10 ​ -= 先减再赋值 ​ *= 先乘再赋值 ​ /= 先除再赋值 ​ %= 先取模再赋值

运算符优先级

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

流程图

三元运算符（三目运算符） 布尔类型表达式?表达式1:表达式2 若布尔类型表达式为ture执行表达式1 若布尔类型表达式为false执行表达式2

switch：逻辑判断（等值判断）

switch(表达式){ case value1： 语句1： break； case value1： 语句2： break； case value1： 语句3： break； default： 语句4： break； } switch：开关转换，case：小例子 选项 关键字switch后面小括号中的表达式通常式一个变量 表达式的值会跟case的值比较

循环

for循环 语法 for(表达式1;表达式2;表达式3){ 循环体 } 表达式1：声明迭代变量 表达式2：循环条件 表达式3：更新迭代变量

断点调试

断点调试是指在自己程序的某一段代码中设置一个断点，程序运行到这一行代码时就会停住， ​ 然后我们就会一步一步往下调试，调试过程中我们可以查看每一个变量的值，出错的话， ​ 调试到出错的代码上显示错误信息，停下，修改代码。断点调试的目的可以观察变量，观察 ​ 程序运行过程

断点调试流程：

1.浏览器中按F12（右键检查）--》sources ---》找需要要调试的文件 ---》在程序中设置断点 ​ 2.Watch：监视 通过Watch监视查看每个变量的值变化 ​ 3.按F11，程序单步运行；让程序一行一行运行

while循环

语法 ​ while(表达式){ ​ 循环体 ​ } ​ 表达式：循环条件

for循环适合已知循环次数的操作， while循环适合未知循环次数的操作。

do while循环

语法： ​ do{

}while(表达式); ​ 表达式：循环条件

while循环和do while循环区别

1.语法区别 2.使用场合不同 3.初始条件都不满足情况下，while循环一次也不执行，do while循环至少执行一次

双循环

一个完整的循环解构里面嵌套另一个完整的循环结构 for(){ ​ for(){

} } for(){ while(){

} }

for(){ do{

}while(); }

跳出循环

break continue

continue关键字：用于立即跳出本次循环，进入下次循环 break关键字：用于立即跳出整个循环

数组

数组可以吧一组相关的数据一起存放，并提供方便的访问（获取）方式。 ​ 数组是指：一组数据的聚合，其中的每个元素被称作元素，在数组中可以存放任意类型的元素，数组是一种 ​ 将一组数据存储在单个变量名下的优雅方式。

1.声明数组

var 数组名 = new Array(); ​ var items = new Array(1,2,3,4,5,6,7); //空数组 ​ var items = []; //空数组 ​ var items = ["张三","李四","王五"] //有数据的数组

添加数组元素：

数组名.unshift（）

let a:number[] = [12,34,25,67,89,21,53]
a.unshift(888)

注意：是在数组开头添加元素

数组名.push（）

let a:number[] = [12,34,25,67,89,21,53]
a.push(888)

注意：是在数组结尾添加元素

删除数组元素：

数组名.shift（） 可以删除数组的第一个元素并返回该元素。

let a:number[] = [12,34,25,67,89,21,53]
let b = a.shift()
console.log("数组里有",a)
console.log("删除",b)

数组名.pop（） 可以删除数组的最后一个元素并返回该元素。

let a:number[] = [12,34,25,67,89,21,53]
let b = a.pop()
console.log("数组里有",a)
console.log("删除",b)

数组名.splice（第几个位置增加，是否删除原位置的数组（0表示不删除），要插入的元素）

任意位置删除或新增

let array:string[] = ['华为', '荣耀', '小米', 'vivo']
//任意位置删除或新增 .splice()
//1.新增(任意位置)
array.splice(2,0,'oppo') //向第二个位置插入元素 0代表不删除原来所在位的元素(若是1则要删除2位置的小米) 'oppo'指要插入的元素
console.log('第二个位置插入元素', array)
//2.删除
array.splice(2,2) //删除从位置2开始的两个元素,包括第二个位置
console.log('删除从位置2开始的两个元素', array)
修改数组元素：

直接通过索引访问并修改数组中的元素

let a:number[] = [12,34,25,67,89,21,53]
a[2] = 900
console.log("数组里有",a)
数组元素清空：

将数组的length属性设置为0，这样就会移除数组内的所有元素。

let a:number[] = [12,34,25,67,89,21,53]
a.length = 0
console.log("数组里有",a)

函数

函数：就是封装了一段可被重复调用执行的代码块

1.声明函数

function 函数名(参数){ ​ 函数体代码 ​ } ​ function是声明函数的关键字，必须小写 ​ 由于函数一般是为了实现某个功能才定义的，所以我们通常将函数名命名为动词

2.使用函数

调用的时候千万不要忘记添加小括号 ​ 函数不调用，低级不执行 ​ 声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码

函数的封装

  • 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
  • 简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）
  • 例子：封装计算1-100累加和
/*
   计算1-100之间值的函数
*/
// 声明函数
function getSum(){
  var sumNum = 0;// 准备一个变量，保存数字和
  for (var i = 1; i <= 100; i++) {
    sumNum += i;// 把每个数值 都累加 到变量中
  }
  alert(sumNum);
}
// 调用函数
getSum();

函数参数语法

  • 形参：函数定义时设置接收调用时传入
  • 实参：函数调用时传入小括号内的真实数据 参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

函数参数的运用：

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
  1. 调用的时候实参值是传递给形参的
  2. 形参简单理解为：不用声明的变量
  3. 实参和形参的多个参数之间用逗号（,）分隔

函数的返回值

return 语句
返回值：函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回 。

// 声明函数
function 函数名（）{
    ...
    return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值
  • 在使用 return 语句时，函数会停止执行，并返回指定的值
  • 如果函数没有 return ，返回的值是 undefined

对象

对象的概念

1.什么是对象，在JavaScript中，对象是一种无序的相关属性和方法的集合是由属性和方法组成的

属性：事物的特征，在对象中用属性来表示（常用的名词）

方法：事物的行为，在对象中用方法来表示（常用的动词）

2.为什么需要对象 ​ 保存一个值，可以使用变量，保存多个值（一组值）时，可以使用数组，

如果要保存一个人完整 ​ 的信息呢? ​ let obj{"name":"张三",}

3.如何使用对象 ​

调用对象的属性 ​obj.name ​

通过对象名.属性来获得属性值 abj["name"] ​

通过对象名中括号，在中括号中写属性名，来获得属性值

​ 调用对象的方法 ​

对象里面的方法调用：对象名.方法名();这个小括号一定要加

avatar
文章
阅读
粉丝