javascript之动态网页编程

这篇博客详细介绍了JavaScript在动态网页编程中的应用,包括数据类型与变量、运算符和表达式、流程控制语句、函数以及正则表达式等核心概念。讲解了JavaScript如何处理数值型、字符串、布尔值等数据类型,以及如何使用变量、函数和正则表达式进行动态网页的交互和数据处理。此外,还讨论了不同浏览器中事件处理的差异,如鼠标事件的处理,并给出了示例代码。
摘要由CSDN通过智能技术生成
第一章  JavaScript简介
JavaScript在HTML中的使用:
在网页文件的<script></script>标签对中直接编码
将程序代码放置在一个单独的文件中,在网页的适当位置引用这个文件
将程序代码作为某个元素的事件属性值,或超链接的href属性。
<script></script>可以出现在HTML文件中的<head></head>标签对中,也可以出现在<body></body>标签对中,在一个HTML中,可以使用多个<script></script>标签对。并且各段JavaScript代码之间可以相互访问,
<html>
<head>
<title>多段代码分开放置</title>
<style>
/*CSS部分*/
</style>
<link type="text/css" rel="stylesheet" href="1.1.css">
</head>
<body>
<h1>多段代码分开放置</h1>
这里是第一段代码:<br>
<script  language="javascript">
<!--
var x=1;
document.write("<p>这段代码只输出这句话<p>");

