购买

¥ 30.0

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 web基础-Javascript-and-CSS

web基础-Javascript-and-CSS.ppt

web基础-Javascript-and-CSS

烟雨梦兮
2018-10-14 0人阅读 举报 0 0 暂无简介

简介:本文档为《web基础-Javascript-and-CSSppt》,可适用于IT/计算机领域

Logo讲师:温春水中软培训中心邮件:wenchshicsscomcn课程名称web基础主要内容了解javaScript出现的背景javaScript函数的定义变量的定义函数的调用onLoadonClick*主要内容对象基本对象MathDateDOM对象TextgetElementByIdinnerHTMLwwwcsstcomcnJavaScript语言概况javaScript出现的背景*wwwcsstcomcnJavaScript语言概况什么是JavaScript?它是Netscape开发出的一种脚本语言其目的是为了扩展基本HTML的功能它是一种运行在客户端的脚本语言代码可以直接放入HTML文档中可以直接在支持JavaScript的浏览器中运行*JavaScript语言概况为什么使用javaScript防止客户的非法输入客户端验证*如何使用JavaScript在HTML文档的head中直接写: <scriptlanguage=“javaScript">javaScriptCode<script>从外部引入<scriptsrc=“mainjs”>引入JS文件后在HTML文件中就可以调用JS文件定义的函数了JavaScript在HTML插入方式<html><head><SCRIPTlanguage=“javaScript"><!在此插入JavaScript脚本><SCRIPT><head><body><body><html>定义函数和调用函数函数是JavaScript的基本组成部分由一系列描述语句组成用以完成特定的任务。函数定义由以下四部分组成:一个function关键字一个函数名参数列表函数描述语句。functionf(){code}函数的调用通常是点击”button”触发事件实例alert()JavaScript基本语法变量的声明JavaScript不是强类型语言变量可以不声明而直接使用。即使声明也不用指明类型var<变量名>=<变量值>注意有分号vartmp=JS是区分大小写的JavaScript基本语法JavaScript变量的类型可以是:、整型varf=、浮点型varf=、字符串型varf=‘hello’、布尔型true和falsevarf=true、对象JavaScript基本语法语句:以分号结束可以使用{}将多个语句括在一起JavaScript语句在语法上与Java基本相同也包括了顺序、分支、循环三种程序结构JS的注释单行注释:thisisacomment多行注释:*Thisisacommentblock*分支结构if语句if(<条件>)<语句>else<语句>switch语句switch(e){ caser:  break caser:  break default:  }循环结构for循环for(<变量>=<初始值><循环条件><变量累加方法>)<语句>while循环while(<循环条件>)<语句>do<语句>while((<循环条件>)调用JavaScriptJavaScript在HTML中的重要用途之一是编写事件处理程序。如按钮被按下会激发OnClick事件。这些事件发生时可以激发相应的用JavaScript编写的事件处理程序通过用户事件执行脚本在打开页面时执行脚本利用onLoad事件执行脚本在打开页面时执行脚本当浏览器打开一个HTML文档时它会从头开始解释整个文档包括HTML标签和脚本如果脚本中有可以直接执行的语句则会在遇到的时候马上解释执行。利用onLoad事件执行脚本onLoad事件是一个页面在浏览器中打开时发生的该方法常用于在打开一个页面的同时向用户显示一些消息。在下面的例子中脚本定义了一个opennews函数如果不调用该函数它将不会被执行我们可在<body>标签的onLoad事件中调用该函数。利用onLoad事件执行脚本<html><head><scripttype="textJavaScript"><!functionopennews(){alert("利用onLoad事件执行脚本")}><script><head><bodyonload="opennews()"><body><html>执行结果通过用户事件执行脚本用户在浏览器中阅读Web页时经常会使用鼠标和键盘比如移动鼠标点击链接、单击按钮等行为这些行为都会产生相应的事件我们可以通过对这些事件编写脚本来进行特殊的处理通过用户事件执行脚本<html><head><scripttype="textJavaScript"><!functionshownews(){alert("单击按钮时执行脚本")}><script><head><body><b>通过用户事件执行脚本<b><formmethod="send"><inputtype="Button"name="BUTTON"value="单击"onclick="shownews()"><form><body><html>执行结果表单提交同个表单有个按钮完成提交对象JavaScript采用了对象化编程对象包括基本对象和对象DOM基本对象:可以将声明的变量视为对象依其类型不同可以调用对象不同的属性和方法DOM(documentobjectmodel)对象:页面内容也可以抽象成对象DOM是一种理念一种思想一种方法使Web开发人员可以访问HTML元素!基本对象常用的全局对象--Global“数学”对象--Math数组对象Array日期对象Date全局对象全局对象是一个虚拟的对象通常用Global代表它JavaScript有一些全局的函数通常认为是Global对象的调用这些方法时直接写名字就可以了无须用对象名限定parseInt(“”)全局对象方法alert()弹出警告窗口parseInt转化为int类型isNaN()如果括号内的值是“NaN”则返回true否则返回falseparseInt()把括号内的内容转换成整数。如果字符串则字符串开头的数字部分被转换成整数如果以字母开头则返回“NaN”。parseFloat()转换浮点数confirmconfirmconfirmvartest=confirm("确定要删除吗?")if(test){alert("您已经成功删除!!")}else{alert("您的删除操作已经取消!!")}Math对象Math对象提供了与数学计算相关的属性和方法Math对象的属性和方法调用时的格式都是Math<名字>Math对象方法abs(x)返回x的绝对值。acos(x)返回x的反余弦值(余弦值等于x的角度)用弧度表示。asin(x)返回x的反正弦值。atan(x)返回x的反正切值。random()返回大于小于的一个随机数。Mathrandom()Array对象Arrayvarb=newArray()b=newArray(,,,,)alert(b)b=breverse()反转for(vari=i<blengthi){documentwrite(bi)}DOM简介DOM是DocumentObjectModel的缩写即文档对象模型DOM将HTML页面中的内容抽象成对象每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events)。通过DOM可以在JavaScript中操纵HTML页面的内容DOM简介大部分DOM对象是不确定不惟一的因此需要在HTML标记中给他们起名如<form>、<input>等等DOM对象同基本对象一样也有属性、方法和事件尤其是DOM对象对事件的响应是JavaScript中尤为重要的部分窗口对象方法open()打开一个窗口。open(<URL字符串>,<窗口名称字符串>,<参数字符串>)、<URL字符串>:打开页面URL、<窗口名称字符串>:窗口名称(windowname)可使用‘top’、‘blank’等内建名称。、<参数字符串>:窗口样貌。如打开普通窗口则留空窗口对象例:打开一个x的窗口:windowopen(“bhtml","blank","height=,width=,status=yes,toolbar=no,menubar=no,scrollbars=no")open()方法返回打开的窗口对象。注意要以blank的方式showModalDialog()窗口对象关闭窗口windowclose()窗口对象父窗口和子窗口值的传递vartmp=windowshowModalDialog("ahtml",formuservalue,“”)dialogArgumentswindowreturnValue实例企业应用实例父窗口showhtml子窗口ahtml父窗口<head><scriptlanguage="javaScript">functionf(){vartmp=windowshowModalDialog("ahtml",formuservalue,"height=,width=,status=yes,toolbar=no,menubar=no,scrollbars=no")formuservalue=tmp}<script><head><body><ahref="#"onClick="f()">fLink<a><formname="form"><inputtype="text"name="user"><form><body>子窗口<head><scriptlanguage="javaScript">functionf(){windowreturnValue=formuservaluewindowclose()}functionf(){formuservalue=dialogArguments}<script><head>子窗口<bodyonload="f()"><formname="form"><inputtype="text"name="user"><inputtype="button"value="return"onclick="f()"><form><body>文档对象document描述当前窗口或指定窗口对象的文档。它包含了从<head>到<body>的内容。文档对象document对象包含若干数组对象它们代表了页面上的标记元素即:Links--链接对象集合即<a>applets--Applet对象集合forms--表单对象集合即<form>images--图片对象集合即<img>访问其中一个只需要加上索引即可如documentforms访问文档中的元素通过名字访问documentform(form的name)username(input元素的name)通过id访问documentgetElementById()扩展:innerHTML表单对象documentforms是一个数组包含了文档中所有的表单。要引用单个表单可以用documentformsx。如果<form>标记中加上“name=”“”属性那么直接用“document<表单名>”就可以引用了。<form>所拥有的子元素如<input>等等也对应到JavaScript中的一类对象通常使用<inputname=“”>中name来访问这些对象如果有:<formname=“myForm”><inputtype=“text”name=“user”><form>则访问text类型的输入框即为documentmyFormuser表单对象forms的属性:name表单名称即<formname=“”>属性。action返回设定表单提交地址即action属性。method返回设定表单提交方法即method属性target返回设定表单提交后返回的窗口也就是<formtarget="">属性。encoding返回设定表单提交内容的编码方式也就是<formenctype="">属性。length返回该表单所含元素的数目。表单对象方法reset()重置表单。这与按下“重置”按钮是一样的。submit()提交表单。这与按下“提交”按钮是一样的表单对象以下对象都可以做为表单属性使用但需要指定名字、文本框对象--<inputtype="text">、多行文本输入区对象--<textarea>、隐藏对象--<inputtype=”hidden“>、密码输入区对象--<inputtype=”password“>、单选域对象--<inputtype="radio">表单对象、复选框对象--<inputtype="checkbox">、下拉菜单对象--<select>、选择项对象--<option>、重置按钮对象--<inputtype="reset">、按钮对象--<inputtype="button">、提交对象--<inputtype=“submit”>文本类对象包括text、textarea、hidden、password属性name返回设定用<inputname=“”>指定的元素名称。value返回设定密码输入区当前的值。方法blur()从对象中移走焦点。focus()让对象获得焦点。select()选中输入区里全部文本。需要注意的是由于hidden不可见因此hidden对象没有方法。按钮类对象包括button、reset、submit属性name返回设定用<inputname="">指定的元素名称。value返回设定用<inputvalue="">指定的元素的值。form返回包含本元素的表单对象。方法blur()从对象中移走焦点。focus()让对象获得焦点。click()模拟鼠标点击该对象单多选对象Radiocheckbox对象属性name返回设定用<inputname=“”>指定的元素名称value返回设定用<inputvalue=“”>指定的元素的值checked返回设定该单选域对象是否被选中。这是一个布尔值。方法blur()从对象中移走焦点。focus()让对象获得焦点。click()模拟鼠标点击该对象注意:调用documentformradioName返回的是数组下拉菜单对象select属性name返回设定用<inputname="">指定的元素名称。length返回Select对象下选项的数目。selectedIndex返回被选中的选项的下标。这个下标就是在options数组中该选项的位置。form返回包含本元素的表单对象。方法blur()从对象中移走焦点。focus()让对象获得焦点onChange()扩展DOMgetElementByIdinnerHTMLDate刷新setTimeoutCSSCSS概念为什么要使用CSSCSS的使用HTML样式单CSS是CascadingStyleSheets(层叠样式表单)的简称CSS的基本语法:HTML标志{标志属性:属性值标志属性:属性值标志属性:属性值……}B{color:red}  I{color:red}  H{color:red}*CSS为什么要使用CSS美化元素方便统一修改CSS的使用内部样式表<head><styletype="textcss"><style><head>连接外部样式表<linkrel="stylesheet"type="textcss"href="stylescss">*CSS基本结构table{backgroundcolor:red}内部样式表<style>…………<style>样式表信息必须包含在这对标签之间这对标签必须放在<head><head>中<style><!H{color=blue}><style>分组使用样式表多个标志相同属性的定义方式:B,I,H{color:red}B粗体I斜体H号标题Css样式定义在标签上的css格式H,H,H,H,H,H{Color:redtextdecoration:underlineFontfamily:”黑体”}Css样式设定在ID上的css格式为#id名{标志属性:属性值标志属性:属性值……标志属性:属性值}引用的方法:<标志 ID="ID名">。*Css样式直接定义class:类名{标志属性:属性值标志属性:属性值……标志属性:属性值}引用:<HTML标志CLASS="类名">CSS的作用范围body{fontfamily:sansserif}h,h{color:gray}h{borderbottom:pxsolidblack}CSS的作用范围在tag为p,class为a的元素上生效papa{fontsize:ptbordercollapse:collapseborderwidth:pxfilter:progid:DXImageTransformMicrosoftShadow(Color=#BCDE,Direction=,strength=)}CSS的作用范围忽略tag,在class为a的所有元素上生效a{fontsize:ptbordercollapse:collapseborderwidth:pxfilter:progid:DXImageTransformMicrosoftShadow(Color=#BCDE,Direction=,strength=)}css链接样式a:link设置链接本来的颜色a:active设置链接被激活的颜色a:visited设置链接访问过后的颜色a:hover设置链接在鼠标悬停时的颜色设置链接本来的颜色a:link{textdecoration:nonecolor:#}设置链接被激活的颜色a:active{textdecoration:none}设置链接访问过后的颜色a:visited{textdecoration:nonecolor:#}设置鼠标悬停时的颜色a:hover{textdecoration:underlinecolor:#EA}wwwcsstcomcn总结了解javaScript出现的背景javaScript函数的定义变量的定义函数的调用onLoadonClick对象基本对象Math,DateDOMTextCSS*作业使用JS给昨天作业登陆页面添加验证要求用户名为che密码为才可以登陆成功使用JS给注册页面添加验证要求:要求所有的必填项加入验证不能为空要求:用户名长度控制在字节以内要求:密码英文字母或数字等不少于位********

VIP尊享8折文档

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/75

web基础-Javascript-and-CSS

¥30.0

会员价¥24.0

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利