学习JS | 青训营笔记

Javascript

一些碎碎念：一天速通，真的栓Q...

• 实现交互（行为）

1 引入方式

1. 内部脚本

将JS放在HTML页面中

• 位于标签之间

在html文档中可以在任意地方放任意数量的

2. 外部脚本

外部JS文件中，只包含JS代码，不含

基本语法

官方文档

数据类型

• 原始类型，引用类型

原始：string, number, boolean, null, undefined

Symbol, Object()

1. 变量

   1.   可以存放不同类型的值

   2. var：全局变量作用域大，可以重复定义

   3. let：{}局部变量，不能重复定义

   4. const

2. 运算符

   1. === 全等（不进行类型转换）

3. 语法特点

var (关键字) variable = 表达式;
var object(类名){
    属性名: xxx;
    函数名：function();(函数定义没什么特别的)
}

事件捕获：计算机找到触发元素

事件冒泡：方便开发者处理

微任务，宏任务

函数

1. alert(函数，变量，值...); --弹窗显示
2. Console.log(输出值)；--控制台换行输出
3. 类型转换：parseInt("string")
4. 用 function 关键字来定义

function 函数名(参数列表，不用指定类型){}
var 函数名称 = function(无类型参数列表){}

对象

1. 基础对象：Array，Sring，Json

var 变量 = new Array/String(数组列表);
var 变量 = [数组列表]/"";

• 长度类型可变，类调用方法
• 1. array
•   .forEach(数组) --遍历有值的数组
•   .push(元素) --添加元素
•   .splice() --删除元素
• 2. String
•   length(), charAt(), indexOf("")字符串所在位置，
• 3. Json
•   本身是一个文本，很像自定义对象，但属性的key要使用""，e.g. "name" = ''xxx"
• • 可以作为数据载体，向服务器发送请求，向前端返回请求
•   将json对象转化为js对象：JSON.parse(对象名称)
•     将js对象转化为json对象：JSON.stringify(对象名称)

自定义对象

var 对象名={属性: 属性值};

BOM 浏览器对象模型

1. Window 浏览器窗口对象

   1.   获取window对象（window.函数）
   2.   常见属性：history, location, navigator
   3.   方法：alert()
   4.   Boolean = confirm(需要确认的文本); (确认1，取消0)
   5.   setInterval(函数，周期); 周期性的执行某一函数
   6.   setTimeout(函数，延迟时间); 延迟时间执行函数，只执行一次

   7. 时间都是毫秒

2. Location 地址栏对象

   1.   属性：href --获取url

DOM 文档对象模型

将标记语言的各个组成部分封装为对应的对象，最终会形成一个DOM树，通过DOM来控制网页的内容

1. 核心DOM

• Document：整个文档对象
• Element：元素对象（标签）
• Attribute：属性对象（标签中的属性）
• Text：文本对象（标签之间的文本）
• Comment：注释对象

2. XML DOM
3. HTML DOM 拓展

• 获取元素对象

• // 根据元素的id属性，获得一个值
  var 元素 = document.getElementById('id名称')
  // 根据标签名称，返回一个数组
  document.getElementsByTagName("标签名称")
  // 根据name属性，返回一个数组
  document.getElementsByName('属性名称')
  // 根据类属性，返回一个数组
  document.getElementsByClassName('类属性名称')
  

元素名称.innerHTML = " "，更改元素

查文档的不同HTML DOM属性以及方法

事件监听

1. 事件绑定

   1. 通过html标签中的时间属性进行绑定，例如

      1. <input type="button" onclick="on()" value="按钮">
         <script>
             function on(){}
         </script>
         

   2. 通过DOM元素属性进行绑定，例如：

      1. document.getElementById('id').onclick = function(){}
         

光标闪烁：获得焦点