WEB开发第一天

今天所讲的知识点
A Web的发展过程
B JavaScript的基本语法
C JavaScript的方法的定义和使用
D JavaScript的事件驱动与事件处理
E JavaScript中自带的对象

我对知识点的分析
A Web的发展过程
HTML是最先出现的网页语言。
HTML的缺点:不能与数据库交互,不能单独完成动态效果
通过浏览器访问服务器,下载静态页面在浏览器中执行,在浏览器中嵌入JRE运行环境,将Applet程序下载到本地进行执行,这样可以与服务器端进行动态交互,但在安全性和执行效率方面有比较大的问题。
动态网页的特点:在不同的人和不同的时间进行访问时,显示的页面是不同的。
客户端发送请求后,在服务器端判断请求的内容的类型,如果是静态内容,直接返回,如果为动态内容,则通过服务器的Web容器将动态内容进行编译和处理,处理成为静态页面,再返回给用户
动态语言:
CGI:最早的动态语言,执行效率很低,因此现在开发中不使用。
ASP:只能在Windows系统下运行,只能部署在IIS服务器,只能使用Access和MSSqlServer数据库性能最高。
PHP:只能使用Apache服务器部署,使用MySQL数据库效率最高。只适合开发中小型项目。
JSP:维护容易,可以部署在任意平台,代码安全性高,支持多种服务器和数据库。
详细参见Web发展过程文档
[img]image001.jpg[/img]
JSP与Servlet
Java Server Page:在一个HTML页面的基础上加入Java代码,从而实现动态的效果
Servlet:一段Java代码,封装了请求回应及一些IO流操作,实现生成静态代码的功能
最早出现的是Servlet而不是JSP,JSP的执行过程是 JSP—>编译成一个Servlet(服务器执行)编译成class(JDK)执行生成一个HTML返回给客户端
B JavaScript的基本语法
一、JavaScript和Java的区别
虽然JavaScript与Java有紧密的联系,但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言,它的前身是Live Script;而Java的前身是Oak语言。下面对两种语言间的异同作如下比较:
(1)基于对象和面向对象
Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。
JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象(Object Based)和事件驱动(Event Driver)的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。
(2)解释和编译
两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。
JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户编由浏览器解释执行。
(3)强变量和弱变量
两种语言所采取的变量是不一样的。
Java采用强类型变量检查,即所有变量在编译之前必须作声明。JavaScript中变量声明,采用其弱类型。只能使用var进行定义,但其中包含了多种类型,通过赋值时赋予的内容进行区分。
(4)代码格式不一样
Java是一种与HTML无关的格式,必须通过像HTML中引用外媒体进行装载,其代码以字节代码的形式保存在独立的文档中。
JavaScript的代码是一种文本字符格式,可以直接嵌入HTML文档中,并且可动态装载。编写HTML文档就像编辑文本文件一样方便。
(5)嵌入方式不一样
在HTML文档中,两种编程语言的标识不同,JavaScript使用<Script>...</Script>来标识,而Java使用<applet>...</applet>来标识。
(6)静态联编和动态联编
Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查。
JavaScript采用动态联编,即JavaScript的对象引用在运行时进行检查。

二、JavaScript数据类型

只能使用var进行定义,但其中包含了多种类型,通过赋值时赋予的内容进行区分。
可以包含的类型:
整数类型、字符串类型、boolean类型、浮点类型、对象类型(放入的是页面元素对象等)、
数组类型(可以定义一个可变数组,数组中保存的类型可以任意设置)
例如:定义一个数组并赋值
var array = new Array();
array[0] = 23;
array[1] = "hello";
alert(array.length);
可以通过array.length可以取得数组的长度,一般在显示所有数组中数据时使用。


三、JavaScript的运算符和表达式

(1)算术运算符
JavaScript中的算术运算符有单目运算符和双目运算符。
双目运算符:
+、-、 *、 /、 % 、|(按位或)、&(按位与)、<<(左移)、 >>(右移)、 >>>(右移,零填充)。
单目运算符:
-(负号)、~(取补)、++、--。
(2)比较运算符:<、>、<=、>=、==、!=
(3)布尔逻辑运算符:!、||、&&
(4)三目操作符?:

四、关于JavaScript的类型转换
(1)数字转换为字符串
方法:数字+”” 数值型数据+空字符串
(2)将字符串转换为数字
方法一:字符串/或*1,或者-0
方法二:用相应的函数,例如parseInt和parseFloat

