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";// 可以添加属性

前端学习笔记（js基础知识）相关推荐

[前端学习笔记]JavaScript基础知识
一.JS三种书写位置行内式直接写到元素的内部. <input type="button" value="唐伯虎" onclick="aler ...
[前端学习笔记] jQuery基础知识整理
一.jQuery基本概念 1. 什么是jQuery jQuery是一个快速简洁的JS库,封装了JS常用的功能代码,优化了DOM操作.事件处理.动画设计.Ajax交互等.我们可以快速查询使用里面的功能函 ...
JS学习笔记——入门基础知识总结
JS入门基础知识总结1 前言基础背景知识一.产生历史: 二.特点: 三.应用方向: 四.Javascript组成: JavaScript书写使用方式一.行内式(了解即可,项目中不使用,日常练习尽 ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
php基础教学笔记,php学习笔记：基础知识
php学习笔记:基础知识 2.每行结尾不允许有多余的空格 3.确保文件的命名和调用大小写一致,是由于类Unix系统上面,对大小写是敏感的 4.方法名只允许由字母组成,下划线是不允许的,首字母要小写,其 ...
【学习笔记--FMCW基础知识】
学习笔记--FMCW基础知识前言 mmWave测距原理 mmWave区分多个物体 mmWave的距离分辨率(Range Solution) mmWave的最大测量距离前言由于工作原因需要了解TI ...
SAS学习笔记1——基础知识（库、PDV、变量选择、观测值排序、创建新变量
SAS学习笔记1--基础知识 1.逻辑库.临时库.永久库 2.数据步 2.1数据步语法 2.2 数据步的编译和执行过程 2.3变量的选择 2.3.1 keep和drop语句 2.4变量的重命名rena ...
Web前端入门学习之JS基础知识梳理汇总
Web前端工程师是当前各大企业都比较稀缺的人才,薪资待遇和就业前景都很不错.不论是专业还是非专业,有基础亦或是无基础,都想通过学习Web前端实现高薪就业. 不过,学习要一步一个脚印,不能一口吃一个胖子 ...
WebGL学习笔记（基础知识篇）
WEBGL基础知识介绍 1.场景(scene) 场景如其名,即显示3D空间内物体的容器,就好比一个箱子是一个3D场景. 2.坐标系: webgl使用笛卡尔坐标系(宽度.高度和深度),我们也可以指定使用 ...
《UNIX 环境高级编程》学习笔记——UNIX 基础知识
UNIX环境高级编程--UNIX 基础知识引言 UNIX 体系结构登录文件和目录输入和输出程序和进程出错处理用户标识信号时间值系统调用和库函数引言所有操作系统都为它们所允许的程 ...

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