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、取模就是取余数
自增
++前置:先自增,后运行
++后置:后自增,先运算
作业:
- 实现旋转的效果