面向对象的语言和面向过程有什么区别啊
1.不同的编程想法
1.过程:这是一个过程中心的编程想法。
2.面向对象的语言:这是一种基于对象作为基本程序结构单元的编程语言。所述描述的设计基于对象作为核心,该对象是程序运行的基本组件。
不同的特征
1.过程:这是分析问题所需的步骤,然后使用功能逐步实现这些步骤。
2.面向对象的语言:识别系统中的基本组件可以考虑一组已识别的离散对象。该对象具有唯一的静态类型和多种可能的动态类型和操作。
三个不同的优势
1.过程:它不支持丰富的“面向对象的”功能(例如继承,多态性),也不允许混合持续状态和域逻辑。
2.面向对象的语言:它表示为内部属性集的指针。此对象的任何操作都将传递此指针操作对象的属性和方法。
参考数据来源:Baidu百科全书 - 面向对象的语言
参考数据来源:Baidu百科全书的过程
JavaScript入门教程(9) Document文档对象
描述当前窗口或指定窗口对象的文档。它包含了文档从《head》到《/body》的内容。
用法:document
(当前窗口)
或
《窗口对象》.document
(指定窗口)
属性:
document.title
//设置文档标题等价于HTML的《title》标签
document.bgColor
//设置页面背景色
document.fgColor
//设置前景色(文本颜色)
document.linkColor
//未点击过的链接颜色
document.alinkColor
//激活链接(焦点在此链接上)的颜色
document.vlinkColor
//已点击过的链接颜色
document.URL
//设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate
//文件建立日期,只读属性
document.fileModifiedDate
//文件修改日期,只读属性
document.fileSize
//文件大小,只读属性
document.cookie
//设置和读出cookie
document.charset
//设置字符集
简体中文:gb2312
cookie
关于
cookie
请参看“使用框架和
Cookies”一章。
lastModified
当前文档的最后修改日期,是一个
Date
对象。
referrer
如果当前文档是通过点击连接打开的,则
referrer
返回原来的
URL。
title
指《head》标记里用《title》...《/title》定义的文字。在
Netscape
里本属性不接受赋值。
fgColor
指《body》标记的
text
属性所表示的文本颜色。
bgColor
指《body》标记的
bgcolor
属性所表示的背景颜色。
linkColor
指《body》标记的
link
属性所表示的连接颜色。
alinkColor
指《body》标记的
alink
属性所表示的活动连接颜色。
vlinkColor
指《body》标记的
vlink
属性所表示的已访问连接颜色。
方法:
open()
打开文档以便
JavaScript
能向文档的当前位置(指插入
JavaScript
的位置)写入数据。通常不需要用这个方法,在需要的时候
JavaScript
自动调用。
write();
writeln()
向文档写入数据,所写入的会当成标准文档
HTML
来处理。writeln()
与
write()
的不同点在于,writeln()
在写入数据以后会加一个换行。这个换行只是在
HTML
中换行,具体情况能不能够是显示出来的文字换行,要看插入
JavaScript
的位置而定。如在《pre》标记中插入,这个换行也会体现在文档中。
clear()
清空当前文档。
close()
关闭文档,停止写入数据。如果用了
write()
或
clear()
方法,就一定要用
close()
方法来保证所做的更改能够显示出来。如果文档还没有完全读取,也就是说,JavaScript
是插在文档中的,那就不必使用该方法。
现在我们已经拥有足够的知识来做以下这个很多网站都有的弹出式更新通知了。
复制代码
代码如下:
《script
language=“JavaScript“》
var
whatsNew
=
open(’’,’_blank’,’top=50,left=50,width=200,height=300,’
+
’menubar=no,toolbar=no,directories=no,location=no,’
+
’status=no,resizable=no,scrollbars=yes’);
whatsNew.document.write(’《center》《b》更新通知《/b》《/center》’);
whatsNew.document.write(’《p》最后更新日期:00.08.01’);
whatsNew.document.write(’《p》00.08.01:增加了“我的最爱”栏目。’);
whatsNew.document.write(’《p
align=“right“》’
+
’《a
href=“javascript:self.close()“》关闭窗口《/a》’);
whatsNew.document.close();
《/script》
当然也可以先写好一个
HTML
文件,在
open()
方法中直接
load
这个文件。
-面向对象
JS中几种获取对象宽度和高度的区别
1、clientWidth / clintHeight
clientWidth = 元素的宽度 + 元素的paddingLeft + 元素的paddingRight
clientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom
注意:如果该元素上存在上下滑动滚动条,则clientWidth的值不包括滚动条所占的宽度(即获得的clientWidth已经减去了滚动条的宽度)
注意:如果该元素上存在左右滑动滚动条,则clientHeight的值不包括滚动条所占的宽度(即获得的clientHeight已经减去了滚动条的高度)
2、clientTop / clientLeft
clientTop - 可视区域的上边距距离自身上边框的外边框的距离(即为上边框的宽度)
clientLeft - 可视区域的左边距距离自身左边框的外边框的距离(即为左边框的宽度)
没有滑动条的效果代码如下:
view plain copy
《!DOCTYPE html》
《html》
《head》
《meta charset=“UTF-8“》
《title》获取元素的高度和宽度《/title》
《style type=“text/css“》
#wrap{
height: 500px;
width: 500px;
background-color: skyblue;
margin: 0 auto;
border: 3px solid red;
overflow: scroll;
}
#content{
height: 200px;
width: 200px;
background-color: greenyellow;
margin: 0 auto;
border: 0px solid yellow;
border-width: 5px 6px 8px 12px;
padding: 5px 4px 6px 12px;
margin-top: 50px;
}
《/style》
《/head》
《body》
《div id=“wrap“》
《div id=“content“》《/div》
《/div》
《/body》
《script type=“text/javascript“》
//获取content对象
var contentObj = document.getElementById(“content“);
console.log(contentObj.clientHeight);
console.log(contentObj.clientWidth);
《/script》
《/html》
以上结果输出的即为id为content的div的clientHeight 和 clientWidth 分别为 211 = height(200) + paddingTop(5) + paddingBottom(6)
有滚动条的代码如下,
在content div的里面添加一个id为one的div让新添加的div超出隐藏即可出现滚动条
view plain copy
《!DOCTYPE html》
《html》
《head》
《meta charset=“UTF-8“》
《title》获取元素的高度和宽度《/title》
《style type=“text/css“》
#wrap{
height: 500px;
width: 500px;
background-color: skyblue;
margin: 0 auto;
border: 3px solid red;
overflow: scroll;
padding: 5px;
}
#content{
height: 200px;
width: 200px;
background-color: greenyellow;
margin: 0 auto;
border: 0px solid yellow;
border-width: 5px 6px 8px 12px;
padding: 5px 4px 6px 12px;
margin-top: 50px;
overflow: scroll;
}
#one{
height: 300px;
width: 300px;
}
《/style》
《/head》
《body》
《div id=“wrap“》
《div id=“content“》
《div id=“one“》《/div》
《/div》
《/div》
《/body》
《script type=“text/javascript“》
//获取content对象
var contentObj = document.getElementById(“content“);
console.log(contentObj.clientHeight);
console.log(contentObj.clientWidth);
console.log(contentObj.clientTop);
console.log(contentObj.clientLeft);
《/script》
《/html》
最后输出的结果为clientHeight 和 clientWidth分别为 196 = height(200) + paddingTop(5) + paddingBottom(6) - 滚动条的宽度(15)
201 = width(200) + paddingLeft(12) + paddingRight(4) - 滚动条的宽度(15)
3、offsetHeight / offsetWidth
offsetHeight / offsetWidth实际上获取的内容和clientHeight / clientWidth的差别在于,offsetHeight和offsetWidth 不仅包括元素的高度和宽度和padding的值,而且包括border的宽度
注意:offsetHeight / offsetWidth包括滚动条的宽度(这一点与clientHeight / clientWidth)不同
view plain copy
《!DOCTYPE html》
《html》
《head》
《meta charset=“UTF-8“》
《title》获取元素的高度和宽度《/title》
《style type=“text/css“》
#wrap{
height: 500px;
width: 500px;
background-color: skyblue;
margin: 0 auto;
border: 3px solid red;
overflow: scroll;
padding: 5px;
}
#content{
height: 200px;
width: 200px;
background-color: greenyellow;
margin: 0 auto;
border: 0px solid yellow;
border-width: 5px 6px 8px 12px;
padding: 5px 4px 6px 12px;
margin-top: 50px;
overflow: scroll;
}
#one{
height: 300px;
width: 300px;
}
《/style》
《/head》
《body》
《div id=“wrap“》
《div id=“content“》
《div id=“one“》《/div》
《/div》
《/div》
《/body》
《script type=“text/javascript“》
//获取content对象
var contentObj = document.getElementById(“content“);
console.log(contentObj.offsetHeight);
console.log(contentObj.offsetWidth);
console.log(contentObj.offsetLeft);
console.log(contentObj.offsetTop);
《/script》
《/html》
输出的结果:offsetHeight = height(200) + paddingTop(5) + paddingBottom(6) + borderTop(5) + borderBottom(8)
offsetWidth = width(200) + paddingLeft(12) + paddingRight(4) + borderLeft(12) + borderRight(6)
4、offsetTop / offsetLeft
offsetTop - 该元素的上边框的外边缘距离父级元素上边框的内边缘的距离
offsetLeft - 该元素的左边框的外边缘距离父级元素左边框的内边缘的距离
5、scrollHeight / scrollWidth
scrollHeight = 子级超出父级的元素的高度 + 父级的上下padding值
scrollWidth = 子级超出父级的元素的宽度 + 父级的左padding
6、scrollTop
scrollTop 元素滚动的距离-对象