`

WEB第一天:JavaScript

阅读更多
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发展过程文档

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;
分享到:
评论

相关推荐

    前端移动Web第一天:京东移动端首页案例-流式布局.zip

    在前端开发领域,移动Web是不可或缺的一部分,尤其是在大型电商平台如京东这样的公司中。这个"京东移动端首页案例-流式布局.zip"压缩包提供了一个实践性的示例,让我们深入理解如何构建适应不同屏幕尺寸的流式布局。...

    程序天下:JavaScript实例自学手册

    12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹出窗口 12.8 调整窗口的大小 12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口...

    javaScript 第一天

    第一天的JavaScript学习之旅通常会涵盖基础概念和语法,为后续深入学习奠定基础。 首先,JavaScript是一种解释型的、弱类型的脚本语言。这意味着它不需要预编译,而是直接在运行时由浏览器解释执行。它的弱类型特性...

    《程序天下:JavaScript实例自学手册》光盘源码

    12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹出窗口 12.8 调整窗口的大小 12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口...

    JavaScript5天精通

    第一天:JavaScript基础 我们会从JavaScript的基础语法开始,包括变量声明、数据类型(如字符串、数字、布尔值、null和undefined)、操作符(算术、比较和逻辑操作符)以及流程控制(条件语句if...else和switch,...

    Javascript入门教程.pdf适合刚接触web开发人员

    对于初学者而言,掌握JavaScript的基础知识是进入Web开发领域的第一步。通过不断实践和学习,你将能够构建出功能丰富、用户体验优秀的网页和应用。无论是作为前端开发人员还是全栈开发者,JavaScript都是一项必不可...

    JavaScript高级_javascript_zip_

    在本压缩包文件"JavaScript高级_javascript_zip_"中,可能包含了关于JavaScript高级主题的详细教程或课程资料,特别是"day10_JavaScript高级"这一子文件,可能是该系列学习的第十天内容,集中讲解了一些核心的高级...

    韩顺平十天javascript全套笔记(整理版)

    ### 韩顺平十天JavaScript全套笔记知识点详解 #### JavaScript基本概念与应用领域 - **JavaScript简介**:JavaScript(简称JS)是一种轻量级、解释型或即时编译型的编程语言。它通常用于增强网页的交互性,并且...

    21天学通JavaScript 源代码2(有一部分在源码1文件中)

    第一篇完整地讲解了JavaScript的基础知识,主要内容包括JavaScript概述、数据类型、常量与变量、表达式与运算符、程序语句、函数和数组等。第二篇专门介绍JavaScript中内置对象的应用,内容包括JavaScript对象基础、...

    获得当前月的第一天和最后一天

    首先,我们来理解“js month 第一天 最后一天”这些标签所代表的含义。"js"指的是JavaScript,一种广泛使用的脚本语言,常用于Web开发;"month"指的是月份,这是日期的一部分;"第一天"和"最后一天"是指每个月的起始...

    研究Web chat libraryh3lp第一天

    标题“研究Web chat libraryh3lp第一天”表明我们即将探讨的是关于Web聊天库的初步学习体验,这可能是一个开发者在尝试理解和使用特定的Web聊天库时的记录或教程。描述中提到的博客链接是一个可能包含详细步骤、问题...

    第26天:WEB漏洞-XSS跨站之订单及Shell箱子反杀记1

    XSS(Cross-site scripting)是一种常见的Web应用程序安全漏洞,它允许攻击者在用户浏览器上注入恶意脚本。这些脚本可以劫持用户会话、盗取Cookie、操纵页面内容,甚至进行更复杂的攻击。在本文中,我们将深入探讨...

    javascript-:学习 JavaScript 30

    **第一天:计时器** 课程从创建一个简单的倒计时计时器开始,让你了解JavaScript时间管理和DOM操作的基础。你将学习如何使用`setInterval`和`clearInterval`函数,以及如何更新HTML元素的内容。 **第二天:音乐节拍...

    21天学通JavaScript(第2版)

    第一篇完整地讲解了javascript的基础知识,主要内容包括javascript概述、数据类型、常量与变量、表达式与运算符、程序语句、函数和数组等。第二篇专门介绍javascript中内置对象的应用,内容包括javascript对象基础、...

    移动web 第7天响应适配

    BootStrap是一个流行的前端UI框架,提供了大量的CSS样式和JavaScript插件,允许开发者快速开发响应式网页。BootStrap的栅格系统是其核心组件之一,提供了灵活的布局方式,允许开发者快速布局响应式网页。 ...

    JavaScript30:JavaScript30挑战!!

    谢谢 :folded_hands: :folded_hands: 因此,它成为了学习如何使用JavaScript和CSS的机会(仍然是第一天,但​​我觉得我已经在帮忙!) 在每天的文件夹中,我记下了我所学到的更多细节! 让我们在评论时参考它:) ...

    JavaScript笔记 第二天

    JavaScript是Web开发中不可或缺的一部分,尤其在前端领域。这篇笔记主要涵盖了JavaScript的第二天课程内容,旨在深入理解并掌握JavaScript的基础知识。以下是对这些知识点的详细解释: 1. **变量与数据类型** - ...

    白帽子讲Web安全.pdf百度云分享+Web前端黑客技术揭秘.pdf

    《白帽子讲Web安全》一书主要涵盖了以下几个核心知识点: 1. **Web安全基础**:书中首先介绍了Web安全的基础知识,包括HTTP协议、Web应用架构以及常见的攻击模式,如SQL注入、跨站脚本(XSS)和跨站请求伪造(CSRF...

    十天学会DIV+CSS(WEB标准).chm

    **第一天:HTML基础与CSS简介** - 了解HTML的基本结构和语义元素 - 学习CSS的作用和基本语法 - 探讨WEB标准的重要性 **第二天:CSS选择器与属性** - 掌握ID选择器、类选择器、标签选择器的用法 - 学习通用选择器、...

Global site tag (gtag.js) - Google Analytics