一、 发展史：
* 1992年，nombas公司 C--,最早的客户端脚本语言。专门用于表单验证。 后更名为 scriptEarth
* 网景 scriptlive，后来找到sun公司合作，共同开发出 JavaScript
* 微软抄袭JavaScript 定义了 JScript
* ECMA(欧洲计算机制造商协会)定义了一套客户端脚本语言的规范 ECMAScript规范
JavaScript = ECMAScript规范 + js自己特有的东西(BOM/DOM)
二、 js与html结合方式
- 内部js：
* 定义
三、ECMAScript规范
常量：
* 基本数据类型：
Java中：
整型：byte short int long
浮点型：float double
布尔型：boolean
字符型：char
js原始数据类型:
number：数字类型，包含整数和小数和 NaN(not a number)
string: 字符串和字符类型 "" ''
boolean: true 和 false
null： 空类型。对象的占位符
undefined：未定义,如果一个变量没有初始化值，默认为undefined
变量：
* 语法：
* 使用 var定义变量 var i = "abc";
* js是一门弱类型语言：定义变量时，不需要规定其数据类型。
* typeof运算符：获取变量的数据类型
* var关键字如果不书写，该变量则为全局变量
语句：
if
switch
while
do...while
for
运算符:自动类型转换
* 一元运算符
++ -- +(正) -(负)
* 注意：在js中，如果传递给运算符的值，和 运算符想要接受的 值 的类型不匹配，则会自动类型转换
* 其他类型转为number
string：将字符串的字面值，转为number，如果字面值不是数字，则 转为NaN
boolean： true为1 false 为0
* 比较运算符
* > < >= <=:
* NaN参与的运算，结果都为fasle，除了(!=)
* 字符串比较小大：如果长度一致按照字典顺序比较 长度不一致 那谁的长度长那就谁大
* !=:
* == ===(全等于):
* 全等于比较时，先比较类型，如果类型不一致，直接返回false
* 逻辑运算符
&& || !
* 其他类型转boolean
* number：非0为true，0和NaN为false，
* string: 除了空字符串("")，其他都是true
* null 和 undefined:转为false
* 对象:所有对象都为true
* 算术运算符：
+ - * / %
注意:NaN 参与数学运算 结果都为NaN
* 赋值运算符
= += ....
* 三元运算符
表达式 ? 值1 : 值2;
* 对象：
* js是一门基于对象的语言
* 基于对象：不能由原生的对象派生出新的对象。换句话说，不存在继承关系
* Function(*****): 代表函数
* 创建方式：
* var fun = new Function("参数列表","方法体");
* function 方法名称(形参列表){
方法体
}
* var fun = function(){
}
* 属性：
length：形参的个数
* 使用：
* 函数名称(实参列表);
* 特点：
1.函数的调用，只与函数名称有关，与实参列表无关
2.函数内部有内置对象 arguments 封装实参数组
* void运算符：拦截返回值，一般结合a标签一起使用
* 注销a标签跳转功能，保留可被点击的功能
<a href="javascript:void(0);" onclick="exit();">退出</a>
设置字体阴影
text-shadow设置字体的阴影
规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
text-shadow: 5px 5px 5px #FF0000;
字母大小写转换
text-transform:uppercase;
彩色图片变白
filter: grayscale(100%);
filter: gray;
放大缩小位移
Transform
transform:rotate(30deg);//旋转30度
transform:translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素
transform:scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
transform:skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
过度动画
transition
格式：transition: width 2s; （应用于宽度，时间2秒）
渐变动画：transition: transition-property transition-duration transition-timing- function transition-delay;
transition-property:width;
transition-duration:5s;
transition-delay:2s;
transition-timing-function：
linear 规定以相同速度开始至结束的过渡效果。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果。
自定义动画
Animation
格式：animation:myfirst 5s;（myfirst动画名，5s动画时间）
@keyframes myfirst
{ 0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;} }
@keyframes myfirst
{ from {background: red;}
to {background: yellow;}}
自定义动画详细属性
混合调用语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
单个使用属性
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。 infinite无限次
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
四、 盒子模型
顺序排列，用于div设置显示方式为盒子模型给父布局设置，其子元素按父元素设置的效果排列：
//设置盒子模型
display: flex;
// 排列方式横向或竖向 后面加上wrap可自动控制宽高
flex-direction: row | row-reverse | column | column-reverse
justify-content:flex-start | flex-end | center;按方向居开始 中间 末尾
flex-flow:和上面的属性值相同 加上warp可以换行或换列
例子：flex-flow:row wrap; 横向排列 如果排不下 自动换到下一行
flex-flow:column wrap; 竖向排列 排不下 自动换列
flex-wrap:wrap;//自动换行 或换列
设置盒子模型display: flex;后给其子元素设置margin:auto;为自动居中
例子：margin:auto; 盒子的层上下左右都居中
margin:10px auto; 盒子的层 距离顶部10px 左右居中
设置多个控件排列顺序：order:1;
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
height: 600px;
width: 800px;
border: 1px black solid;
display: flex;/* 把外层转换为一个盒子 */
flex-direction:row;/* 内层排列方向 */
/* justify-content:center; */
flex-wrap: wrap;
}
#box>div{
/* margin: auto; */
margin-top:20px ;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 100px;
border: 1px black solid;
}
</style>
</head>
<body>
<div id="box">
<div id="nei1">
1
</div>
<div id="nei2">
2
</div>
<div id="nei3">
3
</div>
<div id="nei1">
1
</div>
<div id="nei2">
2
</div>
<div id="nei3">
3
</div>
</div>
</body>
</html>
五、 漂浮动画
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai {
position: absolute;
height: 250px;
width: 130px;
background-image: url(img/girl1.jpg);
background-size: 100% 100%;
animation-name: piaofu;
animation-play-state: running;
animation-iteration-count:infinite;
animation-duration:5s ;
animation-timing-function:linear;
}
#wai:hover{
animation-play-state:paused;
}
#nei {
height: 30px;
background: rgb(0, 0, 0, 0.2);
/* rgba a表示透明度*/
/* opacity: 0.5;/* 调整背景透明度 0----1 */
}
#nei:hover{
cursor: pointer;
}
@keyframes piaofu {
10% {
position: absolute;
top: 50px;
left: 0px;
border: 1px black solid;
width: 150px;
height: 300px;
/*transform: scale(0.3);*/
background-size: 100% 100%;
background-image: url(img/girl1.jpg);
}
20% {
position: absolute;
top: 50px;
left: 100px;
border: 1px black solid;
width: 150px;
height: 300px;
/*transform: scale(0.3);*/
background-size: 100% 100%;
background-image: url(img/girl2.jpg);
}
30% {
position: absolute;
top: 350px;
left: 100px;
border: 1px black solid;
width: 150px;
height: 300px;
/*transform: scale(0.3);*/
background-size: 100% 100%;
background-image: url(img/girl3.jpg);
}
40% {
position: absolute;
top: 550px;
left: 100px;
border: 1px black solid;
width: 150px;
height: 300px;
/*transform: scale(0.3);*/
background-size: 100% 100%;
background-image: url(img/girl4.jpg);
}
50% {
position: absolute;
top: 100px;
left: 400px;
border: 1px black solid;
width: 150px;
height: 300px;
/*transform: scale(0.3);*/
background-size: 100% 100%;
background-image: url(img/girl5.jpg);
}
70% {
position: absolute;
top: 430px;
left: 100px;
border: 1px black solid;
width: 150px;
height: 300px;
/*transform: scale(0.3);*/
background-size: 100% 100%;
background-image: url(img/girl2.jpg);
}
80% {
position: absolute;
top: 600px;
left: 800px;
border: 1px black solid;
width: 150px;
height: 300px;
/*transform: scale(0.3);*/
background-size: 100% 100%;
background-image: url(img/girl1.jpg);
}
90% {
position: absolute;
top: 600px;
left: 800px;
border: 1px black solid;
width: 150px;
height: 300px;
/*transform: scale(0.3);*/
background-size: 100% 100%;
background-image: url(img/girl4.jpg);
}
100% {
position: absolute;
top: 600px;
left: 800px;
border: 1px black solid;
width: 150px;
height: 300px;
/*transform: scale(0.3);*/
background-size: 100% 100%;
background-image: url(img/girl5.jpg);
}
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
<span style="color: red;" onclick="shutdownDIV()">关闭</span>
</div>
</div>
</body>
<script type="text/javascript">
function shutdownDIV(){
var wai=document.getElementById("wai");
wai.style.display="none";
}
</script>
</html>
JS实现方式
JavaScript 实现是由以下 3 个不同部分组成的：
核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）
六、 JS的语句
if
for
while
do while
switch
语法跟Java中一样
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//语句
for (var i = 0; i < 10; i++) {
//alert(i);
document.write("<div style='color:red;font-size: 30px;'>" + i + "</div>");
}
//计算 1---100的和
var sum = 0;
var num = 1;
while (num <= 100) {
sum += num;
num++;
}
document.write(sum);
/* switch (){
case value:
break;
default:
break;
} */
</script>
</head>
<body>
</body>
</html>
1935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
