JavaScript学习笔记

JavaScript学习笔记

一、JavaScript 输入输出语法

1.输出语法

window.alert("hell js");//写入警告框
document.write("2222");//写入html页面
console.log("3333");//写入浏览器的控制台

2.输入语法

语法：
prompt("请输入文字")；
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

二、变量

1.var

语法：

var 变量名;

全局变量且可以重复定义

2.let

语法：

let 变量名;

局部且不能重复定义

三、数组

目标：能够声明数组并且能够获取里面的数据

1. 声明语法

例：

• 数组是按顺序保存，所以每个数据都有自己的编号
• 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
• 在数组中，数据的编号也叫索引或下标
• 数组可以存储任意类型的数据

2.操作数组

• 数组本质是数据集合, 操作数据无非就是 增 删 改 查
  

四、常量

• 概念：使用 const 声明的变量称为“常量”。

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

• 命名规范：和变量一致

• 使用：
  

• 注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）

• 小技巧：不需要重新赋值的数据使用const

五、数据类型

1.基本数据类型

（1）number 数字型

JavaScript 中的正数、负数、小数等 统一称为 数字类型。

（2）string 字符串型

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

（3）boolean 布尔型

表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）

（4）undefined 未定义型

未定义是比较特殊的类型，只有一个值 undefined。

• 什么情况出现未定义类型？
  只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

（5）null 空类型

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

null 和 undefined 区别：

• undefined 表示没有赋值
• null 表示赋值了，但是内容为空

2.引用数据类型

object 对象

六、函数

1.函数的声明语法

2.函数传参

参数列表

• 传入数据列表
• 声明这个函数需要传入几个数据
• 多个数据用逗号隔开

3.匿名函数

函数可以分为：

匿名函数
没有名字的函数, 无法直接使用。

使用方式：

• 函数表达式
• 立即执行函数

七、对象

1.对象声明语法

2.对象有属性和方法组成

• 属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等…
• 方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏…
  

八、APIs

1.DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

2.DOM对象

• DOM对象：浏览器根据html标签生成的 JS对象
  • 所有的标签属性都可以在这个对象上面找到
  • 修改这个对象的属性 会自动映射到标签身上
• lDOM的核心思想
  • 把网页内容当做对象来处理
• document 对象
  • 是 DOM 里提供的一个对象
  • 所以它提供的属性和方法都是用来访问和操作网页内容的
    • 例：document.write()
  • 网页所有内容都在document里面

3.获取DOM元素

（1）根据CSS选择器来获取DOM元素

1.1 选择匹配的第一个元素

• 语法：

 document.querySelector( 'css选择器'）

• 参数:
  包含一个或多个有效的CSS选择器 字符串
• 返回值：
  CSS选择器匹配的第一个元素,一个 HTMLElement对象。
  如果没有匹配到，则返回null

1.2选择匹配的多个元素

• 语法：

 document.querySelectorA11( 'css选择器")

• 参数:
  包含一个或多个有效的CSS选择器 字符串
• 返回值：
  CSS选择器匹配的NodeList 对象集合

3.操作元素内容

（1）元素innerText 属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

（2） 元素.innerHTML 属性

将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

4.操作元素常用属性

• l还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
• 最常见的属性比如： href、title、src 等
• 语法：

 对象.属性=值

例：

//1．获取元素
const pic = document.querySelector( 'img')
// 2．操作元素
pic.src = './images/b02.jpg'pic.title = 'kkkkk'

5.操作元素样式属性

（1）通过 style 属性操作CSS

• 语法：

对象.style.样式属性=值

（2） 操作类名(className) 操作CSS

• 语法：

//active是一个css类名
元素.className = 'active'

（3）通过 classList 操作类控制CSS

• 语法：

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

6.操作表单元素属性

• 获取: DOM对象.属性名
• 设置: DOM对象.属性名 = 新值

表单.value =‘用户名'
表单.type = 'password '

7.事件监听

• 语法：

元素对象.addEventListener('事件类型'，要执行的函数)

• 事件监听三要素：
  • 事件源： 那个dom元素被事件触发了，要获取dom元素
  • 事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
  • 事件调用的函数： 要做什么事