JavaScript初识(三)
十三丶JS中的面向对象
创建对象的几种常用方式:
1.使用Object或对象字面量创建对象
2.工厂模式创建对象
3.构造函数模式创建对象
4.原型模式创建对象
下面我们详细看一下如何创建对象
1.使用Object或对象字面量创建对象
JS中最基本创建对象的方式:
<script type="text/javascript">
var student = new Object();
student.name = "alex";
student.age = "20" </script>
字面量方式创建对象:
var student = {
name:"alex",
age:18
};
2.工厂模式创建对象
以上的方式看似简便,但是我们要是创建很多个同类的呢?我们是不是得把以上代码重复n次呢,是否可以像工厂车间那样,不断生产呢?那就让我们看看工厂车间那样,如何"产出"对象
function createStudent(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
var student1 = createStudent('easy',20);
var student2 = createStudent('easy2',20)
...
var studentn = createStudent('easyn',20)
3.构造函数模式创建对象
在上面创建Object这样的原生对象的时候,我们就使用过其构造函数:
var obj = new Object();
在创建原生数组Array类型对象时也使用过其构造函数:
var arr = new Array(10); //构造一个初始长度为10的数组对象
在进行自定义构造函数创建对象之前,我们先了解一下构造函数和普通函数有什么区别.
1丶实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法.对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数.
2丶按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者,例如上面的new Array(),new Object().
3.使用new操作符调用构造函数时,会经历(1)创建一个新对象(2)将构造函数作用域赋给新对象(指this指向该新对象)(3)执行构造函数代码(4)返回新对象;4个阶段
我们使用构造函数将工厂模式的函数重写,并添加一个方法属性
function Student(name,age){
this.name = name;
this.age = age;
this.alertName = function(){
alert(this.name)
};
}
function Fruit(name,color){
this.name = name;
this.color = color;
this.alertName = function(){
alert(this.name)
};
}
4.原型的模式创建对象
原型链甚至原型继承,是整个JS中最难的一部分,也是最不好理解的一部分.
//原型模式创建对象
function Student(){
this.name = "easy";
this.age = 20;
}
Student.prototype.alertName = function(){
alert(this.name);
}; var stu1 = new Student();
var stu2 = new Student(); stu1.alertName(); //easy
stu2.alertName(); //easy alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数
十四丶定时器
(1)一次性定时器
可以做异步
(2)循环周期定时器
可以做动画
JS跟python一样都有垃圾回收机制,但是定时器对象垃圾回收是回收不了的
1.setTimeOut()一次性定时器,只在指定时间后执行一次
<script type="text/javascript">
<!--一次性定时器-->
function hello(){
alert("hello");
}
<!--使用方法名字执行方法-->
var t1 = window.setTimeout('hello',1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.cleatTimeout(t1);//去掉定时器
</script>
2.setInterval()
//循环周期定时器
setInterval('refreshQuery()',8000);
function refreshQuery(){
console.log("每8秒调一次")
}
练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id = "start">开启定时器</button>
<button id = "clear">清除定时器</button> <div id="box"></div>
<script type="text/javascript">
var count = 0;
var timer = null;
document.getElementById("start").onclick = function(){
var oDiv = document.getElementById("box");
clearInterval(timer); timer = setInterval(function(){
count += 10;
oDiv.style.marginLeft = count + "px";
oDiv.style.marginTop = count/2 +"px"
},50)
}
</script>
</body>
</html>
十五丶BOM的介绍
BOM; Browser Object Model,浏览器对象模型.
window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以成为window对象的子对象,DOM是BOM的一部分.
1丶弹出系统对话框
比如说,alert(1)是window.alert(1)的简写,以为它是window的子方法.
系统对话框有三种:
alert(); //不同浏览器中的外观是不一样的
confirm(); //兼容不好
prompt(); //不推荐使用
2.打开窗口丶关闭窗口
(1)打开窗口:
window.open(url,target)
url:要打开的地址
target:新窗口的位置.可以是:_blank丶_self丶_parent父框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <!--行间的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button> <button>打开百度</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button> </body>
<script type="text/javascript"> var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3]; oBtn.onclick = function(){
open('https://www.baidu.com') //打开空白页面
// open('about:blank',"_self")
}
closeBtn.onclick = function(){
if(confirm("是否关闭？")){
close();
}
} </script>
</html>
location对象
window.location可以简写成location.location 相当于浏览器地址栏,可以将url解析成独立的片段.
location对象的属性
href:跳转
hash 返回url中#后面的内容,包括#
host 主机名,包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议一般是http丶https
search 查询字符串
location.href属性举例:
点击盒子时，进行跳转。
<body>
<div>smyhvae</div>
<script> var div = document.getElementsByTagName("div")[0]; div.onclick = function () {
location.href = "http://www.baidu.com"; //点击div时，跳转到指定链接
// window.open("http://www.baidu.com","_blank"); //方式二
} </script>
</body>
5秒后自动跳转到百度。
<script>
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>
location.reload()：重新加载
setTimeout(function(){
//3秒之后让网页整个刷新
window.location.reload();
},3000)
navigator对象
window.navigator 的一些属性可以获取客户端的一些信息。
userAgent:系统丶浏览器
platform;浏览器支持的系统,win/mac/linux
console.log(navigator.userAgent);
console.log(navigator.platform);
history对象
1、后退：
history.back()
history.go(-1)：0是刷新
2、前进：
history.forward()
history.go(1)
用的不多。因为浏览器中已经自带了这些功能的按钮：
十六丶client丶offset丶scroll系列
先来了解一下自执行函数:
(function(window) {
var a = 5;
// import
window.$ = a;
})(window);
1.js
(function(window) {
var a = 6;
window.$1 = a;
})(window);
2.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="1.js"></script>
<script src="2.js"></script>
<script> console.log(window.$);
console.log(window.$1); </script> </body>
</html>
自执行函数
1.client系列
clientTop 内容区域到边框顶部的距离,说白了,就是边框高度
clietLeft 内容区域到边框左部的距离,说白了就是边框的宽度
clientWidth 内容区域+左右padding 不包含border 可视宽度
clientHeight 内容区域+ 上下padding 可视高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
/*position: absolute;*/
border: 10px solid red;
/*margin: 10px 0px 0px 0px;*/
padding: 80px;
}
</style>
</head>
<body>
<div class="box">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
<script type="text/javascript">
/*
* clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
* clientLeft 内容区域到边框左部的距离，说白了就是边框的宽度
* clientWidth 内容区域+左右padding 不包含border 可视宽度
* clientHeight 内容区域+ 上下padding 可视高度
* */ var oBox = document.getElementsByClassName('box')[0];
console.log(oBox.clientTop);
console.log(oBox.clientLeft);
console.log(oBox.clientWidth);
console.log(oBox.clientHeight); </script> </html>
2.屏幕的可视区域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//屏幕 的可视区域
window.onload = function(){
//document.documentElement 获取的是html标签
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
//窗口大小发生变化时,会调用此方法
window.onresize = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
</script>
</body>
</html>
3.offset系列
offsetWidth占位宽 内容+padding+border
offsetHeight 占位高
offsetTop 如果盒子没有设置定位到body的顶部的距离,如果盒子设置定位,那么是以父辈为基准的Top值
offsetLeft:如果盒子没有设置定位到body的左部的距离,如果盒子设置定位,那么是以父辈为基准的left值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style> </head>
<body style="height: 2000px">
<div>
<div class="wrap" style=" width: 300px;height: 300px;background-color: green;position: relative; top: 20px;">
<div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:60px;left: 30px;">
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box')
/*
offsetWidth占位宽 内容+padding+border
offsetHeight占位高
* offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值
* offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值 * */
console.log(box.offsetTop);
console.log(box.offsetLeft);
console.log(box.offsetWidth)
console.log(box.offsetHeight) } </script>
</html>
4.scroll系列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
</style>
</head>
<body style="width: 2000px;height: 2000px;">
<div style="height: 200px;background-color: red;"></div>
<div style="height: 200px;background-color: green;"></div>
<div style="height: 200px;background-color: yellow;"></div>
<div style="height: 200px;background-color: blue;"></div>
<div style="height: 200px;background-color: gray;"></div>
<div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
<p>路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
</p> </div> </body>
<script type="text/javascript"> window.onload = function(){ //实施监听滚动事件
window.onscroll = function(){
// console.log(1111)
// console.log('上'+document.documentElement.scrollTop)
// console.log('左'+document.documentElement.scrollLeft)
// console.log('宽'+document.documentElement.scrollWidth)
// console.log('高'+document.documentElement.scrollHeight) } var s = document.getElementById('scroll'); s.onscroll = function(){
// scrollHeight : 内容的高度+padding 不包含边框
console.log('上'+s.scrollTop)
console.log('左'+s.scrollLeft)
console.log('宽'+s.scrollWidth)
console.log('高'+s.scrollHeight)
}
} </script>
</html>
固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
.header{
width: 100%;
height: 80px;
background-color: red;
}
.content{
width: 100%;
height: 1000px;
background-color: purple;
/*position: relative;*/ }
.fixTop{
width: 100%;
height: 100px;
background-color: green;
position: fixed;
top: 0;
left: 0;
z-index: 1000; } .input{
width: 400px;
height: 60px;
background-color: yellow;
position: absolute;
left: 50%;
margin-left: -200px;
top: 150px; } </style>
</head>
<body> <div class="header"> </div> <div class="content"> <div class="input"></div>
</div>
<div class="fixTop" style="display: none;"></div>
<script> window.onload = function() {
var fromTop = document.getElementsByClassName('input')[0].offsetTop;
var fixBox = document.getElementsByClassName('fixTop')[0]; console.log(fromTop);
var count = 0;
var timer = null;
window.onscroll = function() { var htmlTop = document.documentElement.scrollTop;
console.log(htmlTop); if (htmlTop >= fromTop) {
clearInterval(timer);
timer = setInterval(function () {
count+=10;
fixBox.style.display = 'block'; // fixBox.style.opacity = count;
fixBox.style.height = count+'px'; if (count == 100){
console.log("11111111111111111")
clearInterval(timer);
count = 0
} },200)
}else{
fixBox.style.display = 'none';
} }
}
</script> </body>
</html>
JavaScript初识(三)的更多相关文章
- 学习javascript数据结构(三)——集合
前言 总括: 本文讲解了数据结构中的[集合]概念,并使用javascript实现了集合. 原文博客地址:学习javascript数据结构(三)--集合 知乎专栏&&简书专题:前端进击者 ...
- JavaScript的三种工业化调试方法
JavaScript的三种工业化玩法 软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScri ...
- 初探JavaScript（三）——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
- 前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事
一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
- Emscripten教程之连接C++和JavaScript（三）
本文是Emscripten-WebAssembly专栏系列文章之一,更多文章请查看专栏.也可以去作者的博客阅读文章.欢迎加入Wasm和emscripten技术交流群,群聊号码:939206522. E ...
- JavaScript中有三个可以对字符串编码的函数，分别是： escape(),encodeURI(),encodeURIComponent()
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...
- 【转】SVG与HTML、JavaScript的三种调用方式
原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...
- JS---课程介绍 + JavaScript分三个部分
Web API---课程介绍 DOM: 概念-----能够说出来--理解 作用----记住了----后来理解 回顾JS分几个部分---知道 DOM树---能够说出 ...
- 从ES6重新认识JavaScript设计模式(三): 建造者模式
1 什么是建造者模式? 建造者模式(Builder)是将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示. 建造者模式的特点是分步构建一个复杂的对象,可以用不同组合或顺序建造出不 ...
随机推荐
- LoadRunner 服务器（Linux、Windows） 性能指标度量说明
服务器资源性能计数器 下表描述了可用的计数器: 监控器 度量 说明 CPU 监控器 Utilization 监测 CPU 利用率. 磁盘空间监控器 Disk space 监测可用空间 (MB) 和已用 ...
- [matlab]一道笔试题
x=[1 1; 1 -1; -1 -1; -1 1]'; X=-2:0.01:2; Y=X; N=length(X); [X,Y]=meshgrid(X,Y); Z1=0;Z2=0;Z3=0;Z4=0 ...
- 获取剪切板上DataFormats.Dib格式的文件
if (formats.Contains(System.Windows.Forms.DataFormats.Dib)) { using (var img = System.Windows.Forms. ...
- xgene：疾病相关基因，耳聋，彩色，老年痴呆，帕金森
神经元的传递:一个下游神经元,它接受其上游神经元的各个突触传过来的信号,然而,每个突触对该下游神经元的激活权重是不同的. 从神经网络的本质上说,当人连续.多次遭受失败的时候,大脑内就会释放大量的抑制性 ...
- 我的笔记文档版本控制系统-MediaWiki-安装/基本设置
如果你一直想要一个可以进行版本控制的文档存储工具,那MediaWiki是一个不错的选择.也许,用版本控制来描述MediaWiki有点不妥,但它对于我来说就是如此了.我会将学习笔记都记录在MediaWi ...
- The project was not built since its build path is incomplete. Cannot find the class file for java.lang.Object
The project was not built since its build path is incomplete. Cannot find the class file for java.la ...
- C#事件2
今天又来说一下C#中的事件,为什么会有这个又呢?一个是因为以前写过一篇关于事件的东西,二来呢是因为感觉接口这个东西完全可以替换委托来写事件.因为这两个方面的原因,重新过了一遍C#中的事件. 事件这个东 ...
- 开发过程中--使用base64解决传输字符串加密问题！
反正上周在解决开发公司小工具时,需要将用户输入的字符串加密处理传输,那就直接贴上代码吧,希望能帮上你们: strToArrayBufferToBase64(str) { let pos = 0, le ...
- Ocelot - .Net Core开源网关
Ocelot - .Net Core开源网关 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/10857688.html 源码地 ...
- 不重新编译安装php模块的方法
如果你有下面两种经历: 如果php通过源码安装(php7),如果后来需要开启某个自带模块(例如ldap,snmp等),通常需要重新编译. 另外一些安装php模块的经历,例如redis,swoole,y ...