Javascript基本介绍

2017-09-29 本文已影响0人 Yinag

我的一贯作风：首先，放一张图来表示我要说明的东西。

（一）
1.Javascript是什么？
JavaScript是一种基于对象和事件驱动的解释性的脚本弱类型语言，与HTML结合，增强功能，并提高与最终用户间的交互性能。大部分使用者将它用于创建动态交互网页，为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
2.基本特点
a、解释执行，事先不编译；逐行执行，无需进行严格的变量声明；
b、简洁易用，可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序
c、基于对象，内置大量现成对象，编写少量程序可以完成目标
d、跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
3.用途
a、适合做哪些事情：
客户端数据计算，表单合法性验证；浏览器对象的调用，事件的触发；网页特殊显示效果制作
b、不适合做哪些事情：
大型应用程序，图像、多媒体处理，网络实时通讯应用
（二）组成部分

三大结构
1、语法
Javascript 必须嵌套在HTML文档中，才能使用
嵌入网页的三种方式
a、在定义事件时直接写入JavaScript脚本（在标签中写）

<input type="button" value="点我去百度" onclick="window.open('http://www.baidu.com')" />

b、在网页中直接嵌入JavaScript

<input type="button" value="点我去百度" onclick="goBaiDU()" />
    <script type="text/javascript">
        function goBaiDU(){
            window.open('http://www.baidu.com');
        }
    </script>

c、在网页中调用独立JavaScript文件(提倡)

<script type="text/javascript" src="../js/01_.js"></script>     //引用外部js文件  
<input type="button" value="点我去百度" onclick="goBaiDU()" />

建议：写成单独的js文件有利于结构和行为的分离。<script> </script> 可放在网页任意位置，且一个页面中可放几个<script> </script> 它们之间不同部分的方法与变量可以共享的

数据类型

在HTML中大小写是不敏感的，但是在JavaScript程序中大小写是敏感的
分类

a 、String类型
（1）字符串常量首尾由单引号或双引号括起
（2）JavaScript 中没有字符类型，即无char
（3）特殊字符：必须加上右字符串中部分划线\

特殊字符

b、Null、Undefined
（1）Null在程序中代表变量没有值
（2）Undefined代表变量的值尚未指定
c、数组——定义一系列变量
（1）数组中元素的类型可以不一致，数组元素也可以是一个数组，即多维数组；
（2）数组长度可以随意改变的，定义数组长度时，不会固定死。之后，也可以不断地添加元素，不会报错的；
d、函数

函数的定义:
function  函数名 (参数){
    函数体;
    return 返回值;
}

（1）可以使用变量、常量或表达式作为函数调用的参数
（2）函数由关键字function定义
（3）函数名的定义规则与标识符一致，大小写是敏感的
（4）返回值必须使用return

其余的和大部分语言一样，有：数据强制性转换、运算符、控制语句。在此不详细说明

2、对象
JavaScript是一种基于对象语言，对象是JavaScript中最重要的元素。对象是一系列属性与方法的集合。
属性,可以是基本数据类型，也可是复合数据类型。
访问对象属性与方法，通过.号

JavaScript包含四种对象：

内置对象：Date,Math,String,Array…
自定义对象：Person,Card
浏览器对象： window,document…
ActiveX对象：ActiveXObject（AJAX中讲到）

3、BOM（Browser Object Model）浏览器对象模型

BOM对象

Window对象
（1）window 对象是 JavaScript 层级中的顶层对象
（2）代表一个浏览器窗口或一个框架
（3）在 <body> 或 <frameset> 每次出现时被自动创建
A、属性
status 状态栏
opener 获取创建当前窗口的窗口的引用
B、window对象的方法
open() 打开新窗口
alert() 显示一个警告框
confirm() 选择确定。
prompt() 输入框
setTimeout() 一次性定时器，延时器
setInterval() 周期性定时器，时间
Location 对象
href 设置或获取整个URL为字符串
reload(）重新装入当前页面，常用于刷新
screen 对象
availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏
availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏
height 获取屏幕的垂直分辨率
width 获取屏幕的水平分辨率
Document对象属性：
forms 获取页面所有表单对象

eg:window.document.forms.length;    //window.document.forms相当于一个数组

images 获取页面所有图片对象
links 获取所有含有href属性的超链接对象
referrer 获取将用户引入当前页面的位置URL
bgColor 设置或获取表明对象后面的背景颜色的值。
fgColor 设置或获取文档的前景(文本)颜色。
方法：
write() 在指定窗口的文档中写入一个或多个 HTML表达式

History对象
length 获取历史列表中的元素数目
go(0) 从历史列表中装入URL，参数为0时表示浏览器刷新
Navigator对象
appName 获取浏览器的名称
appVersion 获取浏览器运行的平台和版本

4. DOM （Document Object Model）文档对象模型

DOM树
举个栗子：

DOM树

如上图所示，HTML文档是由节点构成的集合，四种常见的DOM节点
（1）文档节点document
（2）元素节点——标签 Element
（3）文本节点——文字内容 TextElement
（4）属性节点——元素属性 AtrributeElement

DOM属性

（1）文档里的每个节点都有以下属性。
nodeName:一个字符串，其内容是给定节点的名字。 var name = node.nodeName;

如果节点是元素节点，nodeName返回这个元素的名称
如果是属性节点，nodeName返回这个属性的名称
如果是文本节点，nodeName返回一个内容为#text 的字符串
注:nodeName 是一个只读属性。

（2）nodeType：返回一个整数，这个数值代表着给定节点的类型。
nodeType 属性返回的整数值,常用的有三种：
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
nodeType 是个只读属性
（3）
nodeValue：返回给定节点的当前值（字符串）
如果给定节点是一个属性节点，返回值是这个属性的值。
如果给定节点是一个文本节点，返回值是这个文本节点的内容。
如果给定节点是一个元素节点，返回值是 null
nodeValue 是一个读/写属性，但不能对元素节点的 nodeValue 属性设置值，
但可以为文本节点的 nodeValue 属性设置一个值。

查找元素节点
- getElementById() 返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.
- 返回是节点集合：
  getElementsByName() 寻找有着给定name属性的所有元素
  getElementsByTagName() 寻找有着给定标签名的所有元素
查看是否存在子节点
hasChildNodes()
该方法用来检查一个元素是否有子节点，返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.
替换子节点 replaceChild()
把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中
查找属性节点和值
getAttribute()
返回一个给定元素的一个给定属性节点的值
var attributeValue = element.getAttribute(attributeName);
getAttributeNode()通过属性获取属性节点

Javascript基本介绍

猜你喜欢

热点阅读