JavaScript学习——基础学习及知识结构

最新推荐文章于 2022-03-22 15:43:59 发布

xubuhui

最新推荐文章于 2022-03-22 15:43:59 发布

阅读量218

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xubuhui/article/details/102677960

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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);

在这里插入图片描述

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

console.log("x = "+x);
var x = 10;
add();

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

在这里插入图片描述

闭包：使变量变得私有化问题
对象：一堆变量+一堆函数的集合

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树结构：
在这里插入图片描述 - 创建添加删除节点

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

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

在这里插入图片描述
- 删除节点

//删除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）
事件流：对应标签接收到事件的顺序，分为两个阶段：
- 捕获阶段：起始点——》目标位置
- 冒泡阶段：目标位置——》起始点

xubuhui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录