2023年韩顺平html笔记_第1页
2023年韩顺平html笔记_第2页
2023年韩顺平html笔记_第3页
2023年韩顺平html笔记_第4页
2023年韩顺平html笔记_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTＭLHTＭL有关知识点htmｌ介绍ｈtml是一种标记语言，重要的用途是开发网页，使用html可以展现文字、图片、视频、声音,htmｌ是我们wｅb开发（网站开发)。hｔml可以做什么htｍl可以编写静态网页该静态网页可以涉及文字、图像、动画、声音、表格、链接。从而构成一个个美丽的网页Html发展历史19931993标记语言第一版1995html2.01996html3.2w3c推荐标准2023xhml1.1w3c推荐标准2023xhtml1.0w3c推荐标准推荐标准2023html5Html的基本结构<html><html> <head> <title>html的基本结构</title> </head> <body> </body></html><ｈtｍｌ><／htｍl＞是标记（也叫元素）,标记的一般格式:<元素名［属性=“属性值”]>元素内容＜/标签>假如没有内容可以用:<元素名[属性=“属性值”]／>Ｈtｍl实体标记Htmｌ常用标记html超链接<ａｈｒｅｆ＝””tａrget＝”＿bｌank”></a>_bｌaｎｋ新的窗口_seｌｆ本窗口_pａrent父窗口_ｔop 整个浏览器窗口htｍｌ图像元素<iｍgsrｃ＝”文献途径”wiｄtｈ＝”宽度”ｈeight＝”高度”/>html表格<ｔablebｏｒder＝”边框宽度”width＝””celｌspacing=”空隙大小”celｌpaddiｎg=”填充大小”> ﻩﻩ<tr> ﻩﻩ ﻩ--用于说明行 ﻩﻩ<ｔd></td＞ ﻩﻩﻩ-－用于说一小格 ﻩ</ｔr></ｔａble＞无序列表<ul> ﻩ<li>＜/ｌi>ﻩ <ｌi＞</li><／ｕl>有序列表<ul><li＞</ｌi>ﻩﻩ<ｌi></li>＜／ｕl>框架<fraｍｅseｔｆrameborder=”边框的大小”cｏlｓ=”按照列的比例分隔”rｏｗｓ=”按照行的比分比分隔”>ﻩ<framesrc＝””noresize/><／fraｍesｅｔ>表单元素＜ｆroｍａctiｏn=””mｅthod=”post／get”＞ﻩ 文本框：<inputtype=”textnａｍe=””／> 密码框：<inputｔyｐe＝”paｓｓwｏｒd”ｎａme=””/> ﻩ单选框:<iｎｐuttype=”radio”ｎaｍe=””> ﻩ复选框:<inpuｔtypｅ=”checkboｘ”naｍｅ＝””cheｃkｅd>chｅckｅd是指默认选中的ﻩ 隐藏域：＜inputtyｐe=”ｈｉddeｎ”ｎame=””> ﻩ图片按钮：<inputtypｅ＝”imagｅ”src＝””></ｆｒｏｍ>文本域:＜teｘtareacols=””rｏws=””>ｗrap=off自动换行ﻩ 请在这里写····<／ｔｅxｔaｒea>下拉菜单：<sｅlectnaｍe＝””size＝>size是指显示大小<opｔioｎvalｕｅ＝””>-----请选择－----－</option＞<optiｏnvaｌue=”shａｎgｈai”ｓｅlｅcteｄ>上海＜/optiｏｎ>ｓelected是指被选中<optionvaluｅ=”beｉjing”＞北京</ｏptioｎ＞<／select><metahttp－ｅqｕiv=＂conｔｅnｔ-ｔｙpｅ"conｔent="teｘt／htmｌ＂charseｔ＝"utｆ-8"／><bodｙbgcoｌor=#text=#alink=#ｖliｎk＝#>＃=rｒggbｂ;这些是16进制的，红绿蓝（ｒed-greeｎ－blue,RGB)值来表达<bodｙｔopmargｉn=0pxｌeｆtｍａrgiｎ=0px＞标尺线：＜hrｓｉze＝><aｈｒef=urlｔａrget＝”指向一个fｒame的名字”＞文字布局标记<palｉgn＝”#”></p>:表达一段#=left／ceｎｔer/right图像：＜ｉmgsrc=””aｌｔ=”提醒信息”>会移动的文字<marqueeｄiｒection=”ｌeft／right”bｅｈavior=”scroll/slide/alｔernate”lｏop＝循环的次数sｃrｏllaｍｏunt＝速度></marｑuee＞多媒体页面<embｅdsｒc=”文献途径”wｉdｔh=hｅight=></emｂed＞背景音乐：<ｂｇsrｃ＝””loｏp=””>CSＳdｉv元素是用来HTMＬ文档内大块(bｌock－lｅvel)的内容提供结构和背景元素。csｓ是CascadingStyｌeＳheeｔｓ(层叠样式表单)的缩写。它是一种用来表现HTML或XML等文献样式的计算机语言diｖ+cｓs是网站标准的(或者称为“wｅb标准”)中常用的术语之一，通常为了说明与HTML网页设计语言中的表格定位方式的区别,由于XHTML网站设计的标准中，不再使用表格定位,而是采用DＩV+CSＳ的方式定位。 我们可以这样简朴的这样理解ｄｉｖ+cｓs:ﻩdiｖ是用于存放内容（文字,图片，元素)的容器。 css是用于指定放在dｉv中的内容的样式(大小，颜色,背景，位置)。diｖ+ｃsｓ的好处是：内容和样式分离代码可以反复运用。＜ｓpanstyｌe＝”font-sｉｚe:20px；colｏr：bｌuｅ”＞＜/spａｎ>从上面使用的ｓpan元素，可以看出ｃｓs的基本格式:<元素名style=”属性名：属性值;属性名2：属性值”> 元素可以是任意元素：属性名和属性值可以参考W3Csｃhoｏl给出的文档使用ＣＳS的基本语法：使用内部ｃss:<styletype=<styletype=”text/css”>.sytle{ font-size:20px; color:red; font–weight:bold; font-style:itlic;}</style>引用内部cｓs：＜元素clａss=”style”>注意：没有.使用外部css:<liｎktype=”teｘt／ｃｓs”ｈref=”csｓ文献的途径”rel=”styleshｅｅｔ”>使用滤镜：<styletype=<styletype=”text/css”>a:linkimg{ filter:gray;}</style>四种选择器的用法：类选择器,又叫做claｓs选择器：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns=""><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>测试1</title></head><linktype="text/css"rel="stylesheet"href="1.css"/><body> <spanclass="style">新闻一</span> <spanclass="style">新闻二</span> <spanclass="style">新闻三</span> <spanclass="style">新闻四</span></body></html>/*.style/*.style是类选择器*/.style{font-size:10px;font-weight:bold;color:#FF0000;}类选择器的基本格式：.类选择器名{ﻩ属性名：属性值;ﻩ``｀}ｉd选择器:＼基本语法格式:＃id选择器名称:{ 属性名：属性值; ﻩ``｀`｝例如：＃tyle２｛ﻩfont-sizｅ:３０ｐｘ; ackgｒoｕnｄ－color:greeｎ;}在ｈｔｍl文献中使用ｉd选择器的格式是:ﻩ ﻩ ＜元素名ｉd=””>html选择器：ｈtml选择器的语法格式:htmｌ元素名称{ ﻩ 属性名：属性值；```}通配符选择器:*{ ﻩ属性名：属性值；ﻩﻩ···}例如：*{ ﻩmａrgin:0; ﻩpadding:０;}外边距：maｒｇｉｎ：上右下左;／/是按顺时针旋转的ﻩﻩ margｉn:1０px2０pｘ 3０px是代表上下外边距是10px,右外边距是20px，左 ﻩﻩ边距是30pｘ可以让所有的hｔmｌ元素的外边距和内边距都默认为0注意:当一个元素被id选择器,类选择器,html选择器修饰的时候，则优先级是: iｄ选择器>class选择器>htｍl选择器选择器进一步探讨:（四种选择器可以组合使用)父子选择器例如：#sｔyｌespan{ 属性名：属性值；}注意:eｑ＼o\ａc(○,1)子选择器标签必须是ｈｔmｌ可以辨认的标记ﻩ eｑ\o\ａc(○,2)可以有多层子选择器 ﻩ例如: ﻩ #stylespanspan{ ﻩ属性名：属性值； ﻩ｀`｀ ﻩﻩﻩ｝一个标签既可以用ｃlass选择器，也可以用id选择器；但是id的选择器的优先级高于clａss选择器一个元素最多有一个id选择器，可以拥有多个ｃlass选择器块元素和行内元素的概念：行内元素,又叫做内联元素:内联元素只能容纳文本或者内联元素,常见的内联元素有＜sｐaｎ><a>块元素（blockｅleｍent）:块元素一般都从新行开始,可以容纳文本，其他内联元素和其他块元素，即使内容不能占满遗憾,块元素也要把整行占满。常见的块元素有＜div＞<p＞注意：块元素转换为行内元素：style=”ｄiｓplａｙ:iｎｌｉｎe”ﻩﻩ行内元素转换为块内元素:ｓｔyle=”ｄiplaｙ:bloｃk”标准流／非标准流：流：在网页设计中指的是元素(标签)的排列方式标准流:元素在网页中就像流水,排在前面的元素,内容前面出现;排在后面的元素，内容就后面出现。非标准流:当某个元素(标签)脱离了标准流的【比如由于相对定位】排列，我们统称为非标准流排列。盒子模型：浮动:浮动是cｓs中很重要的概念,必须掌握。浮动分为左浮动,右浮动，清除浮动。.style{.style{background-color:#CC0066;width:150px;height:100px;border:1px;border-color:green;border-style:solid;float:left; //设立为左浮动}清除浮动：假如不希望别的元素在某个元素的左边或者是右边,可以使用清除浮动的方法:clｅar:left；cｌeaｒ:leｆt;cleａr:both;定位——基本概念:css定位(Ｐoｓiｔｉonｉｎg)属性允许你对元素进行定位。positｉon属性值：statｉｃ(默认值)：元素框正常生成。块级元素生成一个矩形框，作为文档流／标准流的一部分。行内元素则会创建一个或多个行框，置于其父元素中。reｌatiｖe(相对定位)：元素偏离某个距离。元素仍保持其未定位的形状,它本来所占的空间仍然保存,从这一角度，仿佛该元素仍然在文档流/标准流中同样<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns=""><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>测试1</title></head><linktype="text/css"rel="stylesheet"href="1.css"/><body><divclass="style">div1</div><divclass="style"id="special">div2</div><divclass="style">div3</div><divclass="style">div4</div></body></html>.style{.style{background-color:#CC0066;width:150px;height:100px;border:1px;border-color:green;border-style:solid;float:left;}#special{position:relative;top:140px;left:50px;}运营效果图：absolute(绝对定位):元素框从文档流完全删除,并相对于其包含块定位。包含块也许是文档中的另一个元素或者是初始包含块。元素原先在正常文档流所占的空间会关闭，就仿佛原理不存在同样。元素定位后生成一个块级框，而不管本来它在正常流中生成何种类型的框。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns=""><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>测试1</title></head><linktype="text/css"rel="stylesheet"href="1.css"/><body><divclass="style">div1</div><divclass="style"id="special">div2</div><divclass="style">div3</div><divclass="style">div4</div></body></html>.style{.style{background-color:#CC0066;width:150px;height:100px;border:1px;border-color:green;border-style:solid;float:left;}#special{position:relative;top:140px;left:50px;}运营效果图:ｆiｘed：元素框的表现类似于将pｏｓitiｏｎ设立成为absolute，但是其包含块是视图自身。JavaScriptｊavascｒipt基本介绍：javａｓcｒｉpt是实现网页动态效果的基石,在web的开发中扮演重要的角色,被广泛的应用到各个领域:ｅq\o\aｃ(○,１）网页游戏ｅq\o\ac(○,2)地图搜索ｅｑ\ｏ\ａｃ(○,3)股市信息查询eq\o＼ac(○,4）ｗeb聊天····在ｗeb开发中，js是必不可少的技术，同时js也是ａjａｘ/jquｅry/exｔjs等框架的基础。jaｖaｓcｒipt是一种广泛用于客户端ＷＥB开发的脚本语言,常用来给HTMＬ网页添加动态的功能，比如响应用户的各种操作。脚本语言:脚本语言往往不能独立使用(单独使用没有什么意义),它一般与htmｌ/asp／jsｐ/php脚本语言有自己的变量，函数,控制语句。脚本语言是一种解释性语言。JS一般在客户端的浏览器执行。但也可以对服务器进行编程(非常少)JavａScripｔ简介JaｖaSｃｒiｐt是一种解释型的语言。Jaｖascript并不是jaｖa的一种ｊａva脚本语言,除了名字都带有java这个此外,两者并没有任何关系。Jａvascript的第一个版本出现在NetscapｅNavigaｔor2浏览器中。人们最初给javascrｉｐt起的名字是LivｅSｃriｐt。然而由于,当时java技术的正是如日中天，netscapｅ公司给ｌiveｓcｒｉpｔ改名为ｊavａscｒiｐt，以便是人们更加注意ｊａｖascriｐｔ。随着jａvascripｔ的发展,微软公司决定在IE浏览器中加入微软的品牌的ｊavａscｒｉpt，即Jscript。脚本语言不仅只有ｊavａscriｐt的一种,尚有其他的脚本语言,如VＢscｒiｐｔ和perl语言＜scｒipt>标记：第一个简朴的javascrｉpt程序在网页中添加<script＞＜/ｓcript＞标签中添加jａvａsｃｒiｐt代码,在<ｓcriｐt＞</ｓcript>之间的代码块，不是用于显示htｍｌ元素,而是需要浏览器进行解决的脚本代码,在＜scripｔ>标记和相应的</script>标记之间包围的代码块，称为脚本块。<ｓcｒipt＞标记可以放在ｈｔml页面的头部，即<hｅａd＞<／heａd>之间。<ｓcｒipt>标记具有一些属性,其中最重要的属性就是type属性。前面提到了javascｒiｐt并不是唯一可用的脚本语言,可以的脚本语言需要按不同的方式进行解决。我们需要浏览器，在当前的页面中我们所使用的是何种脚本语言。<ｓcripttｙｐe=”text／jａvａscrｉpt”><html><html><head> <title></title></head><bodybgcolor="white"><scripttype="text/javascript">document.bgColor="red";</script></body></html><html><html><head> <title>Example1.1helloworld</title><scripttype="text/javascript"> document.write("helloworld");</script></head><noscript> 您的浏览器不支持javascript，请检查浏览器的版本或者安全设立，谢谢</noscript><bodybgcolor></body></html>＊******＊**＊＊*＊**＊*＊*＊****＊*******＊******＊****＊*＊**＊******＊***＊*＊**＊******＊*******＊*＊****<noｓcript><／nosｃriｐt>是一种防御性编码，假如用户的浏览器不支持ｊaｖaｓcripｔ或者是设立过高的安全级别,那么就会显示出相应的提醒洗洗，避免了在用户不知情下停止运营或者的都错误结果。***＊＊＊***＊＊*＊＊＊*******＊**＊*******＊**＊***********＊********＊*＊*＊*＊*＊*****＊＊＊＊*＊＊*在javａｓcrｉpt中用分号表达一个语句的结束Jａvascript是弱类型语言。什么叫做弱类型语言。在强类型语言中，使用变量之前,必须先声明变量的类型,才干使用。而javaｓcｒipt则不需要这样使用。案例１:你的第一个程序，ｊaｖasｃrｉpt高手都是从这里开始的,这个程序完毕一个非常简朴功能,在网页中弹出一个对话框,显示“helloworlｄ！”<html><html><head><title>第一个javascript程序</title><scriptlanguage="javascript"> window.alert("helloworld");</script></head><body></body></html>ｊs的位置:jｓ的位置可以随意,但是一般用在＜hｅａd>＜/ｈeａd>标签ｊs必须用<sｃrｉptｌaｎｇuａge=”ｊａvasｃriｐｔ”＞ﻩ ﻩjs代码</script＞☞假如没有使用<ｓcriｐｔ></script>包含起来的话，则浏览器则会视为普通文本案例2：对前面的程序，改成一个简朴加法运算程序<html><html><head><title>第一个javascript程序</title> /*js中的变量定义，变量都用var表达，不管实际类型如何*/ varnum1=456; varnum2=226; varresult=num1+num2; window.alert("结果是"+result);</head><body></body></html>jｓ的变量的类型是如何决定?jｓ的数据类型是弱数据类型语言。即在定义变量的时候，统一使用vａr表达，甚至可以去掉var关键字ｊs中的数据类型是有js引擎来决定的。数据类型可以变化的。vaｒｎame=”shopｐｉnｇ”;ﻩ//js引擎知道nａmｅ是字符串ﻩｎame=22; //这时nａme自动变成了数varｋｋ＝2；ﻩﻩ ／／ｋk是整数ｖaryy;ﻩﻩﻩ／/y是uｎdefined类型javａscript中的标记符标记符指的是ｊavaｓcrｉｐｔ中定义的符号,例如，变量名，函数名,数组名等。标记符可以有任意顺序的大小小字母、数字，下划线和美元符号($）组成,但是标记符不能以数字开头,不能是jａｖascript的保存关键字。ｊavascｒｉpｔ是严格区分大小写的。ｊaｖascriｐt中每条语句用分号“;”结束。注释：单行注释//多行注释/＊*／jaｖａscrｉpｔ的基本语法---数据类型:基本数据类型：ﻩ通过typｅｏf关键字,可以看到数据的类型Ｎumber（数值类型)整型常量(１0进制\８进制\１6进制）１６进制以0x或者是0X开头，例如：0ｘ83;8进制必须以0开头：实型常量 12.32193.９85E７等特殊数值：ＮａN（notisanumber）、Infinｉty、isNaN()、isＦiｎite()Boolean(布尔类型) tｒue和falseStriｎg字符串ﻩ “tｈiｓisａbooｋ”复合数据类型：特殊数据类型：undefinｅ的例子：<sｃriptｌａnguaｇｅ="jａｖasｃrｉpt＂> varａ;ﻩwinｄow.aｌeｒt（"a的数据类型"+ｔypｅofa);</sｃript>ｎull的例子:＜scriptｌanguaｇe＝＂javascrｉpt"> vara=nｕlｌ； wｉndow．alｅrt(＂ａ的数据类型"+typｅｏfa）;＜/script＞ｊａvａｓcripｔ的基本语法--－定义变量、初始化、赋值：定义变量：vara;初始化变量:在定义变量的时候,就赋值：varａ=45;给变量赋值：先定义变量:ｖarｎum;ﻩ再赋值:ﻩnum＝33javａｓcriｐt的基本语法---数据类型转换:自动转换:jａｖascript的数据类型是动态的请看一个案例：<ｓｃｒiptlanguage="javasｃrｉpt"＞ ﻩ/／num先定义成Number数据类型 ﻩvａrnum=22; ﻩnum="ｈelloｗorｄ";ﻩ window.alerｔ（＂num的数据类型"+typeofnｕｍ）； </scｒipt>强制转换：请看案例:如何将字符串转换成数字＜ｓｃriｐtlaｎguaｇe="jaｖasｃript"＞ ﻩ//num先定义成String数据类型 ﻩｖars="123";ﻩ vaｒnｕm=ｐａrseＩnt(s);ﻩﻩｗｉndow.alerｔ(tyｐｅｏｆnuｍ）; ﻩ</scrｉｐｔ>javaｓｃｒiｐt中的运算符和jａva中的同样的,但是有几个注意点：案例一:b先转成９,在比较<scriptlanguage=”ｊaｖaｓｃript”> ﻩvara=９；ﻩﻩvarｂ=’9’ if(a==b){ window.alerｔ(“ｏｋ”);ﻩﻩ｝elｓe{ ﻩﻩｗindow.alerｔ（“faｉlｅ”); ｝＜/scriｐｔ>在逻辑运算中,0、“”、fａlse、ｎull、unｄefｉnｅd、ＮａＮ均表达falｓe<scｒiptlanｇuａge=”jaｖascript”>ﻩﻩvaｒa=0;ﻩ ｉf（a){ ﻩ window．alｅrt(“ｏk”）;ﻩ }ｅlse｛ ﻩﻩｗiｎdow.ａlｅrt(“faile”）; ｝</ｓcript>函数：为完毕某一个功能的代码的集合。函数定义:functionfunction函数名(参数列表){ 语句;//函数(方法)主体 return返回值; }函数名位于关键字fuｎctioｎ之后,为了让代码易于理解，函数名应具有一定的意义。注意点：函数没有返回值类型。形参数不写具体的类型。ｅval（)可以将一个字符串当成一个脚本运营例如：＜scriptlangｕage=”javａscriｐt”type=”text/jａvasｃｒｉｐｔ”> ﻩvaｒstr=”ｗｉndow．aｌｅrｔ（“ok”)”; eｖａl(str)；＜/ｓcripｔ>esｃａｐe(）可以将中文或日文转为asｃii码：unescaｐe()反之。一般这个函数互相配合，防止在浏览器中出现乱码：<ｓcriptlａngｕagｅ=”jaｖascｒipt”type=”text／javascrｉpt”＞ ﻩvarｓtr＝”江西”； ﻩvａrstr２＝esｃａｐe(sｔr); ／／转回来ﻩﻩvａrstr３=unescape(ｓtr２);<／ｓcripｔ>数组：为什么需要数组？将一组数据放在一起,组成集合。它由一对方括号［］包围,数组的每个元素用逗号分隔，数组元素可以是任意类型的数据创建数组：vａr数组名＝[元素值，元素值,｀`｀]例如：ｖaｒａ＝[“shoｐｐinｇ”，1２3,1．１，4．5,ｔrｕe]二维数组：ｖａra=[[1,2,3],[“hｅｌlo”,”ｗｏrｌd”,”jianｇxi”]]=====＝===＝=====＝======＝===＝＝＝====＝＝＝＝======＝============＝============＝=＝＝=====＝==＝＝==＝=========＝==＝===＝＝==＝=＝=＝=＝=＝=======＝====＝=＝===＝＝=======＝==＝======＝=＝=====＝==＝======＝========＝＝＝==＝====＝＝＝==＝＝====＝====＝==========＝======＝==＝======＝===JS面向(基于)对象编程-----类（原型对象)与对象(实例）ＪS面向(基于）对象特性介绍在学习这个知识点之前,我们有必要给大家明确几个概念,这样大家在后续的学习中才不会犯晕：Ｊaｖａscripｔ是一种基于对象(oｂject-baseｄ）的语言，你碰到的所有东西机会都是对象☞特别说明:基于对象也好，面向对象也好,事实上都是以对象的概念来编写程序。从本质上并无区别，所以这两个概念在课程中是同样的。由于javaｓcript中没有cｌａss（类）,所以有人把类也称为原型对象。由于这两个概念在编程中发挥的作用看都市一个意思总结:JS中基于对象=JS面向对象 ＪＳ中没有类的概念，按标准的说法原型对象。其实就是类为什么需要原型对象（类）?例子:张老太养了两只猫猫：一只猫叫小白，今年３岁，白色；尚有一只叫小花,今年5岁,花色。请编写一个程序,当用户输入小猫的名字时,就显示该猫的名字，年龄，颜色。假如用户输入的小猫名字错误，则显示张老太没有这只猫。 // //一般的解决方法是，但是这种方法比较麻烦 varcat1_name="小白"; varcat1_age=3; varcat1_color="白色"; //定义原型对象,也就是类 functionCat(){ } //假如这样用，就成了函数 //Cat(); //创建cat1的一个对象（实例） varcat1=newCat(); //可以在后面添加对象的属性 ="小白"; cat1.age=3; cat1.color="白色"; window.alert();类(原型对象)————如何自定义类（原型对象）和对象。创建类的方式有５中方法:工厂方法——使用newObject创建对象并添加相关属性使用构造函数来定义类（原型对象）注意：上面的cａｔ类就是用此种方法基本语法：ﻩﻩ function类名/原型对象名(){ﻩﻩﻩ }ﻩﻩ创建对象： ﻩvａr对象名=nｅw类名();例子：ﻩfunctionCat(){functionCat(){ } //假如这样用，就成了函数 //Cat(); //创建cat1的一个对象（实例） varcat1=newCat(); //可以在后面添加对象的属性 ="小白"; cat1.age=3; cat1.color="白色"; window.alert(); window.alert(cat1.constructor); //可以打印出实例对象的构造方法 window.alert(typeofcat1); //显示cat1的类型使用pｒototｙpe构造函数及原型混合方式动态原型方式ﻩ 注意:ＪS中的一切都是对象。 ﻩ如何判断一个对象实例是不是Persｏn类型? if(ainｓｔａnｃeofPｅrson)｛ﻩﻩﻩwinｄow.alert(“a是person的实例”)ﻩﻩ } ﻩ if（a．constructoｒ＝=Persoｎ)｛ﻩ ﻩwiｎdow.ａlｅrt(“a是ｐeｒsoｎ的实例”) ﻩ }带ｖar和不带vａｒ的区别:ﻩﻩﻩｖａrabc=89; ﻩﻩfuncｔioｎtest()｛ﻩ ﻩﻩ//在函数里,假如你不带ｖar，则表达使用全局的abc变量。 ﻩﻩﻩ//假如你带上vａr，则表达在test（)中，定义一个新的abc变量ﻩﻩﻩ ａbc=90０；ﻩ }ﻩ test()；ﻩ wｉｎdoｗ．alert(aｂc);this问题的提出:fｕｎcｔionPｅrsｏn(){}varp1=nｅwPerson();ｐ1.ｎamｅ=”小明”；p１.age=２2；ｗindow.aｌeｒt（p1.naｍe＋””＋ｐ１.agｅ）;varp2=nｅwＰerｓon(）;wiｎdow.ａlｅrt(ｐ2．naｍe）;在这里我们可以看到wｉｎｄow.ａleｒt(p2．

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论