五、关于JavaScript的流程控制语句结构
与java一致
提示:使用document.write输出时,内容支持HTML代码

C JavaScript的方法的定义和使用
一、JavaScript方法定义和使用
JavaScript方法定义:
function 方法名 (参数列表){
方法体语句;
【Return 表达式;】
}
说明:
方法由关键字Function定义。
没有返回值类型,因为如果有返回值只有var类型
参数表,没有参数数据类型,因为只有var类型
通过指定方法名(实参)的格式来调用一个方法。
提示:只有在表单的onSubmit属性处调用时有区别onSubmit=“return方法名(实参)”
 
二、JavaScript中没有方法的重载
如果在<head></head>标签中定义了同名的方法,则调用最后一个。
如果在<body></ body>标签中定义了同名的方法,则调用最后定义的一个。

三、方法的重用
在<script language="javascript"></script>中定义方法只能在当前页面使用,如果要在其他页面使用,需要重新编写该方法。
解决方法:在.js文档中编写JavaScript方法,在使用时,将该文件导入
导入js语法:
单独用一个<script>标签,<script language="javascript" src="文档名称.js"></script>

四、JavaScript的内部方法
JavaScript中的内部方法,与任何对象无关,使用这些方法不需创建任何实例,可直接用。
1.返回字符串表达式中的值:
 方法名:eval(字串表达式),例:test=eval("8+9+5/2");
2. 返回字符串ASCI码:
 方法名:unEscape (string)
3.返回字符的编码:
 方法名:escape(character)
4.返回实数:
parseFloat(floustring);
5.返回不同进制的数:
parseInt(numbestring ,rad.X)
其中radix是数的进制,省略为10进制,numbs字符串数

D JavaScript的事件驱动与事件处理
一、事件驱动及事件处理
1、基本概念
  JavaScript是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。而基于对象的基本特征,就是采用事件驱动(event-driven)。它是在用形界面的环境下,使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event Driver)。而对事件进行处理程序或方法,我们称之为事件处理程序(Event Handler)。
2、事件处理程序
  在JavaScript中对象事件的处理通常由方法(Function)担任。其基本格式与方法全部一样,可以将前面所介绍的所有方法作为事件处理程序。
格式如下:
Function 事件处理名(参数表){
事件处理语句集;
……
}

二、获得页面元素对象的方法
1、通过元素的id属性来取得,方法为 document.getElementById(“该元素id值”)
说明:当某一个元素不包含id属性,只包含name属性时,可以将name属性按照id的方式处理
2、通过表单取得其中元素,方法为 document.表单名.元素名
说明:使用该方法必须包含一个表单,且此表单必须包含一个name属性
3、通过 document.all取得所有某一个名称的元素
说明:在对单选或多选按钮进行处理时,一般使用第三种方式
以上三种方法,第一种与第三种的区别,当出现同名
元素(单选或多选)时,使用document.getElementById方法返回这组元素的第一个元素对象,使用document.all的方式则会返回所有元素,即一个数组对象

