韩顺平html+css+js之JS笔记
最新韩顺平__jsp和selverlt原完整版课件_笔记_.doc
最新韩顺平__jsp和selverlt原完整版课件_笔记_.doc◆背景知识介绍J2EE的13种技术java->servlet->jsp [技术总是有⼀个演变过程]zip粘贴到word设置◆回顾⼀下我们现有的技术java 基础(⾯向对象,集合,界⾯,线程,⽂件,⽹络)jdbc (java 的数据库编程)oracle / mysql / sqlserverhtml css javascript (web 开发) ->⽹页设计xmlserlvet+jsp ->java web开发[使⽤java技术做web开发]◆java ee 体系的介绍◆servlet项⽬演⽰◆web 开发介绍①静态页⾯(html)②动态页⾯1.⽤户可以输⼊数据，和页⾯交互(注册,购物,发帖⼦,付款...)2.不同时间打开页⾯，内容是变化.3.⽬前⽐较流⾏的左动态页⾯的技术( servlet/jsp , php , /doc/b83fffd680eb6294dd886c36.html , asp, cgi )◆动态⽹页技术的⽐较(了解)◆bs 和cs的⽐较（1）BS：browser server 浏览器服务器（2）cs client server 客户服务为什么需要的web服务器/web究竟是⼲什么的?模拟⼀个web服务器MyWebServer.javaimport java.io.*;import /doc/b83fffd680eb6294dd886c36.html .*;public class MyWebServer{public static void main(String []args) throws Exception{ServerSocket ss=new ServerSocket(80);Socket s=ss.accept();//提⽰⼀句话System.out.println("在9999 上等待连接...");OutputStream os=s.getOutputStream();BufferedReader br=new BufferedReader(new FileReader("d:\\hello.html"));String buf="";while((buf=br.readLine())!=null){os.write(buf.getBytes());}//关闭流br.close();os.close();s.close();}}◆通过tomcat来讲解BS结构◆安装tomcat服务器(1)解压即可(2)配置①在环境变量中添加JA V A_HOME= 指向你的jdk的主⽬录（并不是bin⽂件⽬录）②在不配置JA V AHOME的前提下启动tomcat 在startup.bat的第25⾏中添加set JA V A_HOME=JKD路劲(3)启动tomcat服务器到tomcat 主⽬录下bin/startup.bat(4)验证是否安装成功http://localhost:8080（8080是默认端⼝如果该端⼝已经被占⽤需要修改端⼝）◆tomcat安装后问题解决（1）tomcat⽆法正常启动的原因分析1.JA V A_HOME 配置错误，或者没有配置2.如果你的机器已经占有了8080 端⼝，则⽆法启动，解决⽅法(1) 你可以8080 先关闭netstat –annetstat –anb 来查看谁占⽤该8080(2) 主动改变tomcat的端⼝.到conf/server.xml ⽂件中修改server.xml的端⼝号）protocol="org.apache.coyote.http11.Http11NioProtocol" redirectPort="8443"/>(3) 能够正常启动，但是会导航到另外⼀个页⾯.去修改⼯具->管理加载项，把默认的导航给禁⽤即可.(4) 在访问tomcat时候，⼀定保证tomcat 服务器是启动◆tomcat的⽬录结构⽂件bin: 启动和关闭tomcat的bat⽂件conf: 配置⽂件-->server.xml: 该⽂件⽤于配置和server 相关的信息, ⽐如tomcat启动端⼝后,配置Host, 配置Context 即web应⽤-->web.xml : 该⽂件配置与web应⽤(web应⽤就相当于是⼀个web站点)-->tomcat-users.xml: 该⽂件⽤户配置tomcat 的⽤户密码和权限lib⽬录: 该⽬录放置运⾏tomcat 运⾏需要的jar包logs⽬录：存放⽇志, 当我们需要去查看⽇志的时候，很有⽤!,当我们启动tomcat错误时候，可以查询信息.webapps⽬录: 该⽬录下，放置我们的web应⽤(web 站点), ⽐如:建⽴web1 ⽬录下⾯放置我们的html ⽂件jsp ⽂件..图⽚... 则web1就被当做⼀个web应⽤管理起来(?特别说明tomcat 6.0 以后⽀持tomcat 5 版本还有别的设置)work: ⼯作⽬录: 该⽬录⽤于存放jsp被访问后⽣成的对应的server⽂件和.class⽂件如何去访问⼀个web 应⽤的某个⽂件◆⾸页⾯设置及⽬录规范结构现在我们要求：把hello.html⽂件设置成该web应⽤的⾸页，则需要把web应⽤的⽬录格式做的更加规范:①在web⽂件夹下配置WEB-INF⽂件夹②在web.xml ⽂件中添加配置的代码:hello1.html③通过http://localhost:8088/web1来访问hello1.htmlweb-inf⽬录下的classes⽬录将来是存放class⽂件lib ⽬录将来时存放jar⽂件web.xml 配置当前这个web应⽤的信息.◆tomcat如何去管理虚拟⽬录需求: 当我们把web 应⽤放到webapps⽬录，tomcat会⾃动管理，如果我们希望tomcat 可以管理其它⽬录下的web应⽤?->虚拟⽬录配置我在d 盘有⼀个web应⽤.◆虚拟⽬录配置步骤：①找到server.xml⽂件②编辑host节点添加Context path在server.xml中添加：myweb2：是访问时输⼊的web名,实际取出的是web2中的资源"d:\web2"：绝对路径下web2中存放资源如：hello2.html实际访问时输⼊的地址：http://localhost:8088/myweb2/hello2.html绝对路径：从根分区找某个⽂件相对路径：从该⽂件位置去找另⼀个⽂件③需要重启tomcat，才能⽣效.（因为是采⽤的dom技术讲信息加载到内存中）◆context 的⼏个属性的说明path:docbase:reloadable;如果设为ture ，表⽰tomcat 会⾃动更新web应⽤，这个开销⼤，建议在开发过程中，可以设为true, 但是⼀旦真的发布了，则应当设为false;upackW AR: 如果设为ture ，则⾃动解压，否则不⾃动解压.①：打war包cd:d/web2 然后jar –cvf web2.war *②：浏览打好的war包Deploy发布后会在webapps中⾃动⽣存改⽂件◆配置域名我们看和⼀个如何配置⾃⼰的主机名:我们在实际访问⽹站的过程中，不可能使⽤http://localhost:8080/web应⽤/资源名的⽅式去访问⽹站，实际上使⽤类似/doc/b83fffd680eb6294dd886c36.html 或者/doc/b83fffd680eb6294dd886c36.html 的⽅式去访问⽹站，这个⼜是怎么实现的呢?看看ie浏览器访问⼀个web站点的流程.实现的步骤如下:(1) 在C:\WINDOWS\system32\drivers\etc 下的host⽂件添加127.0.0.1/doc/b83fffd680eb6294dd886c36.html(2) 在tomcat 的server.xml⽂件添加主机名(3) 在d:\web3 加⼊了⼀个/WEB-INF/web.xml 把hello2.html设为⾸页⾯如果连端⼝都不希望带，则可以吧tomcat的启动端⼝设为80即可.(4) 重启⽣效◆tomcat体系的再说明图:如何配置默认主机:在tomcat/conf/server.xml ⽂件◆为什么需要servlet技术?⽐如需求：我们希望⽤户可以贴，⽤户还可以回复....这样⼀些和⽤户可以交互的功能，⽤普通的java技术就完成不了, sun 就开发了servlet技术供程序员使⽤.◆servlet的介绍①servlet 其实就是java程序(java类)②该java 程序(java 类)要遵循servlet开发规范③serlvet是运⾏在服务端④serlvet 功能强⼤,⼏乎可以完成⽹站的所有功能⑤是学习jsp基础◆tomcat 和servlet 在⽹络中的位置servlet的⽣命周期是怎样的/servlet究竟是怎样⼯作的UML 时序图帮助⼤家理解参看execel⾯试题: 请简述servlet的⽣命周期(⼯作流程)答:标准版本：①WEB服务器⾸先会检查是否已经装载并创建了该servlet实例对象。
韩顺平-javascript面向对象(基于对象)笔记汇总
Js面向（基于）对象编程js中基于对象== js面向对象js中没有类class,但是它取了一个新的名字叫原型对象，因此，类==原型对象问题提出：/*张老太养了两只猫：一只名字叫小白，今年3岁，白色，还有一只叫小花，今年10岁，花色。
请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄，颜色。
如果用户输入小猫的名字错误时，则显示张老太没有这只猫猫。
*///传统方法比较麻烦cat1_name="小白";var cat1_age=3;var cat1_color="白色";//(原型对象/类//用面向对象的方法来解决上面的问题//这里就是一个类cat类function cat({}//如果这样用//cat(//函数var cat1 = new cat(//类//这时cat1就是一个对象(实例="小白";cat1.age=3;cat1.color="白色";//从上面的代码我们可以看出//1.js中的对象的属性可以动态添加//2.属性没有限制window.alert(+cat1.age+cat1.color+cat.hobby;(1 类是抽象的,概念,代表类事物(2 对象是具体的,体表一个实体(3 对象是以类(原型对象为模板创建起来的实体(1 工厂方法—使用new Object创建对象并添加相关属性.(2 使用构造函数来定义类(原型对象.(3 使用prototype(4 构造函数及原型混合方式.(5 动态原型方式.目前我们先讲使用构造函数来定义类(原型对象,基本语法:function 类名/原型对象({}创建对象:var 对象名= new 类名(现在对对象特别说明:1. js 中一切都是对象function Person({}window.alert(Person.constructor;var a = new Person(;window.alert(a.constructor;//a 对象实例的构造函数window.alert(typeof a;//a 的类型是什么var b=123;window.alert(b.constructor;window.alert(typeof b;var c="123";window.alert(c.constructor;window.alert(typeof c;//思考:如何判断一个对象实例是不是Person类型?if(a instanceof Person{window.alert("a 是 Person1";}if(a.constructor==Person{window.alert("a 是 Person2";}//全局变量var abc=89;function test({//在函数里,如果不带var,则表示使用全局的abc变量//如果带var,则表示在test(中,定义了一个新的abc变量(局部变量abc=900;}test(;window.alert(abc;访问对象的属性有两种方法:对象名.属性名对象名function person({}var p1= new person(;="阿华";window.alert(;//普通方式window.alert(p1["name"];var val="na"+"me";window.alert(p1[val];//动态方式对象引用问题的说明(图js还提供一种方式,主动释放对象内存delete 对象名.属性、;//这样就会立即释放对象的这个属性的空间在实际编程中,我们可能有这样的需求,当我们创建一个对象后,就希望该对象自动的拥有某些属性,就希望该对象自动拥有,◇使用◇可能有人会这样去思考问题,只能在内部使用,只能在内部使用,只能在类内部使用,,}var p1=new Person(;p1.show(;//p1.show2(;//这里会报错//window.alert(+" "+p1.age;//错误的哪个对象实例调用this所有的函数,那么this就代表哪个对象实例This不能放在类的外部使用,否则调用就变成window调用了◇对象---成员函数给一个对象添加(指定函数的几种方式function Person({="abc";this.age=30;this.show=function ({window.alert("name:"++" "+"age:"+this.age;}}var p1 = new Person(;p1.show(;function Person({="abc";this.age=30;function show1({window.alert("name:"++" "+"age:"+this.age;}window.alert(show1;//这个解释下面的p2.show=show2的疑惑.这个输出的是上面//的函数代码.(构造函数var p2 = new Person(;p2.show=show1;//记住不要加括号p2.show(;function Person({="abc";this.age=30;}var p3 = new Person(;p3.show=function show2({window.alert("name:"++" "+"age:"+this.age;}p3.show(;加强思考题看它们会输出什么?题1.function Person({="abc";this.age=30;}function show1({window.alert("name:"+;}var p2 = new Person(;p2.show=show1;show1(;//注意思考会输出什么?提示谁调用它.this就代表谁答案:name:空白(undefined题2.function Person({="abc";this.age=30;}Var name="abc2";function show1({window.alert("name:"+;}var p2 = new Person(;p2.show=show1;show1(;答案:nane:abc2前几种方法有一个问题，那就是以上对象独占函数代码，这样如果对象过多，则会影响效率，js设计者，给我们提供了别一个方法，原型法：这样多个对象可以共享函数代码，代码如下：function dog({}//使用prototype去绑定一个函数给shoutdog.prototype.shout=function({window.alert('小狗';}var dog1=new dog(;dog1.shout(;var dog2 = new dog(;dog2.shout(;//okwindow.alert(dog1.shout==dog2.shout;//返回true//扩展var dog3 = new dog(;var dog4 = new dog(;var dog5 = dog4;window.alert(dog3==dog4;// false 不是同一个地址window.alert(dog4==dog5;// true对代码原理说明图：补讲 ==号的作用1. 当 == 的两边都是字符串的时候，则比较内容相等否。
html,css,javascript笔记
Html，css，javascripr笔记一、html基础1、什么是html?hypertext markup language(超文本标记语言)。
是一种用于编写网页的标记语言，由浏览器解释执行。
2、特点a,使用html标记编写的文件必须以.html或者.htm为后缀。
b,大小写不敏感。
c,容错性好。
3、html的发展历史a,90年Tim berners-lee(web之父)b,97年html4.0版4、主要的浏览器ie,firefox,chrome,safari,opera5、html文件的基本结构<html><head><!--与显示的内容无关的一些标记--><title>标题</title><!--模拟消息头--><meta http-equiv=""content=""><!--引入一个样式文件--><link rel=""type=""href=""><!--引入脚本文件--><script src="myjs.js"></script></head><body><!--与显示的内容相关的一些标记--></body></html>http-equiv属性:模拟http消息头(所谓消息头，是由w3c定义的一些关键字，浏览器与服务器都会遵守)。
content属性:消息头的属性值。
常见的两个消息头:<meta http-equiv="content-type"content="text/html;charset=gbk">模拟生成一个content-type消息头，告诉浏览器，返回的数据是html，编码是gbk。
韩顺平div+css笔记(全)
div+css详解◆ div+css的介绍div是用于存放html元素，文字，图片，视频的元素css 是层叠样式表，用于指定div中的内容的样式原理图：div+css的快速体验案例：test.html：<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN"><html><head><title>div+css入门案例</title><link href="my.css" type="text/css" rel="stylesheet"/> </head><body><div class="style1"><table><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr > <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> </table></div></body></html>my.css中指定：.style1{width:300px;height:200px;border:1px solid red;margin:100px 0px 0px 200px;}.style1 table{border:1px solid black;width:298px;height:190px;}.style1 table td{border: 1px solid black;text-align:center;}<span style="font-size:30px;color: blue;">栏目一</span><br/> 从使用span元素我们可以看到，css的基本语法<元素名 style=”属性名：属性值；属性名：属性值2；”/> 元素可以是html的任意元素：属性名：属性值要参考 w3c组织给出的参考文档◆使用css可以统一网站的风格css分类：外部css 内部css<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>css1.html</title><meta http-equiv="keywords" content="杨萌,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css">.style1{}</style> font-size: 20px; color:red; font-weight: bold; font-style: italic;</head><body><span class="style1">栏目一</span><br/> <spanclass="style1">栏目二</span><br/> <span class="style1">栏目三</span><br/> <span class="style1">栏目二</span><br/> <span class="style1">栏目三</span><br/> </body></html>使用滤镜<style type="text/css">/*使用滤镜将图片变成黑白色*/img {}</style>/*使用滤镜*/a:link img { filter:gray;} filter:gray; a:hover img{ } filter:"";</style><!--<link rel="stylesheet" type="text/css"href="./styles.css">--></head><body><a href="#"><img src="images/1.jpg" width=170pxborder=1/></a> <a href="#"><img src="images/2.jpg" width=170px border=1/></a> <a href="#"><img src="images/3.jpg" width=170px border=1/></a> <a href="#"><img src="images/4.jpg" width=170px border=1/></a> <a href="#"><img src="images/5.jpg" width=170px border=1/></a> <a href="#"><img src="images/6.jpg" width=170px border=1/></a> <a href="#"><img src="images/7.jpg" width=170px border=1/></a> </body>1．类选择器的基本语法:.类选择器名{属性名:属性值;…}.style1{font-weight: bold;font-size: 20px;background-color: pink;}<link rel="stylesheet" href="my.css" type="text/css"></link> </head><body><span class="style1">新闻一</span><span class="style1">新闻二</span><span class="style1">新闻三</span><span class="style1">新闻四</span><span class="style1">新闻五</span></body>2．id选择器基本语法：#id选择器名{属性名：属性值；}案例：#style2{font-size: 30px;background-color: skyblue;}在html文件中如果要引用id选择器，则<元素 id=‘id选择器的名称’></元素><span id="style2">这是一则重要的新闻</span>3．Html选择器 /*html选择器body(button,input,form...)*/ body{color:silver;}结论：当一个元素同时被id选择器类选择器 html选择器修饰时，优先级为： id选择器>类选择器>html选择器>通配符选择器<span class="style1" id="style2">这是一则重要的新闻</span> 案例：假设，我们希望所有的超链接（1）默认样式是黑色，24px，没有下划线（2）当鼠标移动到超链接时，自动出现下划线（3）点击后，超链接变成红色。
传智 韩顺平 html+css+javascrtpt 课程笔记3(吐血整理)
javascript 3=============================================================================== 1.Dom（文档对象模型）编程简介DOM = Document Object Model(文档对象模型)，根据W3C的DOM规范，DOM是HTML 与XML的应用编程接口（API），它将整个页面映射为一个由层次节点组成的文件。
编程人员通过访问dom 对象，就可以实现对浏览器本身、网页文档、网页文档中元素的操作，从而控制浏览器和网页元素的行为和外观。
2.html dom层次图dom编程的核心是各个dom 对象。
HTML DOM定义了访问和操作HTML文档的标准方法。
HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构(节点树)，每个节点是一个HTML DOM内置对象。
3.BOM（浏览器对象模型）介绍通过使用BOM，可移动窗口、更改状态栏文本。
bom 是w3c 组织提出的，他建议所有的浏览器都应当遵循这样的设计规范。
可以说bom 和dom 关系密切, 相互影响，bom 为纲，dom为目，我们可以简单的理解，dom 是bom 中document的具体实现。
要求浏览器必须支持4.常用dom对象window对象window 对象表示一个浏览器窗口或一个框架。
在客户端JavaScript中，Window 对象是全局对象，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来用。
注：在使用window对象的方法和属性的时候，可以不带window，如下window.alert(“韩顺平!”)等价于：alert(“韩顺平”)。
常用方法和属性：✧alert() 显示消息和一个确认按钮的警告框✧confirm() 显示消息以及确认按钮和取消按钮的对话框✧setInterval() 按照指定的周期(毫秒计)来循环调用函数或计算表达式✧clearInterval() 取消由setInterval()设置的定时器✧setTimeout() 指定的毫秒数后调用一次函数或计算表达式✧clearTimeout() 取消由setTimeout()设置的定时器✧moveTo() 把窗口的左上角移动到一个指定的坐标✧moveBy() 可相对窗口的当前坐标把它移动指定的像素✧resizeBy() 按照指定的像素调整窗口的大小✧resizeTo() 把窗口的大小调整到指定的宽度和高度✧open() 打开一个新的浏览器窗口或查找一个已命名的窗口✧close() 关闭窗口✧closed 返回窗口是否已被关闭✧status 设置窗口状态栏的文本✧opener 返回对创建此窗口的窗口的引用✧onload 页面装载✧onunload 关闭窗口案例：一个js版用户登录系统，当用户输入顺平密码是123，就跳到第二个页面，5秒后，自动跳转到第三个页面。
韩顺平jsp学习笔记
韩顺平jsp学习笔记jspu j2ee核心13种技术：程序员必须掌握的技术：java，servlet，jsp。
13种技术规范.u j2ee程序员修炼成精法门u jsp 版本的用户管理系统：将servlet版本改为jsp版本，只使用jsp技术完成（modle1模式开发）并且在后面可通过jsp版的用户管理系统的改写，非常自然过渡到mv设计模式，更进一步到mvc设计模式开发工具：myeclipseu jsp概述:jsp是servlet技术的补充，访问jsp的过程：如果是第一次访问，jsp文件被服务器翻译成一个对应的java文件(servlet)，然后，再被编译成.class文件并加载到内存中。
如果是以后访问jsp，那就直接调用内存中的jsp实例，所以，第一次访问jsp慢，后面访问jsp的速度就会变快了。
（hello.jsp来说明运行原理：tomcat下的work下有将jsp转换为servlet的代码）1. 为什么出现：程序员在开发过程中，发现servlet做界面非常不好,jsp对servlet的补充（对界面的补充，jsp界面好做）2. jsp=html+java片段+jsp标签（语法）+javascript（css）:综合3. jsp功能的强大是因为可以与javabean结合使用(即：jsp作前台(界面)，javabean作后台(逻辑层))。
4. Jsp是什么：1.jsp运行在服务器，2.jsp（java server page）3。
Jsp基础是servlet（相当于对servlet的包装）4.jsp 是综合技术：一个公式：jsp=html+java代码+jsp标签+javascript(css) 比较综合5.jsp无需配置，直接使用，如果你修改了jsp文件，不需要重新reloadweb应用6.jsp如何访问：http://ip:8088/web应用名.jsp路径u jsp的概述：元素1. 指令元素2. 脚本元素3. 动作元素u jsp与servlet的关系：1. jsp与servlet是对应关系2. jsp是以servlet为基础的u 编写一个计算器的实例:1. 表单提交处理的jsp页面为：<form action=”chuli.jsp”>2. 接受用户传来的数据的函数为request函数，方法为getParameter(“name”),返回类型为String3. 对于jsp页面报错的行数为tomcat中work里的对应的java代码中的错误行数4. jsp可以通过javascript代码，对数据合法性进行验证，防止用户空提交5. 可以通过Math.round(num) != num判断一个变量是否是一个数，当经过math.round处理后不相等，则num不是一个数u 在同一jsp页面提交和接受数据1.jsp中表达式标签：<%= %>u 迅速上手myeclipse工具-----》完成一个小案例：建立一个web工程（站点），创建一个jsp文件myHello.jsp，文件输出hello，配置tomcat，jdk，并发布工程（将站点放在tomcat 上），在浏览器中访问myHello.jspu Model1模式1. javaee开发有几个重要模式：Model1模式，Model2模式，mvc模式2. model1模式基础是jsp文件，由一些相互独立的jsp 文件，和其他的一些java class组成（不是必须的），jsp从httprequest中获得所需要数据，处理业务逻辑，然后通过response返回前段浏览器3. model1模式可分为model1（纯jsp）和model1（jsp+java class）4. model1缺点：表现层和业务逻辑层混合在一起（乱）；开发中不利于多人开发协同；不利于后期维护，不好查看。
css和js韩顺平学习笔记
1,Web标准的组成：结构，表现和行为；结构标准对应的主要语言是XHTML表现标准对应的主要语言是CSS行为标准对应的主要语言是javascript制作成一个静态页面，主要用到的就是xhtml和css，所以制作标准页面的技术就是xhtml+css;2,css定义的技巧：1，为了将来的css代码优化，建议所有的属性值后面都要带上";";2,某些xhtml标签，有自己默认的css属性值；例如，h1标签就有自己默认的属性值。
3，为了兼容主流的浏览器，或者为了统一效果，建议我们在设置时，将所有元素的css属性，重置为一个标准的；4，不同的浏览器，有各自不同的css属性值---就是浏览器的兼容性5，css可以重新设置html标签的默认设置；3，CSS应用给网页的方法：1，内联式样式表：直接写在现有的标记中，如<p style="color:red">这里文字是红色的</p>2, 嵌入式样式表：使用<style></style>标签嵌入到HTML文件的<head>标签中。
如：<style type="text/css">body {background:white;color:black;}</style>3，外部链接式样式表：将样式表写在一个独立的.css文件中，然后在页面<head></head>标签内使用<link>标签调用它，主要用于实现表现与结构的分离，如：<link href = "main.css" rel="stylesheet" type="text/css"/>4, 导入式样式表[用的较少]：导入式样式表与链接式样式表的功能基本相同，只是语法与动作方式略有不同，同样也将导入样式代码写在<head></head>标记内。
传智 韩顺平 html+css+javascrtpt 课程笔记2(吐血整理)
javascript 2===============================================================================1.js面向/基于对象编程-----类（原型对象）与对象（实例）(1)js面向/基于对象特征介绍Javascript是一种基于对象（object-based）的动态脚本语言，你遇到的所有东西都是对象。
js的面向对象技术广泛应用于AJAX等优秀框架。
☞特别说明：基于对象也好，面向对象也好，实际上都是以对象的概念来编写程序。
从本质上并无区别，所以这两个概念在课程中是一样的。
因为javascript中没有class(类)，所以有人把类也称为原型对象。
其实这两个概念在编程中发挥的作用都看成一个意思。
(2)为什么需要原型对象（类）？例子：张老太养了两只猫猫：一只猫叫小白，今年3岁，白色；还有一只叫小花，今年5岁，花色。
(3)类（原型对象）————如何自定义类（原型对象）和对象创建类的方式有5中方法：工厂方法——使用new Object创建对象并添加相关属性使用构造函数来定义类（原型对象）：上面的Cat类就是用此种方法基本语法：function 类名/原型对象名(){}创建对象：var 对象名=new 类名/原型对象名();使用prototype构造函数及原型混合方式动态原型方式2.如何判断一个对象实例是不是Cat类型？✧if(a instanceof Cat){window.alert(“a是Cat的实例”)}✧if(a.constructor== Cat){window.alert(“a是Cat的实例”)}3.带var和不带var的区别var abc=89;function test(){abc=900;//在函数里，如果不带var，则表示使用全局的abc变量89。
//如果带var，则表示在函数中，定义一个新的私有的abc变量。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
韩顺平html+css+js之JS笔记Javascript的基本介绍∙JS是用于WEB开发的脚本语言：∙脚本语言是什么：∙脚本语言不能独立使用，它和HTML/JSP/PHP/配合使用∙脚本语言也有自己的变量，函数，控制语句（顺序，分支，循环）∙脚本语言实际上是解释性语言（即在执行时直接对源码进行执行）∙Java程序.java→.class→jvm , js→浏览器（js引擎来解释执行）∙Js在客户端（浏览器）执行∙因为js是由浏览器来执行的，因此这里有个问题，不同类型的浏览器可能对js的支持不一样。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><script language="javascript">function test(){window.alert("hello world!");}</script><title> New Document </title></head><body><input type="button" onclick="test()" value="点击一下吧"/></body></html>案例：1需求：打开网页后，显示hello ！<html><head><!----js代码是放在head标签间,但实际上也可以放在别的位置--><script language="javascript">window.alert("hello!");</script><title> New Document </title></head><body><input type="button" onclick="test()" value="点击一下吧"/></body></html>问题：∙js的位置可以随意放∙js必须使用 <script language="javascript"> 代码</script>∙在一个html文件中（JSP/PHP/）可以出现多对（script）片段，浏览器会按照先后顺序一次执行案例2:Hello world程序改进∙如何定义变量：∙如何运算：<html><head><title> New Document </title></head><body><!----js代码是放在head标签间,但实际上也可以放在别的位置--><script language="javascript">//js中变量的定义（js中变量用var表示，无论什么类型）var num1=1;var num2=60;var result=num1+num2;window.alert("结果是"+result); //alert函数window.alert表示弹出一个对话框</script></body></html>∙Js的变量类型是怎样决定的1) Js是弱数据类型语言，即：在定义变量侍候，统一使用var表示，甚至可以去点var这个关键字2) Js中的变量的数据是由js引擎决定的Var name=”shunping”; //name是字符串Var kk=2 //kk是数字Name=234; //这事name自动变成数∙Js的命名规范（函数/变量）：1) 使用大小写字母，数字，$可以命名2) 不能以数字打头3) 不能使用js保留字和关键字（即java里的关键字）4) 区分大小写5) 单行注释：//6) 多行注释：/*…….*/韩顺平JS第三讲∙Js的数据类型：∙基本数据类型∙数值类型∙字符串类型∙布尔类型通过typeof可以看到变量的具体数据类型举例：<html><head><title> New Document </title><script language="javascript">var vi="abc";var v2=890;window.alert("v1是"+typeof v1);window.alert("v2是"+typeof v2);vi=456; //体现js是动态语言：即数据类型可以任意变化window.alert("v1是"+typeof v1);//体现js是动态语言</script></head><body></body></html>∙复合数据类型∙数组∙对象∙特殊数据类型∙Null 即：var=null∙Undefined即：如下代码<script language="javascript">window.alert(tt ); //直接报错：未定义var tt; //未给值</script>∙Js定义变量，初始化，赋值∙定义变量：即var=a∙初始化：即在定义变量时就给值∙赋值：即：比如你先定义一个变量 var=tt ，然后再给值：tt=780；∙js数据类型转换：∙自动转换例子：var=123; //a是数值a=”hello” //a的类型是string∙强制转换例子：字符串转换成数字Var a="123” ;a=parseInt(a); //使用系统数强制转换Var b=90 ; //b是numberb=b+””, //b就是string∙运算符∙+ — * / %∙%(取摸：即两个数相除的余数) 强调：取模主要用于整数之间取模例子：编写一个程序，判断两个数是否能够整除<script language="javascript">var a=90;var b=8;if(a%b==0){window.alert("能整除");}else{window.alert("不能整除");}</script>∙++，运算符a++ = a=a+1a-- = b=b-1++a 表示先把自己加1再赋值--a 表示先把自己减1再赋值例子：Var a=56;Var b=++a; //b=++a等同于[a=a+1;b=a] b=a++等同于[b=a; a=a+1;] Window.alert(b);Window.alert(a);∙--运算符∙Var a=56;∙Var b=--a; //b=--a等同于[a=a-1;b=a] b=a--等同于[b=a; a=a-1;]∙Window.alert(b);∙Window.alert(a);例子：编写一个程序，判断两个数是否能够整除<script language="javascript">var a=90;var b=8;if(a%b==0){window.alert("能整除");}else{window.alert("不能整除");}</script>∙++，运算符a++ = a=a+1a-- = b=b-1++a 表示先把自己加1再赋值--a 表示先把自己减1再赋值例子：Var a=56;Var b=++a; //b=++a等同于[a=a+1;b=a] b=a++等同于[b=a; a=a+1;] Window.alert(b);Window.alert(a);∙--运算符∙Var a=56;∙Var b=--a; //b=--a等同于[a=a-1;b=a] b=a--等同于[b=a; a=a-1;]∙Window.alert(b);∙Window.alert(a);错误案例：更正：输出：myfuns.js代码：调用myfuns.js案例一：Js文件：调用：案例2：Js文件：调用：abc（5）；输出：3 3 4Js文件：调用：数组在内存中的存在形式：内存数据调用案例：输出：900内存数据分析:输出：35 90 900内存数据调用分析：输出： hello world abc 顺平输出： h e l l o w o r l d a b c 顺平输出： hello world输出：0=451=902=0gg=9000二维数组的遍历：输出：shunping 123 4.5a b c优化排序：输出：输出：找到下标为4数组转置：输出：。