JavaWeb快速入门--JavaScript(2)

最新推荐文章于 2023-12-17 22:24:31 发布

龙源lll

最新推荐文章于 2023-12-17 22:24:31 发布

阅读量874

点赞数 1

分类专栏： javaweb学习文章标签： javascript javaweb

本文链接：https://blog.csdn.net/Lzy410992/article/details/105708808

版权

javaweb学习专栏收录该内容

26 篇文章 29 订阅

订阅专栏

上一篇：JavaWeb学习总结03–JS(1)
下一篇：JavaWeb学习总结05–Bootstrap

作为一种嵌入到HTML页面内的解释型程序设计语言，JavaScript脚本语言的基本构成是由语句、函数、对象、属性等来实现的。JavaScript语句是发给浏览器的命令，这些命令是告诉浏览器要做的事情。比如我们之前打印九九乘法表时使用的document.write("…");语句，就是再告诉浏览器向页面输出这样一段文本。和其他编程语言一样，一般情况下我们语句结尾出都会加一个分号来表示语句的结束。

对象与函数

1. Function：函数(方法)对象
一个函数代表一个特定的功能，JavaScript的函数由系统本身提供的内部函数，也有一些系统对象的函数或自定义的函数。

基本语法：

var fun = new Function(形式参数列表,方法体);  //不常用

function 方法名称(形式参数列表){
   方法体
}

var 方法名 = function(形式参数列表){
   方法体
}

function是关键字，一个函数必须由 “function” 关键字开始；函数名用来再调用时使用，命名必须符合有关标识符的命名规定；函数调用只与方法的名称有关，与参数列表无关。函数的括号必须保留，可以用来设置参数，大括号内是函数体，属于函数的语句必须再大括号内。
函数调用： 方法名称(实际参数列表);

2. Array:数组对象
数组对象用来在单独的变量名中存储一系列值，避免同时声明很多变量使程序结构变得复杂，数组一般对同类型的数据通过循环语句逐个进行处理。
定义数组：

定义数组直接初始化数组元素：
var arr = new Array(元素列表);
var arr = [元素列表];

先定义数组，在初始化元素
var arr = new Array(默认长度);
arr[0]="元素";...

JavaScript是弱类型的语言，对数组的长度没有特别的限制，可以根据需要进行添加和减少，同时可以通过length属性获得数组的实际长度。
数组除了提供了length属性外还提供了，还提供了一些好用的方法：

join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
pop()：删除并返回数组最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
shift()和unshift()在数组的第一个元素之前删除和插入元素

 var cn=arr.join('-');//用短横线做分隔符
 var cn=arr.pop();//删除并返回数组最后一个元素
 var leagth=arr.push("元素");//添加元素并返回长度

3. Date：日期对象
日期对象用来处理和日期时间相关的事情。其定义方式是：var date = new Date();
样例：

var today=new Date();  //自动获取当前时间作为初始值
var birthday=new Date("December 17,1999 08:12:00");//按日期字符串设置对象
birthday=new Date(1999,12,06);//按年、月、日设置对象
birthday=new Date(1999,12,06,3,22,30);//按年、月、日、时、分、秒设置对象

获取日期的方法：

getTime();//获取当前时间，到毫秒
toLocaleString()//字符串格式返回时间
getDate();//返回一个月中的某一天
getDay();//返回一周中的某一天
getMonth();//返回月份
getFullYear();//按四位数字返回年份
getHours();//返回小时
getMinutes();//返回分钟
getSeconds();//返回秒数
getMillisecinds();//返回毫秒

4. Math：数学对象
Math对象提供多种算术常量和函数，执行普通的算术任务，使用Math对象不用创建，可以直接使用（ Math.方法名();）

Math中的常量：E、LN2、LN10、LOG2E、LOG10E、PI、SQRT1_2、SQRT2
Math中的方法：
 random()：返回 0 ~ 1 之间的随机数,含0不含1
 sqrt()：返回平方根
 max()：最大值
 min()：最小值
 ceil(x)：对数进行上舍入。
 floor(x)：对数进行下舍入。
 round(x)：把数四舍五入为最接近的整数。
 exp()：返回e的指数
 log()：返回自然对数
 pw()：返回x的y次幂

