版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第1讲PHP概述《PHP程序设计》学习方式1.个人开发
课堂讨论,解决问题,
项目开发2.积分制度考勤,课堂答题,项目完成情况3.案例教学讲课步骤:课本理论+实际项目本课程学习计划
目录CONTENTS01020304PHP介绍怎样学好PHP编程PHP运行环境安装与配置PHP开发环境安装与配置05第一个PHP网站项目PHP介绍01什么是PHP
一种服务器端、跨平台、HTML嵌入式的脚本语言。
1995由RasmusLerdor开发,目前已发展到PHP7版本
PHP:PersonalHomePage个人主页最些年,PHP已成为最受青睐的编程语言之一,是Web领域中最受欢迎的技术,并且已经一路领先于编程领域。
大部分网站服务器提供商提供了对PHP语言的支持。
国内外许多高等院校已经开设PHP编程设计课程。1PHP介绍PHP的应用领域(1)WEB网页程序:使用PHP开发各种动态网站、B/S(Browser/Server)应用程序。如中小型网站开发、电子商务应用、网上办公管理系统、信息管理系统等。(2)命令行程序:使用PHP开发命令行脚本程序,通过PHP预处理器执行这些程序。如用户自定义批处理程序、的DOS程序等。(3)桌面应用程序:使用PHP编写具有图形界面的桌面应用程序。只是对于桌面应用程序而言,PHP不是最好的选择,不过可以使用PHP-GTK来编写这些程序。PHP在桌面应用程序方面正在不断发展和完善。1PHP介绍PHP特点完全免费源代码完全开放语法结构简单功能强大强大的数据库支持代码执行效率高1PHP介绍PHP网站工作原理PHP应用程序通过WEB服务器(如Apache或IIS)和PHP解释器解释执行完成。1:用户在浏览器地址中输入要访问的PHP页面地址,将请求传送到支持PHP的目标WEB服务器。2:
WEB服务器接受PHP请求,从服务器中取出对应PHP应用程序,并将其发送给PHP解释器。3:
PHP解释器读取PHP应用程序,根据命令进行数据处理,并动态生成相应的HTML页面。4:PHP解释器将生成的HTML页面返回给WEB服务器。5:WEB服务器将HTML页面作为响应返回给客户端浏览器。
1PHP介绍怎样学好PHP编程02怎样学好PHP编程
1熟悉HTML/CSS/JavaScript等网页基本元素
2学会配置PHP的开发环境
3熟悉PHP基本语法、控制语句
4学习如何将PHP与HTML结合完成简单动态网页
5熟悉使用MySQL数据库
6学习如何使用PHP与MySQL数据库交互编程2怎样学好PHPPHP运行环境安装与配置03PHP运行环境ApachePHP7MySQLPHP开发环境ZendStudioPHPEditDreamwearverNotePad(记事本)AppServ3PHP运行环境安装与配置下载AppServ:3PHP运行环境安装与配置AppServ—Windows版PHP集成化安装包AppServ—Windows版PHP集成化安装包下载AppServ:1安装AppServ2设置AppServ端口号:
设置为80(或者8080,8090等)3设置MySQL数据库用户名及密码:用户名为root密码为1113PHP运行环境安装与配置安装完成后可以在开始菜单的AppServ相关操作列表中启动Apache及MySQL服务。3PHP运行环境安装与配置AppServ—Windows版PHP集成化安装包AppServ安装后,可以访问AppServ主页和登录phpMyAdmin图形化管理工具来测试PHP环境是否搭建成功。在浏览器地址栏中输入http://localhost:80/或:80/,如果进入AppServ默认主页,则说明AppServ安装成功。3PHP运行环境安装与配置AppServ—Windows版PHP集成化安装包1)测试PHP环境是否搭建成功
打开IE浏览器,在地址中输入”http://localhost/”或“/”如果在安装时设置Apache的端口号为8080,那么在IE浏览器的地址栏中将输入:”http://localhost:8080/”或”http://:8080/”3PHP运行环境安装与配置2)第一次登录phpMyAdmin图形化管理工具打开IE浏览器,在地址中输入”http://localhost/”或/单击页面最上方的phpMyAdminDatabaseManagerVersion2.10.33PHP运行环境安装与配置3)编辑第一个PHP程序(1)用代码开发工具创建PHP文件,(2)编写PHP代码3PHP运行环境安装与配置4)输出系统的当前时间(1)用代码开发工具创建PHP文件(2)编写PHP代码3PHP运行环境安装与配置5)更改Apache服务器的端口号为8080(1)打开Apache目录下的Apache2.2子目录,找到conf文件夹(C:\AppServ\Apache2.2\conf)。(2)通过记事本打开httpd.conf文件。(3)按Ctrl+F键,搜索80,定位到Listen,将80端口修改为8080。3PHP运行环境安装与配置5)更改Apache服务器的端口号为8080(4)选择“开始”/“管理工具”/“服务”命令,选择Apache2.2,单击鼠标右键,在弹出的快捷菜单中选择“重新启动”命令,重新启动Apache服务器。3PHP运行环境安装与配置PHP开发环境安装与配置04ZendStudioPHPEditDreamwearverNotePad(记事本)4PHP开发环境安装与配置PHP代码编辑环境下载ZendStudio安装ZendStudio/downloads/zend-studio4PHP开发环境安装与配置PHP代码编辑环境在开发PHP网站程序之前,需要将ZendStudio工作空间与Apache服务器的默认目录进行关联,使得通过http://localhost:8090/网址可以访问到ZendStudio工作空间中的各个PHP网站程序。(1)打开ZendStudio菜单“Run”->"RunConfigurations",进行运行环境配置.4PHP开发环境安装与配置PHP网站运行环境配置(2)新建PHP服务:在对话框右侧的PHPServer面板中单击“New”按钮,新建一个PHP服务。在弹出的对话框中选择LoaclApacheHTTPServer,为PHP服务设置一个名称(如:ApacheServer)设置“ConfigurationDirectory”值为Apache安装路径中配置文件夹C:\AppServ\Apache24\conf4PHP开发环境安装与配置PHP代码编辑环境(3)设置Debugger服务,在此先设置为none。创建完PHP服务之后,返回环境配置对话框,此时在PHPServer面板中将出现刚创建的名为ApacheServer的服务。单击Configure按钮,继续配置PHP服务.4PHP开发环境安装与配置PHP代码编辑环境(4)除了在ZendStudio软件中设置运行环境配置信息之外,还需要修改Apache的配置文件。进入Apache安装目录C:\AppServ\Apache24\conf,使用记事本方式打开httpd.conf文件,找到“DocumentRoot”配置项,将默认网站路径由“C:\AppServ\www”修改为“E:\PHPProjects”.4PHP开发环境安装与配置PHP代码编辑环境第一个PHP网站项目05在ZendStudio软件的菜单依次选择“File”->“New”->“LocalPHPProject”命令,创建一个本地PHP项目。在弹出的新项目创建对话框中,设置项目名称为PHP01,项目文件存储位置为默认值.5第一个PHP网站项目(1)创建PHP项目新建一个PHP项目时一般会自动创建一个index.php的网页文件,也可以根据实际需要继续创建新的php网页文件。打开index.php文件,编写代码。5第一个PHP网站项目(2)编写PHP代码代码编写完成,保存文件,单击“运行”按钮(即工具栏中绿色圆形按钮)运行程序。5第一个PHP网站项目(3)运行PHP程序谢谢!第2讲HTML知识回顾《PHP程序设计》
目录CONTENTS01020304HTML结构和表格控件HTML列表控件HTML多媒体控件HTML框架控件05HTML表单控件06HTML其他控件HTML结构和表格控件01HTML文档的结构<HTML>…</HTML>标签标记HTML文档的开始和结束。<HEAD>…</HEAD>标签为网页标题部分,包含标题和其他说明信息。<BODY>…</BODY>标签为网页内容部分,包含文本、图表和各种HTML控件。<HTML><HEAD><TITLE>我的第一个网页
</TITLE></HEAD><BODY>HelloWorld!</BODY></HTML>HTML网页<HEAD>头部部分<BODY>主体部分网页标题网页内容,可以是文本、图像等1HTML文档结构<img
src=“test.jpg”width=“200px”/>标签属性名称属性值最简单的语法:<标记>内容</标记>HTML标签语法1HTML标签语法2.1基本标签HTML表格每一对<table>和</table>代表一个表格每一对<tr>和</tr>代表一行每一对<td></td>代表一个独立的单元格<table>
<tr>
<td>内容…</td><td>内容…</td>
</tr></table>1HTML表格控件表格的整体控制1)控制表格的边框Border基本语法:<tableborder=“边框大小值”>语法解释:
边框大小值由数字表示,如1,2,3,4。数值越大,边框越粗。border=“2">1HTML表格控件2)控制表格的边框颜色Bordercolor基本语法:<tablebordercolor=“颜色值”>语法解释:
边框颜色属性值与定义网页的背景色相同。bordercolor=“red">1HTML表格控件表格的整体控制3)控制表格的宽度基本语法:<tablewidth=“大小值”>语法解释:
表格宽度值以象素为单位。width=“400px">1HTML表格控件表格的整体控制4)控制表格的高度基本语法:<tableheight=“大小值”>语法解释:表格宽度值以象素为单位。height=“400px">1HTML表格控件表格的整体控制5)控制表格的背景色基本语法:<tablebgcolor=“颜色值”>语法解释:颜色属性值与定义网页的背景色相同。6)控制表格的背景图片基本语法:<tablebackground=“背景图片地址”>语法解释:默认情况下,背景图片会根据表格大小进行平铺显示。1HTML表格控件表格的整体控制表格单元格的控制1)合并多个单元格
为了更灵活地安排表格中的各种数据,表格提供了合并单元格的功能,在布局网页时非常有用。colspan属性用于水平合并单元格,其值为水平合并单元格的数量。rowspan属性用于垂直合并单元格,其值为垂直合并单元格的数量。1HTML表格控件2)合并多个单元格1HTML表格控件表格单元格的控制1HTML表格控件2)合并多个单元格表格单元格的控制HTML列表控件02(1)无序列表<ul></ul><ul><li>列表项一<li>
<li>列表项二<li>
<li>列表项三<li>
<li>列表项四<li></ul>2HTML列表控件(1)无序列表的类型
(type)<ultype=“符号类型”>
<li>列表项一<li>
<li>列表项二<li>
<li>列表项三<li>
<li>列表项四<li></ul>符号类型效果discCircleSquarecirclesquare2HTML列表控件(2)有序列表<ol></ol><ol><li>列表项一<li>
<li>列表项二<li>
<li>列表项三<li>
<li>列表项四<li></ol>2HTML列表控件(2)有序列表的类型
(type)<oltype=“序号类型”>
<li>列表项一<li>
<li>列表项二<li>
<li>列表项三<li>
<li>列表项四<li></ol>符号类型效果1数字1,2,3,4a小写英文字母a,b,c,d…A大写英文字母A,B,C,D…i小写罗马数字i,ii,iii,iv…I大写罗马数字I,II,III,IV…2HTML列表控件(2)有序列表的类型
(type)<oltype=“序号类型”>
<li>列表项一<li>
<li>列表项二<li>
<li>列表项三<li>
<li>列表项四<li></ol>Aa2HTML列表控件(2)有序列表的类型
(type)<oltype=“序号类型”>
<li>列表项一<li>
<li>列表项二<li>
<li>列表项三<li>
<li>列表项四<li></ol>Ii2HTML列表控件HTML多媒体控件03添加音乐\视频
<embed></embed>
<embed></embed>标签可以播放多种音频和视频格式,格式播放支持取决于浏览者系统中的播放器.属性:src:用于指定所连接的多媒体资源路径.autostart:用于控制是否播放.属性值为”true|false”WidthHeight:用于设置播放器界面的宽度和高度3HTML多媒体控件添加音乐\视频
<embed></embed><html><body><embed
src="的士高.mp3"></embed></body></html>示例1:插入音乐height="100"></embed>3HTML多媒体控件<html><body><embed
src="ForTheBirds.wmv“height=“300”width=“300px”autostart=“false”></embed></body></html>示例1:插入视频3HTML多媒体控件添加音乐\视频
<embed></embed>HTML框架控件04框架页面的基本语法<iframename="窗口名">
如何设置窗口链接的显示位置<a></a>target目标窗口属性name=“显示的窗口名”
<iframesrc=urlname=“窗口名”>
<ahref=urltarget=“窗口名”> target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。4HTML框架控件HTML表单控件05表单页面的基本结构METHOD=“post或get”ACTIONMETHOD指定提交后,由服务器上那个处理程序处理指定向服务器提交的方法:一般为post或get方法,post方法比较安全
ACTION=“URL”<FORMaction=“registersuccess.html”method=“post”> ……</FORM>Action=“表单提交目标程序的URL”get=传输数据量小,数据暴露在URL中,不安全post=传输数据量大,所有操作对用户不可见,安全5HTML表单控件表单元素的标签格式<FORMname="form3"method="post"action="">
……
<INPUT
type="checkbox“name="gen"
value="男"size="21“/>
……</FORM>指定元素的类型,可为TEXT、RADIO、SUBMIT等控件的名称控件的初始值控件的宽度5HTML表单控件表单的控件1基本标签单行文本框(TEXT)单选按钮(RADIO)复选框(CHECKBOX)下拉列表(SELECT)重置按钮(RESET)提交按钮(SUBMIT)多行文本框(TEXTAREA)密码框(PASSWORD)5HTML表单控件文本框<INPUTtype="text"name=“txt_username"value="张三"size="20"><FORMname="form1"method="post"action=""><P>名
字:
<INPUTtype="text“name=“txt_username"value="张三"size="20"></P>……</FORM>文本区的宽度输入控件的默认值控件类型:文本框控件名称5HTML表单控件密码框<INPUTtype=“password"name=“txt_pwd"value=“123"size="20"><FORMname="form1"method="post"action="">…<P>密码:
<INPUTtype=“password“name=“txt_pwd"value=“123456"size="20"></P></FORM>密码框5HTML表单控件单选按钮<INPUTtype=“radio”name=“rd_man”value=“男"checked=“checked"><FORMname="form1"method="post"action=""><P>性别:
<INPUTtype=“radio“name=“rd_man”value=”男”checked=“checked”>男</P>……</FORM>默认选中控件取值单选按钮5HTML表单控件复选框<INPUTtype=“checkbox”name=“cb_talk”value=“talk"checked=“checked"><FORMname="form1"method="post"action=""><P>爱好:
<INPUTtype=“checkbox“name=“cb_talk”value=”talk”checked=“checked”>聊天</P>……</FORM>复选框5HTML表单控件下拉列表框<select
name=“指定列表名称”
size=“行数”>
<option
value=“可选项的值”
selected>…</option><option
value=“可选项的值”>…</option>
……</select>
说明:
size确定列表中可同时看到的行数。
selected默认被选中的可选项。5HTML表单控件下拉列表框出生日期:
<INPUTname="byear"value="yyyy"size=4maxlength=4>
年<SELECTname="bmon">
<OPTIONvalue=""selected>[选择月份]</OPTION><OPTIONvalue=0>一月</OPTION><OPTIONvalue=1>二月</OPTION>……</SELECT>
月
<INPUTname="bday"value="dd"size=2maxlength=2>
日
设置“[选择月份]”选项默认被选中5HTML表单控件按钮<INPUTtype="button"name="btn_1"value="登录"/><INPUTtype="reset"name="btn_2"value="重置"/><INPUTtype="submit"name="btn_3"value="提交"/>普通按钮重置按钮提交按钮<FORMname="form6"method="post"action=""><P><INPUTtype="reset"name="Reset"value="重填"> ……
<INPUTtype="button"name="cancel"value="取消"></P></FORM>5HTML表单控件多行文本框<textarea”name=“txt_1”rows=“6”cols=“3”></textarea>行数多行文本框列数<FORMname="form7"method="post"action="">……<TEXTAREAname="textarea"cols="40"rows="6">欢迎阅读服务条款协议,本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。本服务协议双方为淘宝与淘宝网用户,本服务协议具有合同效力。淘宝的权利和义务
</TEXTAREA>……</FORM>6行40个字符宽度的多行文字域5HTML表单控件HTML其他控件06(1)超级链接<a></a>超级链接的标签是<a></a>,给文字添加超级链接类似于其他修饰标签。超级链接是跳转到另一个页面的,href属性:指定新页面的地址。(可使用相对地址,也可使用绝对地址)Target属性:指定新页面的弹出位置:
_self(本身)_blank(新窗口)
_top(顶层)_parent(父级框架)(用于框架)6HTML其他控件(2)制作滚动文字
HTML技术中使文字滚动的方法是使用双标签<marquee></marquee>.基本语法:<marquee>具体滚动内容</marquee>.语法解释:
默认滚动方向为从右到左,循环滚动6HTML其他控件(2)制作滚动文字HTML技术中使文字滚动的方法是使用双标签<marquee></marquee>.<marquee>的属性:direction:滚动方向:
属性值:leftrightupdownbgcolor:
滚动背景色width:
内容滚动背景宽度
height:
内容滚动背景高度scrollamount:滚动速度:
属性值为数字大小值behavior:
内容滚动方式.
属性值有:
scroll(循环滚动);alternate(来回循环滚动)
slide(滚动一次);loop设置滚动循环次数scrolldelay:内容滚动的时间间隔,属性值为数字大小值6HTML其他控件页面乱码问题在<head></head>中添加代码<metahttp-equiv=“content-type”content=“text/html;charset=utf-8”/>5HTML表单控件第2讲CSS知识回顾《PHP程序设计》
目录CONTENTS01020304CSS的基本语法行内样式表内部样式表外部样式表05CSS样式设置CSS的基本语法01为什么需要CSS样式表CSS是CascadingStyleSheets(层叠样式表单)的英文缩写,简称为“样式表”,它用于设置和管理网页各个标签控件的外观和样式,使得网页更为美观。样式表能实现内容与样式的分离,方便团队开发程序员写代码美工做样式内容与样式和谐统一的完整网页1CSS的基本语法<tablestyle=“width:100px;height:200px”><tr><td></td></tr></table>现设置表格宽度.HTML知识回顾新的属性写法<tablewidth=“100px”height=“200px”><tr><td></td></tr></table>1CSS的基本语法style="color:red;font-size:30px;font-family:隶书"}属性属性的值1CSS的基本语法heightborder2)基本属性widthbgcolorbackgroundcolorheightborderwidthBackgournd-colorBackground-imagecolorCSS样式style=1CSS的基本语法行内样式内嵌样式外部样式表CSS的声明方法1CSS的基本语法行内(行间)样式表02<HTML><HEAD><TITLE>设置属性</TITLE></HEAD><BODY><Pstyle="color:red;font-size:30px;font-family:隶书;">这个段落应用了样式<P>这个段落按默认样式显示</BODY></HTML>为标签p指定样式本段<P>标签采用了行内样式2行内(行间)样式表内部(内嵌)样式表03
<STYLEtype="text/css">.red1{color:red;font-family:"隶书";font-size:24px;
}
……
</STYLE>如果一个页面有多个标签使用同一种效果,怎么办?多个标签采用相同的样式,所以要为它们定义一个共享样式。内部样式表选择器(选择符)样式规则3内部(内嵌)样式表<HEAD><TITLE>样式规则</TITLE><STYLEtype="text/css">
.red1
{color:red;font-family:"隶书";}</STYLE></HEAD><BODY><H2class="red1">静夜思</H2><Pclass="red1">床前明月光,</P><Pclass="red1">疑是地上霜。</P><P>我是郭德刚,</P><Pclass="red">低头思故乡。</P></BODY>选择器样式规则class=”选择器“<H2>和<P>标签要应用同一样式如何实现这样的样式效果?字体类型都为隶书2行内样式表外部样式表04
如果希望一个网站中多个页面的样式保持一致,如何解决?使用外部样式表文件样式表可以解决4外部样式表根据样式文件与网页的关联方式又分为: 链接(LINK)外部样式表样式文件.css网页2网页3网页1……4外部样式表 链接(LINK)外部样式表使用LINK(链接)标签:<HEAD><LINKhref="newsyle.css"rel="stylesheet"type="text/css"></HEAD>第一步:创建样式表文件newstyle.css第二步:把样式文件和网页绑定第三步:浏览查看各网页样式文件:newstyle.cssLink_Outcss1.htmlLink_Outcss2.html引入的样式文件4外部样式表链接(LINK
)外部样式表4外部样式表CSS样式设置05选择符{属性1:值1;属性2:值2;
…}CSS代码编写格式5CSS样式设置5CSS样式设置CSS选择符有5种标签选择符Id选择符Class选择符伪类及伪对象选择符通配选择符CSS选择符有5种标签选择符Id选择符Class选择符伪类及伪对象选择符通配选择符<HEAD><TITLE>样式规则</TITLE><STYLEtype="text/css">
P{color:red;font-family:"隶书";}
H2{color:back;font-size:20px;}</STYLE></HEAD><BODY><H2>标题2</H2><P>床前明月光,</P><P>疑是地上霜,</P></BODY>使用标签名作选择符;页面中所有同类标签均被该样式修饰。5CSS样式设置<HEAD><TITLE>样式规则</TITLE><STYLEtype="text/css">
#P1{color:red;font-family:"隶书";}</STYLE></HEAD><BODY><H2>标题2</H2><Pid=“P1”>床前明月光,</P><P>疑是地上霜,</P></BODY>为标签设置ID属性,用”#”+ID作选择符;该ID的标签被该样式修饰。5CSS样式设置CSS选择符有5种标签选择符Id选择符Class选择符伪类及伪对象选择符通配选择符<HEAD><TITLE>样式规则</TITLE><STYLEtype="text/css">
.P1{color:red;font-family:"隶书";}</STYLE></HEAD><BODY><H2>标题2</H2><Pclass=“P1”>床前明月光,</P><P
class=“P1”>疑是地上霜,</P></BODY>为标签设置class属性,用”.”+某class名称作选择符;页面中所有设置class=某class名称的标签均被该样式修饰。5CSS样式设置CSS选择符有5种标签选择符Id选择符Class选择符伪类及伪对象选择符通配选择符<HEAD><TITLE>样式规则</TITLE><STYLEtype="text/css">
.a1:hover{color:red}.a1:visited{color:green}</STYLE></HEAD><BODY><H2>标题2</H2><aclass=“a1”>床前明月光,</P><P>疑是地上霜,</P></BODY>用id或class名+“:伪对象名“作选择符;该ID或class的标签被该样式修饰;并有多种效果。5CSS样式设置CSS选择符有5种标签选择符Id选择符Class选择符伪类及伪对象选择符通配选择符伪类说明:link超级链接未被访问时:hover超级链接在鼠标滑过时:active超级链接在用户单击时:visited超级链接被访问后:focus对象成为输入焦点时5CSS样式设置CSS选择符有5种标签选择符Id选择符Class选择符伪类及伪对象选择符通配选择符<HEAD><TITLE>样式规则</TITLE><STYLEtype="text/css">*{color:green;font-family:“宋体";}</STYLE></HEAD><BODY><H2>标题2</H2><P>床前明月光,</P><P>疑是地上霜,</P></BODY>用”*”作选择符;该页面所有标签被该样式修饰。5CSS样式设置CSS选择符有5种标签选择符Id选择符Class选择符伪类及伪对象选择符通配选择符谢谢!第3讲JavaScript知识回顾《PHP程序设计》
目录CONTENTS01020304JavaScript介绍JavaScript基础语法JavaScript函数JavaScript实现表单验证05JavaScript控制网页窗体JavaScript介绍01本章任务制作淘宝网购物简易计算器页面任务目标1)什么是JavaScriptJavaScript是一种脚本编程语言,是基于对象且事件驱动的程序,只是其程序代码嵌在HTML网页文件中,需要浏览者的浏览器进行解释运行。HTML、XHTML是一种标记语言,用某种结构存储数据并且在设备上显示的手段。1JavaScript介绍2)JavaScript有什么功能(1)控制文档的外观和内容:动态改变CSS样式及页面内容(2)控制浏览器的行为:浏览器的退后、刷新、状态栏信息(3)用户交互操作:网上调查问卷、网上算命页面(4)与页面各种元素交互:动态改变图片、元素属性等(5)读写部分客户端信息:读写客户端浏览器版本等1JavaScript介绍3)在什么地方编写JavaScriptJavaScript包含于<script></script>标签之中写在<head></head>中(推荐)写在<body></body>中,可多处1JavaScript介绍<HTML><HEAD><TITLE>脚本的基本结构</TITLE><SCRIPTlanguage="javascript">
varcount=0;
document.write("淘宝网欢迎您!");
for(i=0;i<5;i++)
document.write("<H2>淘宝网欢迎您!</H2>");</SCRIPT></HEAD><BODY><H1>BODY部分的内容</H1></BODY></HTML>如何使用JavaScript实现此部分内容?1JavaScript介绍4)一个简单的JavaScript程序脚本的执行原理应用服务器IEIE解析HTML标签和JavaScript脚本从服务器端下载含JavaScript的页面返回响应客户端请求含JS的页面发送请求1用户输入231JavaScript介绍<HTML><HEAD><TITLE>脚本的基本结构</TITLE><SCRIPTlanguage="javascript">
varcount=0;
document.write("淘宝网欢迎您!");
for(i=0;i<5;i++)
document.write("<H2>淘宝网欢迎您!</H2>");</SCRIPT></HEAD><BODY><H1>BODY部分的内容</H1></BODY></HTML>大家想想上面JavaScript代码与我们学过的Java、C#语言有相似的地方吗?1JavaScript介绍JavaScript基础语法02类型转换注释控制语句运算符号变量基本语法
2JavaScript基础语法变量运算符号控制语句注释类型转换2JavaScript基础语法变量的声明和赋值
varcount;count=5;定义变量赋值“var”-用于声明变量的关键字“count”-变量名varx,y,z=10;varcount=10;同时声明和赋值变量声明多个变量2JavaScript基础语法运算符号运算符对一个或多个变量或值(操作数)进行运算,并返回一个新值根据所执行的运算,运算符可分为以下类别:算术运算符
+、-、*、/、%、++、--、-(求反)比较运算符
==、!=、>、>=、<、<=逻辑运算符
&&、||、!2JavaScript基础语法逻辑控制语句if条件语句switch多分支语句for、while循环语句if(条件){
//JavaScript代码;}else{
//JavaScript代码;}switch(表达式){case常量1:
JavaScript语句1;
break;
case常量2:
JavaScript语句2;
break;
...
default:
JavaScript语句3;}for(初始化;条件;增量)
{
语句集;
}while(条件)
{
语句集;}2JavaScript基础语法注释单行注释以//开始,以行末结束例如:<SCRIPTlanguage=“javascript”>//表示JavaScript代码的开始多行注释以/*开始,以*/结束,符号/*……*/指示中间的语句是该程序中的注释。例如:/*helloWorld.html2007-9-29
第一个JavaScript程序*/2JavaScript基础语法类型转换parseInt(String)
将字符串转换为整型数字如:parseInt(“86”)将字符串“86”转换为整型值86parseFloat(String)
将字符串转换为浮点型数字如:parseInt(“34.45”)将字符串“34.45”转换为浮点值34.452JavaScript基础语法JavaScript函数03什么是函数函数的含义:类似于Java中的方法,是执行特定任务的语句块。如何希望点击某个按钮后才显示“HelloWorld”,并能输入显示的次数,怎么办?演示示例3:调用函数输出“HelloWorld”3JavaScript函数什么是函数1、在页面中放置一个文本框和一个按钮,让用户输入次数后点击按钮才显示2、把循环显示的代码放置到函数中,当点击按钮时,才调用函数显示HelloWorld经过分析,该如何解决上面问题?使用自定义函数3JavaScript函数如何使用函数创建函数
function
函数名(参数1,参数2,…)
{
语句;
}调用函数函数调用一般和表单元素的事件一起使用,调用格式为:
事件名=“函数名”;3JavaScript函数如何使用函数创建函数调用函数
functionshowHello(){varcount=document.myForm.txtCount.value;for(i=0;i<count;i++)document.write("<H2>HelloWorld</H2>");}<INPUTtype=“submit”name=“Submit”value=“显示HelloWorld”onClick=“showHello()“>表示单击此按钮时,调用函数showHello()执行3JavaScript函数案例编写如左图所示,具有能对两个操作数进行加、减、乘、除运算的简易计算器。名为myform的表单名为divButton2的普通按钮名为txtNum1的文本框提示:加、减、乘、除四个按钮分别调用四个函数实现两个数相加、相减、相乘和相除3JavaScript函数在小结1中,4个按钮调用的函数的代码很类似,怎么优化代码?比较4个函数,只有运算符号不一样,将运算符号作为函数的参数即可。怎么用一个函数来代替4个结构相似的函数?使用有参函数3JavaScript函数定义有参函数JavaScript代码<HEAD><SCRIPTlanguage="JavaScript">functioncompute(op){varnum1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parseFloat(document.myform.txtNum2.value); if(op=="+") document.myform.txtResult.value=num1+num2; if(op=="-") document.myform.txtResult.value=num1-num2; if(op=="*") document.myform.txtResult.value=num1*num2; if(op=="/"&&num2!=0) document.myform.txtResult.value=num1/num2;}</SCRIPT></HEAD>定义有参函数compute(),完成计算功能,op参数代表运算符号。3JavaScript函数调用有参函数JavaScript代码<FORMaction=""method="post"name="myform"id="myform">……<TR><TD><INPUTname="addButton2"type="button“ id="addButton2"value="+"onClick="compute('+')"></TD><TD><INPUTname="subButton2"type="button" id="subButton2"value="-"onClick="compute('-')"></TD><TD><INPUTname="mulButton2"type="button“ id="mulButton2"value="×"onClick="compute('*')"></TD><TD><INPUTname="divButton2"type="button" id="divButton2"value="÷"onClick="compute('/')"></TD></TR>……</FORM>调用有参函数3JavaScript函数常见错误1<SCRIPTlanguage="javascript">functioncompute(op){x=5;varnum1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parseFloat(document.myform.txtNum2.value); if(op=="+") document.myform.txtResult.value=num1+num2;if(op=="-") document.myform.txtResult.value=num1-num2;}</SCRIPT>变量可以不声明而直接赋值。如x=5;不推荐使用,容易出错。3JavaScript函数<SCRIPTlanguage="javascript">functioncompute(op){varNum1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parseFloat(document.myform.txtNum2.value); if(op=="+") document.myform.txtResult.value=num1+num2;if(op=="-") document.myform.txtResult.value=num1-num2;}</SCRIPT>JavaScript大小写非常敏感3JavaScript函数常见错误2常见错误3<SCRIPTlanguage="javascript">functioncompute(op){varnum1,num2; num1=document.myform.txtNum1.value; num2=document.myform.txtNum2.value; if(op=="+") document.myform.txtResult.value=num1+num2;if(op=="-") document.myform.txtResult.value=num1-num2;}</SCRIPT>需要使用parseFloat方法进行转换,否则认为是字符串3JavaScript函数常见错误3JavaScript实现表单验证04演示示例1:具有验证功能的登录页面演示示例2:具有验证功能的注册页面制作具有验证功能的登录页面制作具有验证功能的注册页面4JavaScript实现表单验证会员注册页面获得焦点时(光标移入)失去焦点时(光标移出)失去焦点时(光标移出)4JavaScript实现表单验证知识点:几种样式?动态设置标签内容?获取焦点事件?失去焦点事件?<html><head><scripttype="text/javascript">
functionfoucs_mail(){document.getElementById("span_mail").className="span2";document.getElementById("span_mail").innerHTML="<imgsrc='images/reg2.gif'style='vertical-align:middle'/>8-50个字符";}</script></head><body><formname="form1"action=""method="post"><inputtype="text"name="txt_mail"class="text"onfocus="foucs_mail()"onblur="blur_mail()"/><divid="span_mail"class="span1"><imgsrc="images/reg1.gif"style="vertical-align:middle"/>请输入邮箱</div></form></body></html>修改内容修改属性定位链接元素(对象)获取焦点失去焦点4JavaScript实现表单验证实现步骤:1)设置样式2)编写Javascript代码3)设置获取焦点事件4)设置失去焦点事件4JavaScript实现表单验证为什么需要表单验证服务器IE脚本在客户端执行,减轻服务器端的压力客户端用户输入客户端用户输入……客户端用户输入……发送请求返回响应发送请求返回响应发送请求返回响应4JavaScript实现表单验证文本框控件验证文本框对象的常用属性、方法、事件名称说明属性value设置或获取文本框的值方法focus()获得焦点select()选中文本内容,突出显示输入区域事件onFocus光标进入某个文本框脚本运行onBlur文本框失去焦点脚本运行onKeyPress当一个键按下并释放时去触发一个事件使用文本框对象的相关方法,实现选中效果4JavaScript实现表单验证表单验证的内容-1不能为空且不能有数字不能为空且不能有数字不能为空,且只能包括字母、数字和下划线字符密码不能为空并且最少为6位,还要求两次输入的密码要一致4JavaScript实现表单验证不能为空且包含字符@和.只能二选一年月日不能为空,且不能超出其要求的范围4JavaScript实现表单验证表单验证的思路如何编写脚本验证表单?1、获取表单元素的值(String类型),然后进行判断2、触发表单(FORM)的提交事件(onSubmit)4JavaScript实现表单验证常用的String对象使用var语句
varnewstr="这是我的字符串"创建String对象
varnewstr=newString("这是我的字符串“)调用方法和属性字符串对象.属性名字符串对象.方法名()4JavaScript实现表单验证名称说明属性length获取字符串字符的个数方法indexOf(“子字符串”,起始位置)
查找子字符串的位置charAt(index)获取位于指定索引位置的字符substring(index1,index2)求子串toLowerCase(
)将字符串转换成小写
toUpperCase(
)将字符串转换成大写String对象常用的属性和方法4JavaScript实现表单验证常用的String对象4JavaScript实现表单验证语法:indexOf(“查找的子字符串”,查找的起始位置)返回子字符串所在的位置;如果没找到,返回-1例如:varxvary=“abcdefg”;x=y.indexOf(“c”,0);//返回结果为2,起始位置是0检查电子邮件email是否包含“@”和”.”4JavaScript实现表单验证<SCRIPTLANGUAGE="JavaScript">functioncheckEmail(){varstrEmail=document.myform.txtEmail.value;if(strEmail.length==0){alert("电子邮件不能为空!");returnfalse;}if(strEmail.indexOf("@",0)==-1){alert("电子邮件格式不正确\n必须包含@符号!");returnfalse;}if(strEmail.indexOf(".",0)==-1){alert("电子邮件格式不正确\n必须包含.符号!");returnfalse;}returntrue;}</SCRIPT>……<FORMname=“myform”method=“post”action=“reg_success.htm”onSubmit=“returncheckEmail()”>……<INPUTname="registerButton"type="submit"id="registerButton"value="注册">……返回结果-1表示没找到“@”字符获取表单元素的值表单的提交事件4JavaScript实现表单验证4JavaScript实现表单验证JavaScript控制网页窗体05Window对象常用的属性名称说明status指定浏览器状态栏中显示的临时消息screen有关客户端的屏幕和显示性能的信息。history有关客户访问过的URL的信息。location有关当前URL的信息。document表示浏览器窗口中的HTML文档5JavaScript控制网页窗体window对象常用的方法和事件名称说明alert("提示信息")显示一个带有提示信息和确定按钮的对话框confirm("提示信息“)显示一个带有提示信息、确定和取消按钮的对话框open("url","name")打开具有指定名称的新窗口,并加载给定URL所指定的文档;如果没有提供URL,则打开一个空白文档close()关闭当前窗口showModalDialog()在一个模式窗口中显示指定的HTML文档setTimeout("函数",毫秒数)设置定时器:经过指定毫秒值后执行某个函数
5JavaScript控制网页窗体如何使用window对象-1<SCRIPTlanguage="javascript">functionopenwindow(){window.status="系统当前状态:您正在注册用户";
if(window.screen.width==1024&&window.screen.height
==768)
window.open("register.html");elsewindow.alert("请设置分辨率为1024x768,然后再打开");}functionclosewindow(){if(window.confirm("您确认要退出系统吗?"))
window.close();}</SCRIPT><INPUTtype="button"name="regButton"value="用户注册"
onclick="openwindow()"><INPUTtype="button"name="exitButton"value="退出"
onclick="closewindow()">在窗口状态栏中设置文本设置窗口的高度使用open方法打开新窗口弹出警告对话框弹出确认对话框关闭当前窗口添加单击事件因为window是最顶层的根,所以可以省略window.open("google.htm");可简写为:open("google.htm");close()方法也是如此。5JavaScript控制网页窗体谢谢!第4讲PHP语法基础《PHP程序设计》
目录CONTENTS01020304PHP编程风格PHP数据类型PHP变量PHP操作符与表达式PHP编程风格01PHP嵌入HTML的语法(1)标准PHP标记风格:<?phpPHP代码
?>(2)短标签:<?PHP代码?>
需要修改”php.ini”文件中的short_open_tag指令1PHP编程风格PHP程序的注释
(1)单行C++语法
//
(2)shell语法
#
(3)多行C语法
/**/
1PHP编程风格PHP数据类型021)标量(1)布尔型
true/false0为false非0为true(2)整型
十进制
八进制
十六进制
(3)浮点型
单精度
双精度
实数
(4)字符串
用单引号或双引号或界定符界定。
PHP将字符串看作数组。
(单引号与双引号的区别)2)复合数据类型
数组
对象2PHP数据类型boolean(布尔型)$bo=TRUE;
$bo=FALSE;integer(整型)
$bo=1;$bo=-12;float(浮点型“double”)
$bo=1.001;$bo=3.1415926;string(字符串)
$bo=“这段字符串orENWord”;array(数组)$bo=array(1,2,3,4);$bo=array(“A”=>1,“B”=>2);
2PHP数据类型
(4)字符串
用单引号或双引号或界定符界
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 开发区项目品牌广告与营销
- 建筑制图与识图第一章
- 物理学革命爱因斯坦
- 建筑工程定额教学课件
- 混凝土工程量计算教学课件
- 玉米生长发育课件马彩霞
- 电子商务物流系统及其基本功能
- 快乐电竞馆营销活动策划方案
- 学大教育万达校区营销策划案
- 任务2 压花艺术溯源
- 2026-2027学年苏教版(新教材)小学科学四年级上册(全册)核心知识点梳理
- 甘肃张掖市肃南裕固族自治县马蹄学校2026-2027学年度第一学期七年级英语课后综合作业(一)(含答案)
- 2026年发展对象培训结业测试及答案解析
- 2026道路运输行业安全隐患排查对标手册
- 2026年第一季度家庭医生签约服务培训试卷及答案
- 2026“弘扬长征精神 奋进新征程”知识竞赛题库(含答案解析)
- 2026中国工业具身智能产业发展蓝皮书
- 湖北某厂房施工组织设计-完整版
- XJJ013-2012 新疆维吾尔自治区城市规划管理技术规定
- 4.1 整式(第1课时 单项式) 课件 七年级数学上册 (人教版2024)
- 大学体育课学情分析
评论
0/150
提交评论