HTML+CSS+JS.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,目录,1.HTML/CSS/JavaScript,先睹为快,2.HTML,3.CSS,4.JavaScript,1.1 HTML,代码,未使用,css,，,JavaScript,的,html,网页,未使用,css,，,JavaScript,的,html,网页,这是一个未使用,css,，,JavaScript,的,html,网页,使用记事本即可编写,HTML,代码，扩展名是,html,或,htm,。,使用浏览器就可以查看其效果。,1.2 CSS,代码,使用了,css,的,html,网页,h2 font-size:50,pfont-size:20;font-style:italic,使用了,css,的,html,网页,这是一个使用了,css,的,html,网页,1.3 JavaScript,代码,使用了,css,和,JavaScript,的,html,网页,h2 font-size:50 pfont-size:20;font-style:italic,alert(,这是,JavaScript,起的作用,);,使用了,css,和,JavaScript,的,html,网页,这是一个使用了,css,和,JavaScript,的,html,网页,1.4 HTML,、,CSS,、,JavaScript,的角色HTML,：,超文本标记语言,。是网页设计的主要语言。无论网页是否包括动画、多媒体、图形等各种复杂的元素，其基本架构都是,HTML.,CSS,：,层叠样式表,。是目前唯一的网页排版样式标准，弥补了,HTML,在网页格式化方面的不足，帮助用户对页面的布局加以更多的控制。,JavaScript,用于开发,Internet,客户端应用程序，实现了一种实时、动态、交互的页面功能。它的出现使静态的,HTML,页面逐渐本客户端可做出响应的动态页面所取代。,可以在,HTML,语言中直接编写,CSS,和,JavaScript,代码，也可以独立编写。扩展名分别是,.,css,和,.,js,2 HTML,1:HTML,简介,2:,基本标记,3:,列表,list,4:,表格,table,5:,表单,form,6:,框架,frame,7:,层,div,2.1.1 HTML,概念,HTML,Hyper Text Markup Language,超文本标识语言,是一种用来制作超文本文档的简单标记语言。,用,HTML,编写的超文本文档称为,HTML,文档,HTML,文档：,*,.,htm,或*,.html,文件名区分大小写,浏览,HTML,文件的工具,:,浏览器,例：,Netscape Navigator,Microsoft,IE,Mazilla,FireFox,2.1.2 HTML,文档的编写方法,手工直接编写,记事本等，存成,.,htm,.html,格式，要求用户必须掌握,HTML,使用可视化,HTML,编 辑 器,Frontpage,、,Dreamweaver,等,容易产生废码,2.1.3 HTML,文档结构,my first page,This is my first homepage!,这是我的第一张网页！,2.1.3 HTML,文档结构,标记,(,签,),是,HTML,语言的基本部分，比如,、,、,、,、,。大多数标记总是成对出现，每一对标记一般都有一个开始的标记并且结束的标记总是在开始的标记前加一个斜杠。,属性：,HTML,标记有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。,my first homepage,注意：,标记不区分大小写。例,都可以,标记中不要有空格，否则浏览器无法识别。例,错误,任何空格和回车在代码中无效。插入空格和回车分别用,和,&,nbsp,;,属性的值可以用双引号引起来，也可以不引，最好引起来,各属性之间无先后次序，属性也可省略（即取默认值）,2.1.3 HTML,文档结构,-,head(title,),标记出现在文档的开头部分,。,与,之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。,1:,标记定义,HTML,文档的标题。,与,之间的内容将显示在浏览器窗口的标题栏。,2.1.3 HTML,文档结构,-,headmeta,),2:,标记,标记定义网页的一些相关信息，例文件的关键字，作者，网页过期时间等，这些信息不会在浏览器的文档窗口显示,用来标记搜索引擎在搜索你的页面时所取出的关键词。,用来标记文档的作者。,用来标记你的页面的解码方式。,用来自动刷新网页,2.1.3 HTML,文档结构,-(,head)meta,编写一个网页，要求,3,秒钟后自动跳转到北软教育首页。,my first page,三秒钟后本网页将自动跳转到北软教育首页,2.1.3 HTML,文档结构,-body,表明是,HTML,文档内容主体部分。在,与,之间，通常都会有很多其它标记；这些标记和标记属性构成,HTML,文档的主体部分。自身属性主要有：,1)bgcolor,bgcolor,属性标志,HTML,文档的背景颜色。如：,bgcolor,=#CCFFCC,。,2)background,background,属性标志,HTML,文档的背景图片。可以使用的图片格式为,gif,jpg,如：,background=“images/,bg.gif,。,3)text,text,属性标志,HTML,文档的正文文字颜色。如：,text=“#FF6666”,。,text,定义的颜色将应用于整篇文档。,2.1.3 HTML,文档结构,-body,颜色,颜色名和,RGB,值,黑色,Black=”#000000”,银色,Silver=”#c0c0c0”,红色,Red=”#ff0000”,蓝色,Blue=”#0000ff”,白色,White=”#,ffffff,”,黄色,Yellow=”ffff00”,绿色,Green=”#00ff00”,海蓝色,Aqua=”#00ffff”,2.,2,基本,HTML,标记,1.,标题标记,2.,文字标记,3.,段落级标记,4.,字符级标记,5.,水平标尺标记,6.HTML,注释,6.,超级链接,7.,图像标记,8.,移动的文字,2.,2.1,标题标记,可显示六种大小的标题，即,到,，,为最大，,为最小,HTML,简介,HTML,简介,HTML,简介,HTML,简介,HTML,简介,HTML,简介,HTML,简介,2.2.2,文字标记,文字属性标记,1.,文字颜色,.,#=RRGGBB 16,进制数码,2.,文字字体,.#=,客户端可获得的字体,3.,文字大小,.,#=1,2,3,4,5,6,7,等,2.,2.3.,段落级标记,段落标记,(paragraph),换行符标记,预格式化标记,：,HTML,的段落与段落之间有一定的空隔。,如果不希望出现空隔而只想换行的话，就要用到另一个元素，即,元素。,利用,标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落。即,浏览器会以文本输入格式显示,用三种标记分别实现登鹳雀楼的显示,2.,2.4,字符级标记,常用字符级标记,倾斜文本,粗体文本,下划线文本,删除线文本,强调文本,居中显示文本,空格标记,&,nbsp,;,2.,2.5,水平线标记,水平线,：设定线宽,：设定线长,：设定对齐方式,#=left,right,：设定线的颜色,2.,2.6 HTML,注释,HTML,文档可以插入注释。不但便于对程序排错，也使其他人更易读懂自己的代码,HTML,注释的格式为：,源码依然存在，不会被浏览器所解释,注释语句的特点是仅用于程序中某一句或一段语句的作用说明，浏览器在执行过程中将忽略掉注释语句的内容，对其视而不见。,2.,2.7,超级链接,超级链接是用锚元素,定义的,在,元素下，有元素属性,href,href,的属性值为一个,URL,地址,如：,指向学院的超级链接,如：,普通超级链接,如：,普通超级链接,开一个新的,(,浏览器,),窗口,(Target Window),.,2.,2.7,超级链接,超级链接的路径,绝对路径：指文件的完整路径，包括协议，主机地址等，一般用于网站的外部链接。,Interchange Format,）图像,(.GIF),支持无损压缩,只支持,256,色,JPEG,（,Joint Photographic Experts Group,）图像,(.JPG),有损压缩，但这个损失是剔除一些视觉上不易察觉的部分。,通常用来保存超过,256,色的图片文件,PNG,（,Portable Network Graphics,）,新兴的网络图片格式，结合了,gif,和,jpeg,的优点。,可以将图片文件以最小的方式压缩而不造成图片失真,支持,48bit,的色彩。,2.,2.8,图像标记,图像的超级链接,图像的超级链接是指整个图像的超级链接，当点击图像的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：,图像的热区链接,热区就是在图片中特意划分出一个热点区域。当点击图象的热区时，才会打开这个超级链接。,需要使用,map,标记指定热区。,2.,2.9,移动的文字,基本语法,.,文字移动属性,(1),方向：,direction,=#,#=left,right,up,down,2),方式：,behavior,=#,#=,scroll,(,循环,),slide,(,只走一次,),alternate,(,来回走,),(3),循环,:,loop,=#,#=,次数；若未指定则循环不止,(infinite),(4),速度,:,scrollamount,=#,(5),延时,:,scrolldelay,=#,2.3.1,无序列表,无序列表由,和,元素定义的,:,sports,food,drink,friends,无序列表的默认符号是圆点。,元素有,type,属性，通过定义不同的,type,属性可以改变列表的项目符号。目前，,type,属性的属性值有：,disc(,圆,),、,circle,（圆圈）、,square,（方块）,支持嵌套定义,2.3.2,有序列表,有序列表由,和,定义,:,sports,drink,friends,元素也有自己的,type,属性,，,type,属性的属性值有,1,、,A,、,a,、,I,、,i,等。例如，我们以,A,、,B,、,C,作为列表的编号,元素还可以定义列表的起始编号，如我们希望列表的第一个编号为,5,，而不是,1,，则需要定义,元素的,start,属性,支持嵌套定义,2.4.1,表格的基本结构,定义表格,定义表头,定义表行,定义单元格,.,定义表行,定义单元格,2.4.1,表格的基本结构,元素：定义一个表格。每一个表格只有一对,和,，一张页面中可以有多个表格。,元素：定义表格的行，一个表格可以有多行，所以,对于一个表格来说不是唯一的。,元素：定义表格的一个单元格。每行可以有不同数量的单元格，在,和,之间是单元格的具体内容。,需要注意的是：上述的,三个元素必须、而且只能够配对使用,。缺少任何一个元素，都无法定义出一个表格。,元素：定义表格的表头行，一个表格只能有一个表头行或者没有，所以,对于一个表格来说是唯一的或没有。,2.4.2,表格的属性,表格的属性,width,属性：指定表格或某一个表格单元格的宽度。单位可以是,%,或者象素。,height,属性：指定表格或某一个表格单元格的高度。单位可以是,%,或者象素。,border,属性：表格边线粗细,bgcolor,属性：指定表格或某一个单元格的背景颜色。,background,属性：指定表格或某一个单元格的背景图片。其属性值为一个,URL,地址,align,属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式,(,left,center,right,),。,2.4.3,单元格的属性,单元格属性,valign,属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：,top,：顶端对齐；,middle,：居中对齐；,bottom,：底端对齐,;baseline,：相对于基线对齐,;,align,属性：指定某一个单元格里的内容（文本、图片等）的水平对齐方式（,left,center,right,）,colspan,：属性值表示当前单元格跨越几列,rowspan,：属性值表示当前单元格跨越几行,2.4.4,行的属性,行属性,1,、,valign,属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包,top,：顶端对齐；,middle：居中对齐,；,bottom,：底端对齐。,baseline,：相对于基线对齐。,2,、,align,属性：指定表格或某一个单元格里的内容（文本、图片等）的水平对齐方式,(,left,center,right,),3,、,height,属性：指定表格中某一行的高度。单位可以是,%,或者象素,2.4.5,表格的嵌套,在,之间插入表格，实现表格嵌套,导航列表,计算机,政治,军事,法律,正文内容,2.4.5,表格的作用,表格是用于在,HTML,页面上设计数据和图像布局的常用工具，可使用表格来组织数据，控制页面布局,制作网页时，为了以一定的形式将网页中的信息组织起来，同时使网页便于阅读和页面美观，需要对页面的版式进行设计或进行页面 布局。而表格能将网页分成多个任意的矩形区域，表格是网页制作中是常用的一种简单布局工具。,表格的作用一般只是控制文本和图像的显示，而不显示表格的边框,2.4.6,表格举例,第一季度,第二季度,一月,二月,三月,四月,五月,六月,1000,550,240,1500,2765,1240,3000,2430,2500,1250,900,3400,2.5.1,表单,form,HTML,表单是,HTML,页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。,在,HTML,里，我们可以定义表单，并且使表单与,CGI,或,ASP,等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。,表单是网页上的一个特定区域。这个区域是由一对,元素定义的。,2.5.2,表单举例,设计一个注册表单，输入姓名，年龄，密码，密码确认，电子邮件，性别，爱好，身份，个人简历，单击提交按钮提交，单击重置按钮重置。,姓名，年龄，电子邮件：,text,密码，密码确认：,password,性别：,radio,爱好：,checkbox,身份：,select,个人简历：,textarea,提交按钮：,submit,重置按钮：,reset,2.5.2,表单举例,2.5.2,表单举例,姓名,密码,密码确认,性别,男,女,年龄,电子邮件,爱好,体育,音乐,美术,身份,学生,教师,解放军,个人经历,请输入个人简历,2.5.2,表单举例,2.5.2,表单举例,姓名,密码,密码确认,性别,男,女,年龄,2.5.2,表单举例,电子邮件,爱好,体育,音乐,美术,身份,学生,教师,解放军,个人经历,请输入个人简历,2.5.3,表单基本语法,1.,表单的基本语法,:,.,action,属性,：用来定义表单处理程序（一个,ASP,、,JSP,等程序）的位置,(,相对地址或绝对地址,),。,method,定义表单结果从浏览器传送到服务器的方法，一般有两种方法：,get,、,post,。,GET,有数据量限制，,POST,无以上限制,以文件形式传输,2.5.3,表单基本语法,2.,文本框的基本语法,:,?,文本框的名字,*,默认值,*,长度,?,最大输入字符数,3.,密码框的基本语法：数据以圆点形式显示，提高密码安全性,2.5.3,表单基本语法,3.,复选框的基本语法,:,在一个表单里的所有多选框可以有一个或多个被选中。,/,默认选中,4.,单选框的基本语法,:,一个表单里的所有变量名相同的单选框只能够有一个被选中,。,/,默认选中,各个选项的,name,必须一样,才能达到预期效果,5.,标准按钮的基本语法,:,2.5.3,表单基本语法,6.,提交按钮和重置按钮的基本语法,:,7.,图象域的基本语法,:,：,相当于漂亮的,submit,按钮,。,8.,隐藏域的基本语法,隐藏域在网页中对用户是不可见的，用户单击提交按钮提交表单时，隐藏域的信息也被一起发送到服务器。,2.5.3,表单基本语法,9.,文本区域的基本语法,:,.,10.,下拉菜单的基本语法,音乐,美术,体育,2.5.3,表单基本语法,TYPE,此属性指定表单元素的类型。可用的选项有,TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN,和,BUTTON。,默认值为,TEXT。,NAME,此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们,-TEXT1,、,TEXT2,或用户选择的任何名称。,VALUE,此属性是可选属性，它指定表单元素的初始值,SIZE,此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是,TEXT,或,PASSWORD,的,MAXLENGHT,此属性用于指定在,TEXT,或,PASSWORD,表单元素中可以输入的最大字符数。默认值为无限的,CHECKED,此属性是一个,Boolean,属性，指定按钮是否是被选中的。当输入类型为,RADIO,或,CHECKBOX,时，使用此属性。,SRC,SRC=URL,。,当使用,IMAGE,作为输入类型时使用此属性，它用于标识图像的位置。,2.6.1,框架举例,2.6.1,框架举例,框架的嵌套,2.6.2,框架简介,框架是一种在一个网页中显示多个网页的技术，通过超级链接可以为框架之间建立内容之间的联系，从而实现页面导航。,在网页文件中，框架常用于网页的布局。,框架的基本结构分为框架集,frameset,和框架,frame,两个部分。,使用框架集的页面的,标记将被,标记替代，然后在利用,标记去定义框架结构。,每个框架,frame,由一个单独的,HTML,页面组成。,框架支持嵌套。当一个框架集中既有左右分割，又有上下分割是，就要用到框架嵌套。,2.6.2,framset,基本语法,框架由一对,定义,有两个属性：,rows,和,cols,rows,定义上下分割的框架的大小；,cols,定义左右分割的框架的大小；,在定义大小时，,rows,和,cols,可使用相对大小或以百分比为单位,2.6.2 frame,基本语法,的属性,src,：在本框架里显示的网页的,URL,。,frameborder,：,是否显示边框,name,：定义该框架的名字。这个名字可以被一些网页元素引用，如被,元素引用。,noresize,：框架在浏览器里不可以被调整大小。,scrolling,：是否显示滚动条。,yes,no,auto,2.6.2 frame,基本语法,left.html,:,快乐的生活,在当前框架中打开超链接页面,默认就是在当前框架页中打开,也可以采用,target=“,_self,”,在指定框架中打开超级链接页面,target=“,name,”,新开窗口打开链接页面,target=“,_blank,”,跳出整个框架集,target=“,_parent,”,2.7.1,图层,图层也是网页制作中用于定位元素或布局的一种技术，图层比表格的布局更加灵活，它能够将层中的内容摆放到浏览器的,任意位置,，放入到层中的,HTML,元素包括：文字、图像、动画甚至是图层。,一个网页中可以使用多个层，层与层之间可以重叠，在网页制作中，使用层可以将网页中的任何元素布局到网页的任意位置，同时可以以,任何方式重叠,。,可以想象在,word,文档中不同图片之间的上下左右位置和前后重叠关系。,图层也可以实现嵌套的功能。嵌套图层最主要的特点就是可以保证子层永远位于父层之上。,2.7.2,图层举例,将元素分组,第一层,这是第一部分内的一个段落元素,第一层的内容。,该部分之外,第二部分,这是第二部分内的一个段,第一层的内容。,2.7.3,图层属性讲解,基本语法,/,设置图层背景色,./,图层的具体内容,3.1 CSS,的作用,CSS,是,Cascading Style Sheets(,层叠样式表,),的简称,.,是一系列格式规则，它们控制网页内容的外观。,css,简单来说就是用来美化网页用的。,使用,CSS,样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。,即使不改动,HTML,，只是通过添加不同的,CSS,规则，就可以得到各种不同样式的网页。,可以通过简单的更改,CSS,文件,改变网页的整体表现形式,从而减少我们的工作量,所以她是每一个网页设计人员的必修课,.,CSS,可以嵌入到,html,文档中，也可以单独文件形式存在，扩展名是,.,css,3.1 CSS,的作用,当样式定义在外部文件中时，一个样式表可以用于多个页面，甚至整个工作点，因此具有更好的易用性和扩展性。,总的来说，,CSS,可以完成下列工作：,（,1,）弥补,HTML,对网页格式化功能的不足，如段落间距、行距等。,（,2,）设置字体变化和大小。,（,3,）设置页面格式的动态更新。,（,4,）进行排版定位。,CSS,的特点,（,1,）控制页面中的每一个元素（精确定位）。,（,2,）对,HTML,语言处理样式的最好补充。,（,3,）把内容和格式处理相分离，减少工作量。,3.2,样式表规则,CSS,的样式规则,css,样式规则由两部分组成：选择器和声明。,选择器是样式名称（如,TR,或,P,）。声明是用于定义样式元素。,pfont-style:italic,;font-,weight:bold,;,color:limegreen,.water,color:blue,用法：,RuleSelector,property:value;property,:value;.,规则选择器,声明,属性,属性值,3.3,样式表中的选择器,1,：简单选择器,(,仅描述元素，而不考虑该元素在文档结构中的位置,),1.1 HTML,选择器,-,选择器是,HTML,标记的名称,1.2,类选择器,使用,HTML,元素的,CLASS,属性,1.3 ID,选择器,使用,HTML,元素的,ID,属性,2,：上下文选择器,(,引用元素的上下文,),3.3,样式表中的选择器,1.1,：,HTML,选择器示例,h1,h2,h3,h4,h5,h6 color:green,Pfont-style:italic,;font-,weight:bold,;,color:red,测试,HTML,选择器,这些选择器使用,HTML,元素的名称唯一区别是删除了尖括号。,3.3,样式表中的选择器,1.2,：类选择器示例,.water,color:blue,;text-,align:right,p.danger,color:red,;text-,align:center,测试,CSS,测试水,测试危险,无样式,3.3,样式表中的选择器,1.3,：,ID,选择器示例,ID,选择器,#control,color:red,这是火焰的颜色,本段没有应用样式,3.3,样式表中的选择器,所有的,HTML,标签都可以作为类选择器。,省略,HTML,标记的类选择器是最常用的,CSS,方法，使用这种方法，可以很方便的在任意元素上套用预先定义好的类样式,HTML,页面中,ID,参数指定了某个单一元素，,ID,选择器用来对这个单一元素定义单独的样式。由于,ID,选择器局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。,ID,是先给某个元素定义标签，再给它定义样式；,class,是先定义好一种样式，再套给多个元素。,用多个相同,ID“,一般情况下”也能正常显示。但是当你需要用,JavaScript,通过,id,控制这个元素时,(,如,div),，那就会出现错误,3.3,样式表中的选择器,2,：上下文选择器示例,acolor:red;font-size:20,table acolor:green;font-size:25,table,a:hovercolor:blue,北软教育,北软教育,北软教育,3.3,样式表中的选择器,2,：上下文选择器示例,上下文选择器,BODYcolor:blue;background:lavender;font-family:Arial,;,UL,color:red,ul,acolor:green,;font-size:15,芒果,桔子,苹果,芒果,桔子,苹果,3.4,在,HTML,中引用样式表,1,：使用,Style,元素,2,：使用,Style,属性,3,：使用,Link,元素,3.4,在,HTML,中引用样式表,1,：使用,Style,元素,STYLE,元素应插入文档的,元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了,STYLE,元素的文档会受到影响,H1,color:maroon,;,P,color:hotpink,;font-,family:Arial,;,3.4,在,HTML,中引用样式表,2,：使用,Style,属性,style,属性用于将样式表应用于单个元素。直接将在,HTML,标记里加入,style,参数，而,style,参数的内容就是,CSS,的属性和值。,本段应用了内嵌样式,本段以默认样式显示,。,您能发现本行中的,不同之处,吗？,3.4,在,HTML,中引用样式表,3,：使用,Link,元素链入外部样式表,链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用,标记链接到这个样式表文件，这个,标记必须放到页面的,区内,设置属性,。,3.5,样式表属性,类型,CSS,属性,值,字体,属性,font-family,Arial,，,serif,，,宋体,font-size,Small,，,medium,，,large或直接指定字体大小,font-style,normal,italic,font-weight,normal,bold,lighter,100,200,文本,属性,text-align,left,right,center,justify,text-indent,度量或,%,text-decoration,none,blink,underline,overline,line-through,text-transform,none,capitalize,uppercase,lowercase,vertical-align,Baseline,super,sub,top,text-top,middlebottom,text-bottom,word-spacing,度量,letter-spacing,度量,3.5,样式表属性,类型,CSS,属性,值,框,属,性,border,None,solid,double,ridge,inset,outset,groove,dotted dashed,border-style,同上,border-width,度量,，,thick,，,medium,，,thin,border-color,#RRGGBB,，颜色名称,margin-top,度量或,%,Margin-left,度量或,%,定位,属性,top,度量,width,度量或,%,height,度量或left,度量,颜色,属性,color,#RRGGBB,，颜色名称,background-,color,#RRGGBB,，颜色名称，,transparent,background-image,url,background-repeat,repeat,repeat-x,repeat-y,no-repeat,JavaScript,JavaScript,概述,JavaScript,基本语法,JavaScript,事件,JavaScript,对象,4.1.1 JavaScript,先睹为快,举例,在,HTML,页面中显示“你好,欢迎学习,JavaScript,！”,创建交互式的网页,允许用户以适当的格式输入数据；,使用弹出窗口为用户显示信息等,控制浏览器的行为,设置页面的背景颜色；,在状态栏显示信息等,4.1.1 JavaScript,先睹为快,用,HTML,代码实现在页面中显示“你好,欢迎你学习,JavaScript!”,1,、在,HMTL,中嵌入,JavaScript,document.write,(,你好，欢迎你学习,JavaScript,！,),2,、链接,JavaScript,文件,链接,JavaScript,代码,test.js,文件要显示的内容如下：,document.write,(,你好，欢迎你学习,JavaScript,！,),4.1.1 JavaScript,先睹为快,function,checkPw,(),fm=document.form1;,if(fm.pw2.value!=fm.pw1.value),alert(,密码不符，请重新输入,);,document.form1.pw2.select();,else,alert(,谢谢你，,+,fm.name.value,);,姓名：,输入密码：,重新输入：,4.1.1 JavaScript,先睹为快,document.bgColor,=green;,document.fgColor,=white,function,mOver(object,msg,),status=,msg,;,object.colorred;,object.face,=,华文楷体,;,function,mOut(object,),status=,谢谢指向,;,object.color,=blue;,object.face,=,黑体,;,Javapro,技术学习网,4.1.2,什么是,JavaScript,JavaScript,是由,Netscape,（网景）公司研发出来的一种在它的,Navigator,浏览器上执行的程序语言。,JavaScript,是一种,基于对象,(object-based),和,事件驱动,(Event Driven),并具有安全性能的脚本语言。,使用它的目的是与,HTML,超文本标记语言、,Java,脚本语言（,Java,小程序）一起实现在一个,Web,页面中连接多个对象，与,Web,客户交互作用,从而可以开发,客户端的应用程序,等。,它是通过,嵌入或调入,到标准的,HTML,语言中实现的。它的出现弥补了,HTML,语言只能制作静态网页的缺陷，它是,Java,与,HTML,折衷的选择,4.1.3 JavaScript,的基本特点,1,、脚本编写语言,脚本语言是一种简单的程序，这些程序是由一些,ASCII,字符构成，可以使用任何一种文本编辑器编写。一些程序语言（如,C,、,C+,、,Java,等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而,脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。,脚本语言是指在,web,浏览器内有解释器解释执行的编程语言,，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。,4.1.3 JavaScript,的基本特点,2,、基于对象的语言,面向对象有三大特点（封装，继承，多态）却一不可,通常“基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说“基于对象”没有继承的特点。没有了继承的概念也就无从谈论“多态”。,现在的很多流行技术都是基于对象的，,它们使用一些封装好的对象,，调用对象的方法，设置对象的属性。但是它们无法让程序员派生新对象类型。他们只能使用现有对象的方法和属性。,4.13 JavaScript,的基本特点,3,、简单性,它是一种基于,Java,基本语句和控制流之上的简单而紧凑的设计,从而对于学习,Java,是一种非常好的过渡。,它的变量类型是采用弱类型，并未使用严格的数据类型。,var,a,b,c,;,a=123;b=“,abc,”;a=b;,4.1.3 JavaScript,的基本特点,4,、安全性,JavaScript,不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，而只能通过浏览器实现信息浏览或动态交互,5,、跨平台性,JavaScript,依赖于浏览器本身，与操作平台无关，只要计算机上安装了支持,JavaScript,的浏览器（装有,JavaScript,解释器），,JavaScript,程序就可以正确执行。,4.1.3 JavaScript,的基本特点,6,、动态性（交互性）,JavaScript,可以,直接对客户输入在客户端做出响应,，实现人机交互，,无须经过,Web,服务程序,。它对用户的反映响应，是采用以事件驱动的方式进行的。,事件驱动：在网页中执行了某种操作的动作，被称为“事件”,(Event),，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。,4.1.3 JavaScript,的基本特点,JavaScript,的局限性,各种浏览器支持,JavaScript,的程度是不一样的，支持和不完全支持,JavaScript,的 浏览器在浏览同一个带有,JavaScript,脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。,当把,JavaScript,的一个设计目标设定为,“,Web,安全性,”,时，就需要牺牲,JavaScript,的一些功能。这时，纯粹的,JavaScript,将不能打开、读写和保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那个,Web,主页中的信息，简言之，,JavaScript,将只存在于它自己的小小世界,-Web,网页里。,4.1.4 JavaScript,的作用,交互式操作,表单验证,网页特效,Web,游戏服务器脚本开发等,4.1.5,其他脚本语言,JScript,:Microsoft,公司在,Netscape,公司发布的,JavaScript,的基础上，也开发了自己的,JavaScript,规范，叫,JScript,ECMAscript,:,国际上通用的标准化版本的,JavaScript,，是未来,JavaScript,的发展方向,VBScript,：,Microsoft,开发的,VB,家族的成员，与,JavaScript,运行原理相同。但是，目前只有,IE,浏览器支持,VBScript,注意：,JavaScript,也有服务器端和客户端两种形式，客户端,JavaScript,就是指把,JavaScript,解释器嵌入到,web,浏览器中，这是迄今为止最为普通的,JavaScript,，一般提到的,JavaScript,都是指客户端,JavaScript,4.1.6 JavaScript,和,Java,的区别,Java,是,SUN,公司推出的新一代面向对象的程序设计语言，特别适合于,Internet,应用程序开发；,Java,的前身是,Oak,语言。,JavaScript,是,Netscape,公司的产品，是为了扩展,Netscape Navigator,功能而开发的一种可以嵌入,Web,页面中的基于对象和事件驱动的解释性语言，它的前身是,Live Script,；,4.1.6 JavaScript,和,Java,的区别,JavaScript,是脚本语言，是一种基于对象（,Object Based,）和事件驱动（,Event Driver,）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。不支持继承和多态。,Java,是面向对象的，即,Java,是一种真正的面向对象的语言，即使是开发简单的程序也必须设计对象。支持封装、继承和多态。,4.1.6 JavaScript,和,Java,的区别,JavaScript,与,Java,在浏览器中执行的方式不一样。,JavaScript,是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字