JavaScript笔记

阿西代码

于 2020-07-29 17:20:58 发布

阅读量94

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/appleios55/article/details/107657659

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript笔记

JavaScript基础
- JavaScript介绍
- JavaScript实现
- JavaScript输出
- JavaScript语法
- JavaScript注释
- JavaScript变量
- JavaScript数据类型
JavaScript语法
- JavaScript运算符
- JavaScript条件语句
- JavaScript循环语句
- JavaScript跳转语句
JavaScript函数
- 了解函数
- 定义函数
- 函数调用
- 带参数的函数
- 带返回值的函数
- 局部变量和全局变量
JavaScript异常捕获
JavaScript事件
JavaScript-DOM
- DOM简介
- DOM操作HTML
- DOM操作CSS
- DOM EventListener
JavaScript事件详解
- 事件流
- 事件处理
- 事件对象
JavaScript内置对象
- 什么是对象
- String字符串对象
- Date日期对象
- Array数组对象
- Math对象
JavaScriptDOM对象控制HTML
JavaScript浏览器对象
- window对象
- 计时器
- History对象
- Location对象
- Screen对象
JavaScript瀑布流效果
- 布局
- 实例
JavaScript面向对象
- 认识面向对象
- 基本面向对象
- 函数构造器构造对象
- 深入JavaScript面向对象

JavaScript基础

JavaScript介绍

JavaScript是互联网上最流行的脚本语言，这门语言可用于web和HTML，更可广泛用于服务器、pc端、移动端。
JavaScript脚本语言：
JavaScript是一种轻量级的编程语言
JavaScript是可插入HTML页面的编程代码
JavaScript插入HTML页面后，可由所有的浏览器执行

JavaScript实现

JavaScript用法：
HTML中的脚本必须位于<script></script>标签之间
脚本可被放置在HTML页面的<body>和<head>部分中
JavaScript标签：
在HTML中插入JavaScript，使用<script>标签
在<script></script>之间书写代码
JavaScript使用限制：
在HTML中，不限制脚本数量
通常会把脚本放置于<head>标签中，以不干扰页面内容

JavaScript输出

JavaScript通常用来操作HTML
文档输出：documnet.write("<p>this is my first JavaScript</p>");

JavaScript语法

1-JavaScript语句：JavaScript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
2-分号：语句之间的分割是分号（;），注意：分号是可选项，有时候看到不以分号隔开的。
3-JavaScript代码：按照编写顺序依次执行
4-标识符：
JavaScript标识符必须以字母、下划线或美元符号开始
JavaScript关键字
5-JavaScript对大小写敏感：JavaScript同样对大小写很敏感
6-空格：JavaScript会忽略到多余的空格
7-代码换行：
8-保留字：

JavaScript注释

单行注释：//
多行注释：/**/

JavaScript变量

变量是用来储存信息的“容器”，var i=10;

JavaScript数据类型

字符串（String）
数字（Number）
布尔（Boolean）
数组（Array）
对象（Object）
空（null）
未定义
可以通过赋值为null的方式清楚变量

JavaScript语法

JavaScript运算符

算数运算符：+、-、*、%、/、++、--
赋值运算符：=、+=、-=、*=、/=、%=
字符串操作：
比较运算符：==、===、!=、!==、>、<、>=、<=
逻辑运算符：&&、||、!
条件运算符：x<10?"x比10小":"x比10大"

JavaScript条件语句

if...else
switch

JavaScript循环语句

for循环、 for/in
while循环、 do...while

JavaScript跳转语句

break 跳出当前循环，不再进行下一次循环
continue 跳出本次循环，进行下一次循环，结束当前循环的迭代

JavaScript函数

了解函数

函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

定义函数

定义函数：function 函数名(){函数体；(代码块)}
注意：JavaScript对大小写十分敏感，所以这里的function必须小写。在函数调用时，也必须按照函数的相同名称来调用函数

函数调用

函数调用：函数在定义好之后，不能自动执行，需要进行调用
调用方式：

在<script>标签内调用
在HTML文件中调用

带参数的函数

函数参数：在函数的调用中，也可以传递值，这些值被称为参数。demo(arg 1,arg 2);
参数的个数可以为任意多，每个参数通过“,”隔开
注意：参数在传递时，其顺序必须一致
参数意义：通过传递参数的个数以及参数的类型不同完成不同的功能

