学习js一周笔记

用户6240580001766
80 阅读7分钟

js 组成

  • ECMAScript：JavaScript的语法标准
    • ECMA是European Computer Manufacturers Association的缩写，即欧洲计算机制造商协会
    • ECMAScript是ECMA指定的脚本语言的标准，规定了一种脚本语言实现应该包括的基本内容
    • JavaScript是脚本语言中的一种，所以JavaScript也必须遵守ECMAScript标准，包含ECMAScript标准中规定的基本内容
  • DOM(Document Object Model)：JavaScript操作网页上的元素(标签)的API
  • BOM(Browser Object Model)：JavaScript操作浏览器的部分功能的API

js 书写格式

  • 行内式(不推荐)
<div onclick="alert('hello world')">我是div</div>
  • 内嵌式
</body>
<script>
        alert("hello world")个人笔记
</script>
</body>
  • 内嵌式注意点： 通常将js代码放在body的最后面，因为HTML是从上至下加载，而js代码通常是给标签添加交互(操作元素)，所以需要先加载HTML，否则如果执行js代码时HTML还未被加载，那么js代码将无法添加交互(操作元素)
  • 外链式
<script src="js书写格式.js"></script>
  • 外链式注意点： 外链式的script代码块中不能编写js代码，即便写了也不会执行

JavaScript的常见输出方式

  • 在浏览器弹窗中显示内容
alert("hello world")

prompt("请输入内容：")

confirm("你好吗？")
  • 在页面中显示内容
document.write("hello world")
  • 在控制台中显示内容
console.log("hello world")

console.error("错误信息")

console.warn("警告信息")

注意点： js中严格区分大小写

js 定义变量

什么是变量？

  • 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据；
    • 翻译为大白话，我有一个东西需要暂时存储起来，比如说就是一个数字 100，我把它存放到了变量 a 中，我后续想要使用他的时候就可以直接通过变量 a 获取到数字 100
  • 变量其实就相当于一个容器，内部可以存储任意类型的数据，使用变量时，用的是内部存储的数据。

为什么要定义变量？

使用变量可以方便的获取或者修改内存中的数据

如何定义变量

使用一个 var 的关键字进行定义，后面必须加一个空格，空格后面自定义变量名

var a;
var b;
var c;

变量赋值

  • 变量定义之后，初始时没有进行赋值，内部有一个默认存储的值叫 undefined(未定义) 表示内部未赋值，但可以存储数据了
  • 变量赋值的方式：通过等号 = 赋值，等号右边的值赋值给左边的变量 ==（等号在 JS 中叫做 赋值号；书写时，等号 = 两侧习惯书写一个空格）==
// 变量定义
var a;
// 变量赋值
a = 1;
// 变量定义并赋值
var b = 2;

使用变量

直接写变量名即可使用变量；变量在使用前，必须先有定义，如果没有定义，会出现引用错误

变量命名规则（必须遵守，不遵守会报错）

  • 由字母、数字、下划线、$符号组成，不能以数字开头
  • 字母区分大小写
  • 不能是关键字和保留字
    • 关键字指的是js中有特殊功能的小词语，比如var、for等
    • 保留字指的是现在没有特殊功能，但是将来新语法中有可能作为关键字使用

变量命名规范（建议遵守的，不遵守不会报错）

  • 变量名必须有意义
  • 遵守驼峰命名法

js 数据类型

JS中的值，无论是字面量还是变量，都有明确的类型

  • 数据类型分类(以基本数据类型为主)
    • Number 数字类型
      • 不区分整数、浮点数、特殊值，都是 Number 类型
    • String 字符串类型
      • 所有的字符串都是 String 类型
    • undefined undefined类型
      • undefined本身就是一个数据，表示未定义，变量只声明不赋值的时候，值默认是 undefined
    • Boolean 布尔类型
      • Boolean 字面量：只有 true 和 false 两个字面量的值，必须是小写字母
      • 计算机内部存储：true 为 1，false 为 0
    • null null类型
      • null 本身就是一个数据
      • 从逻辑角度，null 值表示一个空对象指针
      • 如果定义的变量准备在将来用于保存对象，最好该变量初始化为 null
    • Object 对象类型（后续课程详细讲解）

