前端学习笔记（js基础知识）

最新推荐文章于 2020-12-03 23:29:33 发布

welkin_fyds

最新推荐文章于 2020-12-03 23:29:33 发布

阅读量122

点赞数 1

分类专栏：前端学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/welkin_fyds/article/details/110209356

版权

前端学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

前端学习笔记（js基础知识）

JavaScript 输出
JavaScript 数据类型
常见的HTML事件
DOM
冒泡与捕获
流程控制语句
- for..in
计时器
let,var,const的区别
- 变量提升
- 三者的区别

JavaScript 输出

window.alert() 弹出警告框
document.write() 方法将内容写到 HTML 文档中
innerHTML 写入到 HTML 元素
console.log() 写入到浏览器的控制台

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
当声明新变量时，可以使用关键词 “new” 来声明其类型，var carname=new String; 注：JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

常见的HTML事件

onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

DOM

查找HTML元素

（1）通过 id 找到 HTML 元素
（2）通过标签名找到 HTML 元素
（3）通过类名找到 HTML 元素
改变 HTML 内容 document.getElementById(id).innerHTML=新的 HTML

改变 HTML 属性 document.getElementById(id).attribute=新属性值

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

改变 HTML 样式 document.getElementById(id).style.property=新样式
```
document.getElementById("p2").style.color="blue";
```
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
addEventListener() 方法用于向指定元素添加事件句柄，语法为element.addEventListener(event, function, useCapture);第一个参数是事件的类型 (如 “click” 或 “mousedown”)；第二个参数是事件触发后调用的函数；第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄，语法为element.removeEventListener("mousemove", myFunction);

冒泡与捕获

事件传递有两种方式：冒泡与捕获。

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

流程控制语句

for…in

for…in 语句用于对数组或者对象的属性进行循环操作。
for…in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

let arr = [2,5,6,8,1,0];
    for(let index in arr){
        console.log(arr[index]);//2,5,6,8,1,0
    }

计时器

setTimeout() 方法用于在指定的毫秒数后调用函数
clearTimeout()清除定时器clearTimeout()，可以用它取消未执行的调用

var timmer=function test(){
 alert("welkin");
}
setTimeout(test,2000);　//2s后弹出 “welkin”  
clearTimeout(timmer); //取消定时器，因为前者在两秒后调用，调用之前已经取消相当于什么也没发生

setInterval()可按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval()清除定时器setInterval()方法

var num=0;
var max=10;
function test(){
 num++;
 if (num==max){
  clearInterval(timer); //累加到10时清除清定时器
  alert("这里有"+num+"个welkin")； //这里有10个welkin
 }
}
timer=setInterval(test,500);

区别：setTimeout和setInterval都属于JS中的定时器，可以规定延迟时间再执行某个操作，不同的是setTimeout在规定时间后执行完某个操作就停止了，而setInterval则可以一直循环下去。

let,var,const的区别

变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。 JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

三者的区别

let和const的运用域为块级作用域；var 声明变量是全局的，没有块级作用域功能。

//let
const arr = [1, 2, 3, 4]
for (let i = 0; i < arr.length; i++) {
  	console.log(arr[i])//1,2,3,4
}
console.log(i);//报错: i is not defined
//var
var arr = [1, 2, 3, 4]
  for (var i = 0; i < arr.length; i++) {
	console.log(arr[i])//1,2,3,4
}
console.log(i);//4

let 、const不能在同一块级作用域内重复申请

let  arg2 = 'test'
console.log('let第一次申明：' + arg2)
let  arg2 = 'test2'
console.log('let第二次申明：' + arg2)
//报错

var存在变量提升的问题，而let和const则不存在变量提升。

//var 
console.log(a); // undefined  a已声明还没赋值，默认得到undefined值
var a = 100;
//let
console.log(b); // 报错：b is not defined  
let b = 100;
//const
console.log(c); // 报错：c is not defined  
const c = 100;

通过 const 定义的变量不能重新赋值，const 变量必须在声明时赋值，它没有定义常量值。它定义了对值的常量引用。因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。

//不能重新赋值
const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

//必须在声明时赋值
const PI;
PI = 3.14159265359;//报错

//它没有定义常量值。它定义了对值的常量引用
// 创建 const 对象
const car = {type:"porsche", model:"911", color:"Black"};
car.color = "White";// 可以更改属性
car.owner = "Bill";// 可以添加属性