带返回值的函数

返回值：有时，我们需要将函数的值返回给调用他的地方
通过return语句就可以实现
注意：在使用return语句时，函数会停止执行，同时返回值

局部变量和全局变量

局部变量：只能在当前函数中使用
全局变量：任何地方都可以使用

JavaScript异常捕获

异常：当JavaScript引擎执行JavaScript代码时，发生了错误，导致程序停止运行。
异常抛出：当异常产生，并且将这个异常生成一个错误信息
异常捕获：try{发生异常的代码块;}catch(err){错误信息处理;}
Throw语句：通过throw语句创建一个自定义错误

JavaScript事件

什么是事件：事件是可以被JavaScript侦测到的行为
主要事件：

onClick：单击事件
onMouseOver：鼠标经过事件
onMouseOut：鼠标移出事件
onChange：文本内容改变事件
onSelect：文本框选中事件
onFocus：光标聚集事件
onBlur：移开光标事件
onLoad：网页加载事件
onUnload：关闭网页事件

JavaScript-DOM

DOM简介

HTML DOM：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
DOM操作HTML：

JavaScript能够改变页面中的所有HTML元素
JavaScript能够改变页面中的所有HTML属性
JavaScript能够改变页面中的所有CSS样式
JavaScript能够对页面中的所有事件做出反应

DOM操作HTML

1-改变HTML输出流：注意：绝对不要在文档加载完成之后使用document.write()。这会覆盖该文档。
2-寻找元素：
通过id找到HTML元素
通过标签名找到HTML元素：相同元素中的第一个
3-改变HTML内容：使用属性：innerHTML
4-改变HTML属性：使用属性：attribute

DOM操作CSS

通过DOM对象改变CSS：语法：document.getElementById(id).style.property=new style

DOM EventListener

DOM EventListener：
方法：addEventListener(): removeEventListener():
addEventListener()：方法用于向指定元素添加事件句柄
removeEventListener()：移除方法添加的事件句柄

JavaScript事件详解

事件流

事件流：描述的是在页面中接受事件的顺序
事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

事件处理

1-HTML事件处理：直接添加到HTML结构中，事件名修改后处理不方便
2-DOM0级事件处理：把一个函数赋值给一个事件处理程序属性，会被后面的覆盖
3-DOM2级事件处理：不会被覆盖，比较常用
addEventListener(“事件名”，“事件处理函数”，“布尔值”);
true：事件捕获
false：事件冒泡
removeEventListener();
4-IE事件处理程序：<=IE8的版本中使用
attachEvent
detachEvent

事件对象

事件对象：在触发DOM事件的时候都会产生一个对象
事件对象event：

type：获取事件类型
target：获取事件目标
stopPropagation()：阻止事件冒泡
preventDefault()：阻止事件默认行为

JavaScript内置对象

什么是对象

1-什么是对象：JavaScript中的所有事物都是对象：字符串、数值、数组、函数…
每个对象带有属性和方法
JavaScript允许自定义对象
2-自定义对象：
定义并创建对象实例
使用函数来定义对象，然后创建新的对象实例

String字符串对象

String对象：String对象用于处理已有的字符串，字符串可以使用双引号或单引号
在字符串中查找字符串：indexOf()
内容匹配：match()
替换内容：replace()
字符串大小写转换：toUpperCase()/toLowerCase()
字符串转为数组：strong>split()
字符串的属性和方法：

属性：length、prototype、constructor
方法：charAt()、charCodeAt()、concat()、fromCharCode()、indexOf()、lastIndexOf()、match()、replace()、search()、slice()、substring()、substr()、valueOf()、toLowerCase()、toUpperCase()、split()

Date日期对象

Date对象：日期对象用于处理日期和时间
获得当日的日期：
常用方法：

getFullYear()：获取年份
getTime()：获取毫秒
setFullYear()：设置具体的日期
getDay()：获取星期

时钟实例

Array数组对象

Array对象：使用单独的变量名来存储一系列的值
数组的创建：var myArray=["hello","iwen","ime"];
数组的访问：通过制定数组名以及索引号码，你可以访问某个特定的元素；注意：[0]是数组的第一个元素，[1]是数组的第二个元素。
数组常用方法：

