js是什么?
是一门弱类型的脚本语言,能够实现网页的特效。是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。
js的作用?
1.用户交互
2.表单验证
3.网页特效
JS总结: 用来控制HTML结构和CSS样式
javascript的实现
虽然JavaScript 和ECMAScript 通常都被人们用来表达相同的含 义, 但JavaScript 的含义却比ECMA-262 中规定的要多得多。没错,一个完整的JavaScript实现应该由下列三个不同的部分组成。
元素的获取:
document.getElementById(‘btn’);
:document:整个html文档
:通过id名:通过id获取元素(节点)
:在文档里面查找id为btn的元素
:所以id必须是唯一的
鼠标事件:
onmouseover:当鼠标经过的时候
onmouseout:当鼠标离开的时候
onclick:当鼠标点击的时候
什么是函数?
<script type="text/javascript">
window.onload = function() {
function show() {
alert("哈哈");
}
show();
var oBtn = document.getElementById('btn');
oBtn.onclick = show;
}
</script>
</head>
<body>
<input type="button" id="btn" value="按钮" />
</body>
数据类型
基本数据类型的应例:
<script type=text/javascript>
var a=55;
var b='帅哥';
var c;
var f=true;
alert(typeof(b));
</script>
五中基本数据类型的总结:number String boolean null underfined 这五种。
求模
var oMinute=parseInt(80/60);
var oSecond=(80%60);
alert(oMinute+"分"+oSecond+"秒");
var oMin=parseInt(8787/3600);
var oSec=parseInt(8787%3600/60);
var oThr=parseInt(8787%60);
alert(oMin+"时"+oSec+"分"+oThr+"秒");
变量作用域的应用
<script type="text/javascript">
var a=5;
function aa(){
var b=6;
alert(a);
}
alert(alert(a));
</script>
className的使用
例:
<style type="text/css">
.one{background: red;}
.two{background: gold;}
</style>
</head>
<body>
<input type="button" name="" id="bb" value="换色" />
<p id="aa" title="" class="one">sds</p>
</body>
<script type="text/javascript">
var oAa=document.getElementById('aa');
var oBb=document.getElementById('bb');
oBb.onclick=function(){
if(oAa.className=='one'){
oAa.className='two';
}
else{
oAa.className='one';
}
}
</script>
日历选项卡的制作实例:
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#box li {
width: 60px;
height: 60px;
color: #fff;
background: #000;
text-align: center;
font-size: 16px;
line-height: 60px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
#box {
margin: 50px;
}
#box ul {
width: 220px;
}
#box .active {
background: #FFF;
border: 1px solid #000;
color: orange;
box-sizing: border-box;
}
#content {
clear: both;
width: 200px;
height: 50px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="active">1月</li>
<li>2月</li>
<li>3月</li>
<li>4月</li>
<li>5月</li>
<li>6月</li>
<li>7月</li>
<li>8月</li>
<li>9月</li>
<li>10月</li>
<li>11月</li>
<li>12月</li>
</ul>
<div id="content">
<h3>1月</h3>
<p>准备毕业啦</p>
</div>
</div>
</body>
<script type="text/javascript">
var arr = [
'准备毕业啦',
'准备毕业啦',
'准备毕业啦',
'准备毕业啦',
'准备毕业啦',
'准备毕业啦',
'准备毕业啦',
'准备毕业啦',
'准备毕业啦',
'准备毕业啦',
'准备毕业啦',
'准备毕业啦',
];
var oBox = document.getElementById('box');
var aLi = oBox.getElementsByTagName('li');
var oContent = document.getElementById('content');
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = '';
}
this.className = 'active';
oContent.innerHTML = '<h3>' + (this.index + 1) + '月份活动</h3><p>' + arr[this.index] + '</p>';
}
}
</script>