5. Number：数值对象
Number用来表示数值对象，JavaScript会自动在原始数据的对象之间转换。同时Number也不用创建对象，直接使用数值变量名即可var s=x.方法名(参数)。
Number中的方法：

toString(redix);//按照指定的进制数转化为字符串，默认为十进制
toFixed();//将Number四舍五入为指定小数位数的数字

6. String：字符串对象
字符串是JavaScript中使用不叫普遍的一个类型，我们可以通过var s1="Hello World";或var s2=new String("Hello World");两种方式定义字符串。
字符串中常用的属性和方法：

length;//获取字符个数
charAt(n);//获取指定位置的字符
indexOf(search,index);//从指定位置开始，搜索字符串第一次出现的位置  
lastIndexOf();//字符串最后出现的位置
split();//将字符串分割成字符串数组
toLowerCase();//把字符串转换为小写
toUpperCase();;//把字符串转换为大写

7. RegExp：正则表达式对象
正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。
定义字符串的组成规则。

* 单个字符:[],如：[a] [ab] [a-zA-Z0-9_]

* 特殊符号代表特殊含义的单个字符:
	\d:单个数字字符 [0-9]
	\w:单个单词字符[a-zA-Z0-9_]

* 量词符号：
	?：表示出现0次或1次
	*：表示出现0次或多次
	+：出现1次或多次
	{m,n}:表示 m<= 数量 <= n
	m如果缺省： {,n}:最多n次
	n如果缺省：{m,} 最少m次
* 开始结束符号
	^:开始	$:结束

创建方式：

var reg = new RegExp("正则表达式");
var reg = /正则表达式/;
方法:	
test(参数):验证指定的字符串是否符合正则定义的规范

8. Global：全局对象
Global是全局对象，封装的方法不需要对象就可以直接调用。方法名();

encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字，逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN，NaN自己无法识别自己,NaN参与的==比较全部问false
eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。

URL编码：
传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

DOM：

DOM(Document Object Model)：文档对象模型，用来控制文档的内容，将标记语言文档的各个部分封装为对象，通过使用这些对象对标记语言文档进行操作，使用户和网页之间的交互更加丰富。JavaScript可以通过document对象访问这个模型中的所有页面元素。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment:注释对象
Node：节点对象
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

理解结点：
Node：结点对象，其他5个的父对象，document实际上是该页面上所有页面元素的集合，通过它可以访问页面中所有的元素，DOM中的每一个对象都可以被认定为一个节点，指该页面上的某个元素。<html>是页面的结点，是所有元素的根，可以通过document.documentElement;来获得，同时结点还包括：子结点、父结点、兄弟结点，可以通过相关方法来访问：

childNodes;//获取自己的子结点
firstChild;//获取第一个子结点
lastChild;//获取最后一个子结点
parentNode;//获取结点的父结点
previousSibling;//返回结点的前一个结点
nextSibling;//返回结点的后一个结点
CRUD dom树：
	appendChild();  //向节点的子节点列表的结尾添加新的子节点
	removeChild();	//删除（并返回）当前节点的指定子节点
	replaceChild(); //用新节点替换一个子节点

访问页面元素：
获取页面标签(元素)对象：Element

通过ID访问页面元素：document.getElementById("id值"); ，可以通过.value访问标签中的内容
通过Name访问页面元素：getElementsByName();，返回值是一个数组
通过标签名访问页面元素：getElementsByTagName();，返回值是一个数组
通过Class属性值访问页面元素：getElementsByClassName();，返回值是一个数组
另外我们还可以通过document.froms方法获得页面中的所有from对象

创建其他DOM对象：

createAttribute(name)
createComment()
createElement()
createTextNode()

修改属性：

removeAttribute()：删除属性
setAttribute()：设置属性

操作Element对象：
上面介绍了获取页面元素的方法，获取元素之后，我们就可以可以通过修改元素的属性值来达到动态修改页面的效果。这里我们提供一个属性值：innerHTML，这个属性可以用来修改标签提的内容。同时我们也可以直接对元素属性就行修改：