数据类型检测

  • 为什么要有数据类型检测？
    • JS语言是一门动态类型的语言，变量并没有一个单独的数据类型，而是会随着内部存储数据的变化，数据类型也会发生变化
    • 变量的数据类型，与内部存储数据有关
    • 将来使用变量时，需要知道内部存储的数据是什么类型，避免程序出错
  • 使用 typeof 的方法进行数据检测
    • 检测方式：在 typeof 后面加小括号执行，将要检测的数据放在小括号内部

数据类型转换(转数值 / 转字符串 / 转布尔)

转数值

  1. Number(数据)方法
    • 转型函数Number()可以用于任何数据类型，将其他数据类型转为数字
    • 字符串：纯数字字符串转为对应数字，空字符串和空白字符串转为0，非空非纯数字字符串转为NaN
    • 布尔值：true转为1，false转为0
    • undefined：转为NaN
    • null：转为0
  2. parseInt()方法：字符串转整数方法
    • 对浮点数进行取整操作
      • 对数字取整直接舍弃小数部分，只保留整数
    • 将字符串转为整数数字
      • 将字符串转为整数数字，也包含取整功能
    • 字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字，且只取整数部分
    • 如果不是数字打头的字符串，会转换为NaN
  3. parseFloat()方法：字符串转浮点数方法
    • 将字符串转为浮点数数字
    • 满足浮点数数字字符必须在字符串开始，如果不在开始返回值都是NaN

转字符串

  1. 变量.toString()方法
  2. String(变量)方法，有些值没有toString()，这个时候可以使用String()。比如undefined和null
  3. + 号拼接字符串方式
    • num + “” ,当 + 两边一个操作符是字符串类型，一个操作符是其他类型的时候，会先把其他类型转换成字符串在进行字符串拼接，返回字符串

转布尔

  1. Boolean(变量)方法
    • 转型函数Boolean()可以用于任何数据类型，将其他数据类型转为布尔类型的值
    • 转为false：NaN、0、“”空字符串、null、undefined
    • 转为true：非0 非NaN数字、非空字符串

js 运算符

  • 什么是运算符？
    • 也叫操作符，是 JS 中发起运算最简单的方式，例如： 5 + 6
    • 表达式的组成包含操作数和操作符，表达式会得到一个结果，然后用结果参与程序

js 运算符分类

  • 算数运算符( + / - / * / / / % )
    • 运算顺序与数学中的运算顺序一致，先乘除取余，后加减，有小括号先算小括号
  • 赋值运算符( = / += / -= / *= / /= / %= )
  • 比较运算符( > / < / >= / <= / == / === / != / !== )
    • 比较结果只会返回一个布尔类型值，true 或者 false
  • 逻辑运算符( && / || / ! )
  • 自增自减运算符( ++ / -- )
  • 三目运算符
    • 格式：条件表达式?语句1:语句2;

条件分支语句 if

1.if 第一种形式

  • 表示如果条件表达式为真，执行语句块1，否则不执行
if(age>18)// 条件表达式
{
    console.log("开网卡")// 语句块1
}
// 后续语句；

2.if 第二种形式

  • 如果条件表达式为真，则执行语句块1，否则执行语句块2
if(age>18)// 条件表达式
{
    console.log("开网卡")// 语句块1
}else{
    console.log("不开")// 语句块2
}

3.if 第三种形式

  • 如果条件表达式1为真，则执行语句块1，否则判断条件表达式2，如果为真执行语句块2，否则再判断条件表达式3，如果为真执行语句块3，当表达式1、2、3都不满足，会执行最后一个else语句
if(age>18)// 条件表达式1
{
    console.log("给网卡")// 语句块1
}else if(age>25)// 条件表达式2
{
    console.log("给名片")// 语句块2
}else if(agr>40)// 条件表达式3
{
    console.log("给房卡")// 语句块3
}else{
    console.log("给好人卡")// 语句块4
}
avatar
文章
阅读
粉丝