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

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)
  • 事件流:对应标签接收到事件的顺序,分为两个阶段:
    - 捕获阶段:起始点——》目标位置
    - 冒泡阶段:目标位置——》起始点
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值