<script type="text/javascript">
function changeColor(){
	var newColor =("请输入一个颜色，格式为#ffffff","#87ceeb");
	var tb=document.getElementById("table1");
	if(tb!=null){
	    tb.style.backgroundColor=newColor;
	}
}
</script>

BOM:

BOM(Browser Object Model) 浏览器对象模型，将浏览器的各个组成部分封装成对象。由Window：窗口对象、Navigator：浏览器对象、Screen：显示器屏幕对象、History：历史记录对象、Location：地址栏对象五部分组成。

Window：窗口对象
Window对象是JavaScript层级中的顶级对象，在浏览器的网页中会自动的拥有Window对象，我们可以直接使用。Window中提供了一些重要的属性 方法名();或window.方法名();，象上面用到的document对象就属于Window对象所有，另外还有：

history：该对象记录一系列用户访问的网址，可以通过back()、forward()、go()放法重复执行以前的访问，同时可以通过leagth属性返回当前窗口历史列表中的URL数量。
location：表示当前显示文档的Web地址，可以用它修改显示当前窗口,如果把一个含有URL的字符串赋予location或它的href属性，就可以在当前窗口显示内容
navigator：有关客户机浏览信息的对象
screen：存放关于浏览器屏幕的信息
parent：获取当前窗口的父窗口引用

Window对象中的主要方法：

与弹出框有关的方法：
alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确定按钮，则方法返回true，如果用户点击取消按钮，则方法返回false；
prompt()：显示可提示用户输入的对话框，返回值：获取用户输入的值
与打开关闭有关的方法：
close()：关闭浏览器窗口。
open()：打开一个新的浏览器窗口，返回新的Window对象
与定时器有关的方式
setTimeout()：在指定的毫秒数后调用函数或计算表达式，参数：js代码或者方法对象或毫秒值，返回值：唯一标识，用于取消定时器
clearTimeout()：取消由 setTimeout() 方法设置的 timeout。

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()：取消由 setInterval() 设置的 timeout。

事件编程

事件是可以被浏览器监听到的行为，HTML对一些页面元素规定了可以响应的事件。将事件，事件源，监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器代码。

监听的概念： 某些组件被执行了某些操作后，触发某些代码的执行。

网页访问中常见的事件：

点击事件：
onclick：单击事件
ondblclick：双击事件
焦点事件
onblur：失去焦点
onfocus:元素获得焦点。
加载事件：
onload：一张页面或一幅图像完成加载。
鼠标事件：
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
键盘事件：
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
选择和改变
onchange 域的内容被改变。
onselect 文本被选中。
表单事件：
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。

如何绑定事件
直接在html标签上，指定事件的属性(操作)，属性值就是js代码，然后通过js获取元素对象，指定事件属性，设置一个函数就完成的事件的绑定：

<body>
	<img id="light" src="img/off.gif"  onclick="fun();">
	<img id="light2" src="img/off.gif">
	<script>
	    function fun(){
	        alert('我被点了');
	        alert('我又被点了');
	    }
	    function fun2(){
	        alert('咋老点我？');
	    }
	    //1.获取light2对象
	    var light2 = document.getElementById("light2");
	    //2.绑定事件
	    light2.onclick = fun2;
	</script>
</body>

案例：电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
    /*分析：
            1.获取图片对象
            2.绑定单击事件
            3.每次点击切换图片
                * 规则：
                    * 如果灯是开的 on,切换图片为 off
                    * 如果灯是关的 off,切换图片为 on
                * 使用标记flag来完成*/
    //1.获取图片对象
    var light = document.getElementById("light");
    var flag = false;//代表灯是灭的。 off图片
    //2.绑定单击事件
    light.onclick = function(){
        if(flag){//判断如果灯是开的，则灭掉
            light.src = "img/off.gif";
            flag = false;
        }else{
            //如果灯是灭的，则打开
            light.src = "img/on.gif";
            flag = true;
        }
    }   
</script>
</body>
</html>