JavaScript的背景及知识结构

1.什么是JavaScript
  • 1轻量级的编程语言
    - html+css——>设计
    - 借鉴了java的结构改编为——>浏览器运行的命令——>被称为脚本，即为JavaScript的产生
  • 2最流行的脚本编程语言是c++
  • 3html适合于所有的浏览器
  • 4容易学习，门槛低，精通需要多练习
    - 学习资料：书、教程、论坛
    - 工作需求大
2.JavaScript能干什么
  • html+css网页的内容是静态的
  • 网页的行为：
    - 改进设计：增加动态效果
    - 验证表单
    - 检查浏览器
    - 创建Cookies
    能够解决与用户的交互问题
3.JavaScript由什么构成的以及如何学习JavaScript？
  • 逻辑上来说由三大部分构成：
  • ECMAScript(进行逻辑计算)包括变量、值、运算、流程控制、数组、对象、类 ——对应语法
  • 负责DOM操作：修改html中的元素 ——对应库
  • 负责浏览器对象BOM（和浏览器做交互）：浏览器的信息 ——对应库
4.JavaScript基本学习
  • 引用方式
    - 外部引用
    - 直接引用
    - 写在属性里面
<body onload="alert('hello word');">
</body>
  • 语法：
    - 1.用字母 数字 特殊符号 组成的命令
    - 2.对字母大小写敏感
  • 注释
    - // 单行注释
    - /* */多行注释
  • 输出
    - alert——>弹窗警告
    - console——>控制台输出
  • 值：
    - 数字
    - 字符串：单引号，双引号
    - 布尔值
    - 变量：用var声明（变量名必须是字母和数字；变量开始必须维字母）
  • 运算符：算数运算符、赋值运算符、比较运算符、逻辑运算符
  • 对象（Object）
    - 系统自带对象：数组 函数
    - 自定义：{}
  • 函数：即代码的复用：写一遍多次使用（把特定的功能语句打包放在一起）
function slogan(num){
	for(var a=1;a<num;a++){
		console.log(a+"好好学习好好赚钱");
	}
}
slogan(5);

slogan(7);

javascript要学哪些 javascript学什么内容_删除节点

  • 作用域:可访问变量的集合
    - 定义一个变量，这个变量可以被使用的地方，可以使用的范围
    - 分为全局变量（在函数外定义的变量，在所有地方都能被访问）和局部变量（在函数内定义的变量，在函数内被访问到）
  • 预解析：浏览器获得js文件的时候，不是立刻去执行代码，而是将代码全篇快速扫描一遍，把变量预先解析
console.log("x = "+x);
var x = 10;
add();

function add(){
	console.log("add");
}

javascript要学哪些 javascript学什么内容_html_02

  • 闭包：使变量变得私有化问题
  • 对象：一堆变量+一堆函数的集合
var obj1 = {
	x:0;
	'x':0;
	"x":0;//这三个一个意思
	y:1;
	z:function(){
	console.log("z fuc");
}
  • 对象：属性的基本操作
  • 函数function：一堆语句的集合
  • 命名空间：将创建的很多对象都放到命名空间中，可以直接使用，互相之间没有直接冲突
5.浏览器原理和BOM
  • DOM：文档对象模型
  • 数据结构：
    - 线性：单链表、循环链表、队列、栈、数组
    - 树形：二叉树、平衡树、红黑树
    - 网状：有向图、无向图 ——》寻路算法 A*算法
  • DOM树：
    - document节点：只有一个
    - 标签节点、元素节点、文本节点
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM</title>
</head>
<body>
	<div>div1
		<p>p1</p>
		<p>p2</p>
		div1
	</div>
	
</body>
</html>

对应DOM树结构：

javascript要学哪些 javascript学什么内容_数组_03

- 创建添加删除节点

//创建节点 添加到DOM树    删除节点
var div1 = document.getElementById("div1");
//创建一个p标签
var p = document.createElement("p");
//创建一个文本节点
var text = document.createTextNode("p1");
p.appendChild(text);

//添加新节点
div1.appendChild(p);

javascript要学哪些 javascript学什么内容_javascript要学哪些_04


javascript要学哪些 javascript学什么内容_删除节点_05

- 删除节点

//删除id为div2
//先获取div2
var div2 = document.getElementById("div2");
//方法1.进行删除
div1.removeChild(div2);
//方法2.自己干掉自己(在不知道自己有div1的情况下)
div2.parentNode.removeChild(div2);
  • js事件的基本概念及事件注册
    - js——》交互，人可以去操作页面
    - 当用户操作html元素，产生一个事件，从而该事件主动的调用设定方法函数
    - 事件源：产生事件的地方
    - 事件的类型：点击 键盘
    - 事件对象：通过事件对象可以记录好信息
    - 事件的处理程序：函数
    - js中的事件都是通过注册来实现（相当于把以后会发生的事情先提前报备一下）——ep.没钱了往家里打电话
    - 没钱了 + 打电话——》你
    - 事件类型 + 函数——》元素
    - 通过两种方式实现事件的注册
    - 1.html属性：属性名：on+事件的名字 如 onclick
var num = 0;
function add(){
	console.log("点击"+num);
}
var div1 = document.getElementById("div1");
div1.onclick = add;
- 2.通过调用 系统提供的方法
//div1.addEventLisener(事件类型click，函数add，事件的处理方式 布尔值 false true);
div1.addEventLisener("click",add);
  • 事件函数：当事件发生的时候 所具体执行的操作（操作function）
  • 事件流：对应标签接收到事件的顺序，分为两个阶段：
    - 捕获阶段：起始点——》目标位置
    - 冒泡阶段：目标位置——》起始点