concat()：合并数组
sort()：排序
push()：末尾追加元素
reverse()：数组元素翻转

Math对象

Math对象：执行常见的算数任务
常用方法：

round()：四舍五入
random()：返回0～1之间的随机数
max()：返回最高值
min()：返回最低值
abs()：返回绝对值

JavaScriptDOM对象控制HTML

方法：

getElementsByName()：获取name
getElementsByTagName()：获取元素
getAttribute()：获取元素属性
setAttribute()：设置元素属性
childNodes()：访问子节点
parentNode()：访问父节点
createElement()：创建元素节点
createTextNode：创建文本节点
insertBefore()：插入节点
removeChild()：删除节点
offsetHeight：网页尺寸，不包含滚动条
scrollHeight：网页尺寸，包含滚动条

JavaScript浏览器对象

window对象

1-window对象：
window对象是BOM的核心，window对象指当前的浏览器窗口
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一
2-window尺寸
window.innerHeight-浏览器窗口的内部高度
window.innerWidth-浏览器窗口的内部宽度
3-window方法
window.open()-打卡新窗口
window.close()-关闭当前窗口

计时器

计时事件：通过使用JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件
计时方法：

setInterval()：间隔指定的毫秒数不停地执行指定的代码
clearInterval()：用于停止setInterval()方法执行的函数代码
setTimeout()：暂停指定的毫秒数后执行指定的代码
clearTimeout()：用于停止执行setTimeout()方法的函数代码

History对象

History对象：window.history对象包含浏览器的历史(URL)的集合
History方法：

history.back()：与在浏览器点击后退按钮相同
history.forward()：与在浏览器中点击按钮向前相同
history.go()：进入历史中的某个页面

Location对象

Location对象：window.location对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面。
Location对象的属性：

location.hostname：返回web主机的域名
location.pathname：返回当前页面的路径和文件名
location.port：返回web主机的端口
location.protocol：返回所使用的web协议(http://或https://)
location.href：属性返回当前页面的URL
location.assign()：方法加载新的文档

Screen对象

Screen对象：window.screen对象包含有关用户屏幕的信息
属性：

screen.availWidth：可用的屏幕宽度
screen.availHeight：可用的屏幕高度
screen.Height：屏幕高度
screen.Width：屏幕宽度

JavaScript瀑布流效果

布局

实例

JavaScript面向对象

认识面向对象

面向对象中的概念：
一切事物皆对象
对象具有封装和继承特性
信息隐藏

基本面向对象

var person={ 
	name:"iwen",
	age:30,
	eat:function(){
		alert("能吃")
	}
}

函数构造器构造对象

function Person(){}
Person.prototype = {
	name:"iwen",
	age:30,
	eat:function(){
		alert("我在吃")
	}
}
var p = new Person();
p.name

深入JavaScript面向对象

(function(){
	var n = "ime";
	function People(name){
	this._name = name;
	}
	People.prototype.say = function(){//扩展方法
		alert("peo-hello"+this._name+n);
	}
	window.People = People;
}());

(function(){
	function Student(name) {
	this._name = name;
	}
	Student.prototype = new People();//Student继承People
	var superSay = Student.prototype.say;
	Student.prototype.say = function(){//复写父类方法
		superSay.call(this);
		alert("stu-hello"+this._name);
	}
	window.Student = Student;
}());
var s = new Student("iwen");
s.say()

function Person(name){
	var _this = {}
	_this._name = name;
	_this.sayHello = function(){
		alert("PHello"+_this._name);
	}
	return _this;
}

function Teacher(name){
	var _this = Person(name);
	var superSay = _this.sayHello;
	_this.sayHello = function(){
	superSay.call(_this);
		alert("Thello"+_this._name);
	}
	return _this;
}
var t = Teacher("iwen");
t.sayHello();

阿西代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记

JavaScript笔记JavaScript基础JavaScript介绍JavaScript实现JavaScript输出JavaScript语法JavaScript注释JavaScript变量JavaScript数据类型JavaScript语法JavaScript函数JavaScript异常捕获JavaScript事件JavaScript-DOMJavaScript事件详解JavaScript内置对象JavaScriptDOM对象控制HTMLJavaScript浏览器对象JavaScript瀑布流效果Jav
复制链接

扫一扫

专栏目录