JavaScript第一周

142 阅读6分钟

JavaScript

组成

ECMAScript

规定了js基础语法核心知识

比如:变量、分支语句、循环语句、对象等等

Web APIs

DOM

操作文档,比如对页面元素进行移动、大小、添加删除等操作

BOM

操作浏览器,比如页面弹窗,检测窗口宽度,存储数据到浏览器等等

书写位置

1.内部

直接写在html中用script标签包住

script标签写在</body>上面

<body>
  <script>
    // 页面弹出警示框
    alert('hello')
  </script>
</body>

2.外部

代码写在以.js结尾的文件里

外部会使代码更加有序更易于复用,且没有脚本的混合,HTML也会更易读


<body>
  <!-- 通过src引入外部js文件 中间不要写内容-->
  <script src="文件名.js"></script>
</body>

3.内联

代码写在标签内部


<body>
    <button onclick="alert('')"></button>
</body>

输出语法

document.write('输出内容')

向body内输出内容

如果输出的内容写的是标签,也会被解析成网页元素

alert('输出内容')

页面弹出警告对话框

console.log('控制台打印')

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

输入语法

prompt('输入内容')

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


<body>
    <script>
        prompt('请输入您的名字')
    </script>
</body>

代码执行顺序

按html文档流顺序执行代码

alert()和prompt()它们会跳过页面渲染先被执行

字面量

在计算机中描述事/物

1000是数字字面量

还有字符串字面量、数组字面量[]、对象字面量{}等等

变量

存储数据的容器

基本使用

1.声明变量(定义变量)

首先创建变量

let 变量名

声明变量由两部分组成:声明关键字、变量名(标识符)

let即关键字,关键字是系统提供的专门来声明(定义)变量的词语

2.变量赋值

变量名=数值

为了方便,在声明的同时直接赋值 (变量的初始化)

let age=18

3.更新变量

let不允许多次声明一个变量


let age=18
age=19
4.声明多个变量

多个变量中间用逗号隔开

同时打印也用逗号隔开

let age=18,uname='pink'

但是最好用let分别声明


let age=18
let uname='pink'

变量本质

程序在内存中申请的一块用来存放数据的小空间

let和var的区别

var声明

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

数组

基本使用

1.声明语法

let 数组名=[数据1,数据2,......,数据n]

2.使用数组

数组名[索引号]

length用来获取数组长度

长度=索引号+1

console.log(arr.length)

常量

使用const声明的变量,让某个变量永远不变

数据类型

基本数据类型

数字型number

算术运算符

NaN代表一个计算错误,是粘性的,任何对NaN的操作都会返回NaN

字符串型string

通过单引号’ ‘、双引号“ ”、反引号``包裹的字符

引号可以相互嵌套但是不能自己套自己

+ 运算符 可以实现字符串的拼接


let age=18
document.write('我今年 ' +age+ ' 岁了')
模板字符串

外面用反引号 `` 包含

里面用${变量名}包含


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

表示肯定或否定时在计算机中对应的类型

true表示肯定的数据

false表示否定的数据

未定义类型undefined

只声明变量不赋值的情况下,变量的默认值为undefined,一般很少【直接】为某个变量赋值undefined

使用场景:我们开发中经常声明一个变量,等待传送过来的数据

如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是undefined,就判断用户是否有传递数据过来

空类型null

代表一个”空“、”无“、”值未知“的特殊值,作为尚未创建的对象

undefined代表没有赋值

null表示赋值了但是内容为空

检测数据类型

typeof运算符可以返回被检测的数据类型

运算符形式:typeof 检测对象

函数形式:typeof (检测对象)

类型转换

使用表单、prompt获取过来的数据默认是字符串类型的,此时不能直接简单的进行加法运算,需要转换变量的数据类型

隐式转换

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

规则

  • +号两边只要有一个是字符串,都会把另外一个转成字符串

  • 除了+以外的算术运算符都会把数据转成数字类型

  • +号作为正号解析可以转换成数字型

    +prompt('请输入一个数字:')此时输入的数字被转换成了数字型

  • 任何数据和字符串相加结果都是字符串

缺点

转换类型不明确,靠经验才能总结

显式转换

为了避免隐式转换带来的问题,通常根逻辑需要对数据进行显式转换

自己写代码告诉系统该转成什么类型

Number(数据)

parseInt(数据) 只保留整数

parseFloat(数据) 可以保留小数

运算符

赋值运算符

**=**右边的值赋值给左边

一元运算符

需要一个表达式

自增++

让变量的值加一

前置自增:++i先自增再使用

后置自增:i++ 先使用再自增

自减--

让变量的值减一

比较运算符

**===**左右两边是否类型和值都相等

**!==**左右两边是否不全等

比较结果为boolean类型

不同类型比较有隐式转换,最终转换成number型再比较

NaN不等于任何字符包括它自己

字符串比较,是比较对应的ASCII码

从左往右依次比较,第一位一样再比较第二位

逻辑运算符

运算符优先级

语句

表达式可以被求值的代码

语句可以执行的代码

分支语句

if分支

单分支


if(条件){
    满足条件要执行的代码
}

小括号的条件为true才会执行大括号

小括号内结果若不是布尔类型,会发生隐式转换为布尔类型

除了0所有的数字(包括小数负数)都为真

除了空字符串所有的字符串都为真

双分支

if()...else

多分支

if()...else if()...else

三元运算符

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

数字补0案例

用户输入一个数,若小于10,则在前面补0


 <script>
        let num = +prompt('请您输入一个数字:')
        num < 10 ? alert('0' + num) : alert(num)
    </script>
switch语句

switch(){

case 值1:

代码1

break

case2 值2:

代码2

break

default:

代码n

break

}

一般要搭配break使用,否则容易造成case穿透

循环语句

断点调试

浏览器打开调试界面

按F12打开开发者工具

点到source一栏

选择代码文件

while循环
变量起始值2
while(循环/终止条件){
​
要重复循环的代码(循环体)
变量变化量(自增或自减)
}
​
​

大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件直到括号内条件不满足退出循环