//-->
</script>
这里是第二段代码:<br>
<script language="javascript">
<!--
document.write("X="+x+"<p>");
//-->
</script>
这里是第三段代码:<br>
<script language="javascript">
<!--
var y=2;
document.write("y="+y);
//-->
</script>
</body>
</html>
1.2.2代码屏蔽
有些浏览器不能够很好的支持JavaScript,可以将<script></scrpt>中的内容用HTML的注释标记(<!--        //-->)括起来,。
<script  language="javascript">
<!--
alert(new Date());
//-->
</script>
这样支持<script>的浏览器将忽略嵌入在<script></script>中的HTML注释符。当用户浏览器不支持或禁用JavaScript时,如果还想在页面显示一些内容,可以使用<noscript></noscript>标签对,用来显示内容,两者不会同时显示出来。
<!--1.2.html-->
<html>
<head>
<title></title>
<style>

</style>
<link type="text/css" rel="stylesheet" href="1.2.css">

</head>
<body>
<h1>&lt;Script&gt;与&lt;noscript&gt;</h1>
<script language="javascript">
<!--
var a;
a="这是使用&lt;script&gt;定义的内容";
document.write(a);

//-->

</script>
<noscript>
这是使用&lt;noscript&gt;定义的内容。
</noscript>
</body>
</html>
1.2.3在单独文件中使用
可以将脚本文件放置在一个单独的文件中,以.js扩展名结尾,称为JavaScript脚本文件。
<script  src="script.js" language="javascript"></script>
与将脚本放在<script></script>中的效果是一样的。
如:有一名为1.3.js的文件,内容如下:
document.writeln('<h1>这是使用外部JS文件生成的行</h1>');
<!--1.3.html-->
<html>
<head>
<title></title>
<style>
</style>
<link type="text/css" rel="stylesheet" href="1.3.css">
<script src="1.3.js" language="javascript">
</script>
</head>
<body>

</body>
</html>
1.2.4作为属性使用
HTML中的超链接标签<a>的href属性值除了可以使用HTTP,mailto等协议外,还可以使用JavaScript。
<a href="javascript:alert(new Date());">JavaScript</a>
JavaScript扩展了标准的HTML,如下一段代码:
<input type="button" value="test" onlick="alert(new Date());">
注意,用作URL的JavaScript代码前要加JavaScript,以说明用的是JavaScript协议,而事件属性中的JavaScript前不需要加JavaSCript。
1.3   JavaScript基本语法
执行顺序:JavaScript按照在HTML中出现的顺序执行。
JavaSCript对大小写敏感。
HTML不区分大小写。
JavaScript忽略空格,制表符或换行符。
语句与分隔符,块
注释:  //      /*   */
为程序添加注释可以起到两个作用:
第一是解释程序的功能,使程序易于理解。
第二是暂时屏蔽某些语句,等到需要时再取消注释。

JavaScript可以识别HTML注释的开始部分,<!--将其作为单行注释来看待,由于它的特别作用,在使用时应当将其放在脚本的第一行。

第二章  数据类型与变量
JavaScript的数据类型分基本数据类型和复和数据类型,复合数据类型主要有对象,数组与函数。基本数据类型有:数值数据类型,字符串型,逻辑数据类型以及两个特殊数据类型。
数值型:十进制,八进制,十六进制。
特殊值Infinity:当一个数值或或数值表达式的值超出了可表示的最大值的范围,即无穷大。相同的道理,负无穷大:-Infinity
特殊值NaN:含义表示not a number,NaN是唯一一个不可以和自身比较的值。例如:当进行0、0或Infinity求正弦时,结果都为NaN。
<script language="javascript">
<!--
var x=0/0;
if(x!=x)
alert(x);
if(isNaN(x))
alert("x is NaN");
//-->
</script>
Number对象中有关特殊值的属性列表:Number.MAX_VALUE:可表示的最大值
Number.MIN_VALUE:可以表示的最小值
Number.POSITIVE_INFINITY:无穷大
Number.NEGTIVE_INFINITY:无穷小
一个正数被0除是Infinity,一个负数被0除是-Infinity。0/0为NaN。
字串型:
字符串是一组被引号括起来的文本,JavaScript中不对字符与字符串区分 ,字符串是与String对象关联的。可以用charAt()从字符串中提取字符。如:
var myname="thomas";
var thirdletter=myname.charAt(2);
也可以使用length()方法来求字符串的长度。
Boolean值
<!--2.1.html-->
<html>
<head></head>
<body>
<script language="javascript">
<!--
if(navigator.cookieEnabled)
alert("ok");
else
alert("not ok");
//-->
</script>
</body>
</html>
特殊数据类型:包括undefined  null
undefined用来表示不存在的值或者尚未赋值的变量,对一个变量只声明不赋值,或赋值为一个不存在的值。null表示该变量被赋值给了一个空值。
变量:
JavaScript是无类型的,这就意味着JavaScript的对象可以存储任何数据。
变量使用var来声明,使用var语句多次声明同一变量也是允许的,相当于对变量的重新赋值,。
JavaScirpt中,变量基本上和对象的属性是一样的,当JavaScript解释器开始运行时,全在执行任何代码之前创建一个全局对象,该对象的属性就是全局变量。
在声明一个全局变量时,实际上是定义该全局对象的一个属性,所有预定义的函数和属性也都是该全局对象的属性,在顶层代码中,可以使用关键词this来引用该全局对象。
局部变量也是一个对象的属性,这个对象叫做调用对象。
JavaScript每次开始执行一个函数时,都会为该函数创建一个执行环境,。
JavaScript提供一个运算符===,只有在两个操作数数值相等并且类型也相同时结果才为真。 
2.4.2提升基本数据类型为对象
每一个基本数据类型都存在一个相应的对象,该对象提供很多很有用的方法来处理数据,在需要时,JavaScript会自动把基本数据类型转化为与之相应的对象,除自动转化外,还可以手动转化。如toString(),parseInt(),parseFloat();
2.5.5字符串的特殊性
在复制和传递字符串时使用的是引用,而对字符串进行比较时使用的却是值。
第三章  运算符和表达式
逗号运算符
void运算符用来指明一个表达式无返回结果。
typeof运算符返回一个字符串,用来指明其操作数的数据类型。
对象运算符:
运算符.用来连接对象其属性和方法。如:document.lastModified
运算符new用来创建对象。
运算符delete用来移除对象的属性或者移除数组元组。
第四章  基本的流程控制语句
第五章  函数
5.1.1
定义函数要使用function关键字,语法规则如下:function 函数名(){};
在其它语言中,可以定义指向函数的指针,以后就可以用该指针变量来调用 其指向的函数,JavaScript创建类似的方法来创建动态函数。
var  变量名=new  Function();
参数列表中的所有参数都是字符串类型,并且最后一个字符串是这个函数的功能程序代码。

第八章   正则表达式
元字符?与()
?表示紧靠其前的元素项是可选的,。abc?可以匹配abc与ab.
用()表示子匹配。
例如:要匹配两个相同的连续数字字符的正则表达式是(\d)\1.要匹配5个相同的数字字符的正则表达 式为(\d)\1{4};
要匹配1221,2334,这样的数字的正表达式是(\d)(\d)\2\1
a(bc)可以匹配abc与a.
RegExp对象:
JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一个正则表达式对应一个RegExp实例。
有两种可以创建RegExp对象的实例的方法:
显示构造:new RegExp("pattern",[flags]);
隐式构造:/pattern/[flags];
flags部分设置表达式的标志信息,是可选项。g是全局标志。如果不设置这个标志,则仅搜索和替换最早匹配的内容 ,i是忽略大小写标志,m是多行标志。
如:
<!--创建正则表达式-->
<html>
<head></head>
<body>
<script language="javascript">
<!--
var mystring="这是第一个正则表达式的例子";
var myregex=new RegExp("一个");
if(myregex.test(mystring))
document.write("找到了指定模式");
else
document.write("没有找到指定模式");
//-->
</script>
</body>
</html>]
由于JavaScript中的\是一个转义字符,因些,使用构造函数创建RegExp对象时,应将原始正则表达式中的\用\\替换。
RegExp对象的属性:
RegExp对象的属性分为静态和实例属性。
test方法:检查一个字符串中是不是存在创建RegExp对象实例 所指定的表达式模式。
exec方法:对一个字符串进行搜索,并返回一个包含搜索结果的数组。
String的相关方法:match,search,replace.
split方法:该方法返回按照某种分割标志将一个字符串拆分成若干个子字符串所产生的子字符串数组。
如:
<!--8.8.html-->
<html>
<head></head>
<body>
<script language="javascript">
<!--
var splitArray=new Array();
var string="太平洋,大西洋,印度洋,北冰洋";
var regexp=/,/;
splitArray=string.split(regexp);
for(var i=0;i<splitArray.length;i++){
document.write(splitArray[i]+"\n"+"<br>");
}
//-->
</script>
</body>
</html>
8.7限定符与选择匹配符:
用{n}限定连续出现的次数
用{n,}限定至少出现的次数
{n,m}用来限定最少与最多出现的次数
用+限定必须出现一次或连续多次
用*号来规定前面的元素或组合项可以出现多

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值