JavaScript（一）
作业
第一题
<style type=”text/css”>
body{
background-color:#0CF;
}
input[type=’text’]{
border-top:none;
border-left:none;
border-right:none;
border-bottom:#06C solid 1px;
background-color:transparent; /*背景色透明*/
}
input[type=’button’]{
border:none;
background-color:transparent; /*背景色透明*/
cursor:pointer; /*当鼠标移上去的时候变成手形*/
}
</style>
</head>
<body>
<div>请输入信息：<input type=”text” name=”username” /><input type=”button” value=”确定>>>” /></div>
第四题
分析页面结构如下：
页面总宽度：8+206+500+8=722
页面总高度：110+519=629
难点：
实现代码
<style type=”text/css”>
#content{
width:722px;
height:629px; /*为了#left,#right高度100%，指定父元素高度*/
overflow:hidden; /*重新测定子元素的高度*/
margin:auto; /*页面居中*/
}
#content #left,#content #right{
width:8px;
height:100%; /*背景无法撑开盒子，所以要设定高度*/
background:url(images/line1.gif) repeat-y;
float:left;
}
#content #right{
background:url(images/line2.gif) repeat-y;
}
#content #center{
width:706px;
float:left;
}
#content #center>div{
float:left;
}
#content #center #part1{
width:206px;
background-color:#ECDFBC;
/*text-align:center;*/ /*图片居中方法一*/
}
#part1 img{
margin:auto; /*图片居中方法二*/
display:block; /*设置块显示才能使用margin:auto来居中*/
}
#content #center #part4{
width:500px;
height:519px;
background:url(images/b-04.jpg);
padding-top:30px;
}
#part4 #wenzi{
width:90%;
font-size:14px;
font-family:’微软雅黑’;
margin:auto;
}
</style>
</head>
<body>
<div id=”content”>
<div id=”left”></div>
<div id=”center”>
<div id=”part1″><img src=”images/xihuzi2.gif” /></div>
<div id=”part2″><img src=”images/5.jpg” /></div>
<div id=”part3″><img src=”images/6.jpg” /></div>
<div id=”part4″>
<div id=”wenzi”>
<header style=”text-align:center”>西湖春天简介 </header>
<p> 西湖春天是一家经旅游局批准，工商局登记注册，具有独立法人资格，并足额缴纳旅行社质量保证金的股份制企业。<br />
公司下设组团部、地接部、导游部、财务部、石浦门市部、丹城门市部等机构，承接旅游、休闲、度假、疗养、会务、商务考察等业务，公司管理高度重视人力资源的合理利用和开发，现已拥有一批长期从事旅游工作、精通各项旅游业务、重信誉、讲实效、高素质的管理人员和一支训练有素、经验丰富的导游队伍，并且已做到人人持证上岗。<br />
公司凭借象山旅游发展大好趋势，结合自身的规模优势，全力打造出“西湖春天”的旗帜品牌形象。目前，公司开发的公司网站，可以让您广泛的了解旅游信息。<br />
公司自成立以来，坚持以“质量就是生命”的座右铭，虚心接受客户的监督，不断完善管理机制，全体员工积极进取，开拓创新、奋发图强；公司连续获得2003年度《安全生产先进集体》、《浙江省旅游消费推荐单位》、《“安康杯”竞赛优胜企业》、2004年度《石浦首届旅游消费诚信单位》等荣誉称号。<br />
公司与国内众多旅行社建立了良好的义务关系，在主要城市已形成了客房、餐饮、交通等完善的旅游服务网络，“西湖春天”全体工作人员将以最合理的旅游线路，最实惠的价格，最细致的服务，热诚期待您的到来。</p>
</div>
</div>
</div>
<div id=”right”></div>
</div>
圆角矩形
区分上下左右四个点
例题
<style type=”text/css”>
div{
width:100px;
height:100px;
border:#000 solid 1px;
margin:5px auto;
}
div:nth-of-type(1){
border-radius:10px; /*四个点的圆角半径都是10px*/
}
div:nth-of-type(2){
border-radius:10px 20px; /*上下10px 左右20px*/
}
div:nth-of-type(3){
border-radius:10px 20px 30px; /*上10px 左右20px 下30px*/
}
div:nth-of-type(4){
border-radius:10px 20px 30px 40px; /*上右下左*/
}
div:nth-of-type(5){
border-radius:50%; /*正圆*/
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
圆角矩形的应用
<style type=”text/css”>
body{
background:#999;
}
div{
width:200px;
height:200px;
padding:10px;
border:#000 solid 1px;
border-radius:10px;
background-color:#CCC;
}
#face{
border-radius:50%;
}
</style>
</head>
<body>
<div><img src=”images4/face.jpg” /></div>
<img src=”images4/face.jpg” id=”face” />
2D转换
在二维平面上桌变化，关键字：transform
2D转换之移动（translate）
例题：让div居于屏幕的中间
<style type=”text/css”>
div{
width:200px;
height:200px;
background-color:#900;
position:absolute;
left:50%;
top:50%;
/*transform:translateX(-50%) translateY(-50%);*/
transform:translate(-50%,-50%)
}
</style>
<div></div>
2D转换之旋转
2D转换之缩放（scale）
<style type=”text/css”>
img{
transform:scaleX(1.5); /*x轴是原来的1.5倍*/
transform:scaleY(0.5); /*y轴是原来的0.5倍*/
transform:scale(0.5,0.5); /*同时设定x轴和y轴的缩放*/
}
</style>
<img src=”images4/face.jpg” width=”200″ height=”200″ />
例题：三角做法
<style type=”text/css”>
div{
width:300px;
height:30px;
border:#999 solid 1px;
margin:100px auto;
position:relative;
}
div:after{
content:”;
width:12px;
height:12px;
display:inline-block;
position:absolute;
right:12px;
border-right:#999 solid 1px;
border-bottom:#999 solid 1px;
transform:rotate(45deg) translateY(10px);;
}
div:hover{
border:#00F solid 1px;
}
div:hover:after{ /*必须先写:hover，后写:after*/
border-right:#00F solid 1px;
border-bottom:#00F solid 1px;
}
</style>
<div></div>
过渡（transition）
动画类型有：
例题（对象移动）：
<style type=”text/css”>
div{
width:200px;
height:200px;
background-color:#F00;
transition:all 1s ease;
}
div:hover{
transform:translateX(500px);
}
</style>
<div></div>
例题：（头像旋转）
<style type=”text/css”>
img{
border-radius:50%;
transition:all 0.5s ease;
}
img:hover{
transform:rotate(360deg);
}
</style>
<img src=”images4/face.jpg” />
例题：（头像变大）
<style type=”text/css”>
ul{
list-style-type:none;
margin:10px auto;
padding:0px;
overflow:hidden;
}
li{
width:200px;
height:200px;
border:#000 solid 1px;
margin:5px;
float:left;
overflow:hidden;
}
img{
transition:all 0.5s ease;
}
img:hover{
transform:scale(1.1);
}
</style>
<ul>
<li><img src=”images4/face.jpg” width=”200″ height=”200″ /></li>
<li><img src=”images4/face.jpg” width=”200″ height=”200″ /></li>
<li><img src=”images4/face.jpg” width=”200″ height=”200″ /></li>
</ul>
Sublime介绍
- 生成HTML框架结构
按tab键或ctrl+E生成
注意要将页面保存再按快捷键生成
常用的其他技巧
什么是JavaScript
- JavaScript是一种解释型的，基于对象的脚本语言。
- Javascript（JS）可以运行在客户端，也可以运行在服务器端。默认是运行在客户端。
script：脚本
页面的执行过程
解释型与编译型
要看一门语言是否是解释型还是编译型，主要看是否会生成中间文件。
运行在客户端的语言都是解释型
运行在服务器端的语言都是编译型。
脚本语言
脚本语言也是语言一种，脚本语言的特点要结合其他语言一起实现功能。
JavaScript的应用场景
- 客户端特效
- 验证表单
变量
变量就是一个会变的量
x+1=2 x=1
x+10=20 x=10
变量就是内存中的一段空间
变量的命名规则
- 变量以字母、下划线，$开头，后面跟的在字母、数字、下划线，$
- 关键字不能做变量名
- 变量名区分大小写（aa和Aa是两个空间）
下列变量名是否合法
- aa 合法
- a1 合法
- 1a 不合法（不能以数字开头）
- _1a 合法
- a-1 不合法
- a% 不合法
- x 合法
- do 不合法（关键字不可以做变量名 if for else case …）
声明变量
通过var关键字来声明变量。
声明变量有两种方法
- 显式声明：通过var关键字声明后使用
- 隐式声明：不声明，直接使用
输出的方法
1、document.write(‘锄禾日当午’); //输出在浏览器上
2、alert(‘锄禾日当午’); //弹出一个对话框（就是window.alert()）
3、prompt()：弹出一个用于输入的对话框
4、弹出一个对话框，有“确定”和“取消”按钮
5、console.log(‘锄禾日当午’)：在控制台输出，用于代码调试
几个需要记忆的单词
- window：窗口
- document：文档
- console：控制台
- log：日志
变量数据类型
变量的数据类型取决于变量中存储的值。如果存放的是数字就是数字型，存放字符串就是字符串型。
基本数据类型
|
数据类型 |
例题 |
|
数字型（Number） |
10 10.5 |
|
字符串型（String） |
“锄禾日当午” ‘锄禾日当午’ |
|
布尔型（Boolean） |
true（真） false（假） |
特殊数据类型
|
Null（空） |
空型 |
|
Undefined（未定义型） |
变量声明后当没有赋值，这个变量是未定义型 |
typeof：显示变量的数据类型
多学一招：JS支持八进制，十进制，十六进制。
多学一招：JS支持无穷大
JavaScript的基本语法规则
- 解释型语言，可以随时运行
- 大小写敏感
- 弱类型语言（变量的数据类型取决于存放的数据）
- 分号表示语句的结束（也可以使用换行替代分号，但不推荐）
注释
- 单行注释： //
- 多行注释： /* */
运算符
赋值运算符（=）
a=5：将5付给a
算术运算符
|
一元运算符 |
描述 |
二元运算符 |
描述 |
|
– |
负号 |
+ |
加 |
|
++ |
自增 |
– |
减 |
|
— |
自减 |
* |
乘 |
|
/ |
除 |
||
|
% |
模（取模就是取余数） |
注意：
1、“+”除了做数字运算，还可以做字符串相加，字符串相加就是字符串相连。
2、字符串和数字相加，将数字转成字符串型再相连
3、字符串只能做加法，不能做减法，不能做乘法，不能做除法。
4、取模就是取余数
自增
++前置：先自增，后运行
++后置：后自增，先运算
作业：
- 实现旋转的效果