三、事件驱动
主要有以下几个事件:
(1)单击事件onClick
当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生:
button(按钮对象)、checkbox(复选框)、Select(列表框)、radio (单选钮)、reset buttons(重要按钮)、submit buttons(提交按钮)
统计某页面元素被点击的次数:
count变量需要定义在方法外,可以作为全局变量使用。
var count = 0;
function clickBtn() {
alert(++count);
}
(2)onChange改变事件
onChnage在下拉列表中使用的比较多,当利用text或texturea元素输入字符值改变时也会触发该事件
例如:<select name="city" onChange="事件处理方法(参数);">//this表示当前对象
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">深圳</option>
<option value="3">广州</option>
</select>
提示:取得下拉列表中选中的option的显示文本信息的代码
select.options[select.selectedIndex].text //此处select表示下拉列表对象
(3)获得焦点事件onFocus、失去焦点事件onBlur
(4)鼠标经过和离开事件:onMouseOver、onMouseOut
主要应用:实现鼠标经过表格的某一行时变色
示例代码:
HTML代码:
<TABLE border="1" width="80%">
<TR onMouseOver="changeColor(this,'yellow');" onMouseOut="changeColor(this,'#ffffff');">
<TD>1</TD>
</TR>
<TR onMouseOver="changeColor(this,'yellow');" onMouseOut="changeColor(this,'#ffffff');">
<TD>2</TD>
</TR>
<TR onMouseOver="changeColor(this,'yellow');" onMouseOut="changeColor(this,'#ffffff');">
<TD>3</TD>
</TR>
</TABLE>
JS代码(鼠标事件处理代码):
function changeColor(tr,color) {
tr.bgColor = color ;
}
(5)键盘抬起、键盘按下事件:onKeyUp、onKeyDown
主要应用:控制一个text对象或textarea对象中输入的字符个数
范例:控制一个textarea对象的字符上限为255,并显示剩余字符数,当超过255个字符时,不允许输入
代码:
HTML代码:
<body>输入内容信息:
<textarea name="content" rows="5" cols="30" onKeyUp="checkCount(this.value);" onKeyDown="checkCount(this.value);"></textarea>
<br>
还剩余 <font color="red"><span id="count">255</span></font> 个字符
</body>
JS代码(键盘事件处理代码):
function checkCount(content) {
if (content.length <= 255)
{
document.getElementById("count").innerHTML = 255 - content.length;
} else {
content = content.substring(0,255);
document.getElementById("content").value = content ;
document.getElementById("count").innerHTML = 0;
}
}
(6)载入文件事件(打开页面事件)onLoad
当文档载入时,产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用。
(7)卸载文件(关闭页面事件)onUnload
当Web页面退出时引发onUnload事件,并可更新Cookie的状态。
范例:下例程序是一个自动装载和自动卸载的例子。即当装入HTML文档时调用loadform()函数,而退出该文档进入另一HTML文档时则首先调用unloadform()函数,确认后方可进入。
<html>
< head >
<script Language="JavaScript">
<!--
function loadform(){
alert("这是一个自动装载例子!");
}
function unloadform(){
alert("这是一个卸载例子!");
}
-->
</Script>
</head>
<body OnLoad="loadform()" OnUnload="unloadform()">
</ body >
</ html >

(8)表单提交事件:onSubmit
一般该事件的处理方法为:表单信息的验证
方法一:通过表单中的提交按钮提交表单
如果是在表单中包含提交按钮,则在单击提交按钮时,触发该事件
示例代码:
HTML代码:
<FORM METHOD=POST ACTION="提交的页面,例如next.htm" name="myform" onSubmit="return checkForm(this);">
…….//其他表单元素
<input type="submit" value="提交">
</FORM>
JS代码(提交事件处理代码):
function checkForm(myform) {
…..//检验代码
return 检验结果;
}
注意:必须在onSubmit中加入return 方法名,且方法中需要返回一个true或false值,根据该值确定是否表单进行提交。
方法:通过超链接提交表单
HTML代码:
<a href="#" onClick="submitForm();">提交</a>
说明:超连接中使用#表示点击不跳转,返回本页面的最上面。
如果使用#return表示不跳转同时返回当前位置。
注意:表单<form>标签中就不需要onSubmit属性了。
JS代码(超链接的点击事件处理代码);
function submitForm() {
…..//检验表单信息的代码
if (信息合法)
{
// 进行跳转,这里需要手工调用方法
document.表单名称.submit();
}
}

E JavaScript中自带的对象
document、window、history对象
一、window对象的常用方法
1、window. open(["URL", "name", "specs", replace]):打开一个页面
2、window.close():关闭当前页面
3、windows.opener:表示取得打开当前页面的window对象
4、windows.confirm(“信息框的提示信息”):弹出确认信息框。该方法会返回一个boolean类型的值,可以根据该值确定用户选择的是确认 还是 取消。

二、history:用来操作用户的后退与前进的历史记录的
1、back():返回上一页
2、forward():前进到下一页
3、go(值):前进或后退到某一页
说明:值为int类型:-1表示返回上一页、1表示前进到下一页

三、location:可以通过该对象操作地址栏
1、window.location = “” :表示自动进行跳转
window.location = "Test2.htm";
2、location.href:可以取得当前页的地址
location.href;



今天学习的还行,不能说是累,只是概念有些杂乱,javascript自己以前学习过,所以掌握起来并不是很难,但是有很多细节方面的内容还是要由老师指点出来,才觉得自己学习就是和有人教不一样,自己学习会忽略掉很多重要的细节,在老师的指引下我觉得可以收获的特别多,不管怎样,开心过好每一天,每天都在进步,我就觉得足够了
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值