一.变量
JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’
var a = 123;
var b = 'asd';
//同时定义多个变量可以用","隔开,公用一个‘var’关键字
var c = 45,d='qwe',f='68';
1.变量类型
- 5种基本数据类型:
number、string、boolean、undefined、null - 1种复合类型:
object
2.变量、函数、属性、函数参数命名规范
- 区分大小写
- 第一个字符必须是字母、下划线(_)或者美元符号($)
- 其他字符可以是字母、下划线、美元符或数字
二.获取元素方法
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
// 读取属性值
var val = oDiv.value;
</script>
<div id="div1">这是一个div元素</div>
</body>
</html>
上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,可以在Google Chrome浏览器中按F12弹出控制中可以看出报错的地方,右上角有个红色的交叉,点击就可以看出报错的地方
解决方法有两种:
第一种方法:将javascript放到页面最下边
....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
// 读取属性值
var val = oDiv.value;
</script>
</body>
第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
// 读取属性值
var val = oDiv.value;
}
</script>
....
<div id="div1">这是一个div元素</div>
三.操作元素属性
获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。
操作属性的方法
- “.” 操作
- “[ ]”操作
1.属性写法
- html的属性和js里面属性写法一样
- “class” 属性写成 “className”
- “style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”
2.通过“.”操作属性:
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 读取属性值
var val = oInput.value;
var typ = oInput.type;
var nam = oInput.name;
var links = oA.href;
// 写(设置)属性
oA.style.color = 'red';
oA.style.fontSize = val;
}
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>
3.通过“[ ]”操作属性:
<script type="text/javascript">
window.onload = function(){
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oA = document.getElementById('link1');
// 读取属性
var val1 = oInput1.value;
var val2 = oInput2.value;
// 写(设置)属性
// oA.style.val1 = val2; 没反应
oA.style[val1] = val2;
}
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>
4.innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var txt = oDiv.innerHTML;
alert(txt);
//写入
oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
}
</script>
......
<div id="div1">这是一个div元素</div>
四.函数
函数就是重复执行的代码片。
1.函数定义与执行
<script type="text/javascript">
// 函数定义
function aa(){
alert('hello!');
}
// 函数执行
aa();
</script>
2.变量与函数预解析
JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined。
<script type="text/javascript">
aa(); // 弹出 hello!
alert(bb); // 弹出 undefined
alert(c); //报错,c没有声明
function aa(){
alert('hello!');
}
var bb = 123;
</script>
3.提取行间事件
在html行间调用的事件可以提取到javascript中调用,从而做到结构与行为分离。
<!--行间事件调用函数 -->
<script type="text/javascript">
function myalert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="myalert()">
结构与行为分离:
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="弹出" id="btn1">
4.匿名函数
定义的函数可以不给名称,这个叫做匿名函数,可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
<script type="text/javascript">
//普通的做法
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
</script>
<script type="text/javascript">
//匿名函数做法
window.onload = function(){
var oBtn = document.getElementById('btn1');
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>
5.函数传参
<script type="text/javascript">
function myalert(a){
alert(a);
}
myalert(12345);
</script>
6.函数’return’关键字
函数中’return’关键字的作用:
- 1、返回函数执行的结果
- 2、结束函数的运行
- 3、阻止默认行为
<script type="text/javascript">
function add(a,b){
var c = a + b;
return c;
alert('here!');
}
var d = add(3,4);
alert(d); //弹出7
</script>
五.条件语句
通过条件来控制程序的走向,就需要用到条件语句。
运算符
- 1、算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
- 2、赋值运算符:=、 +=、 -=、 *=、 /=、 %=
- 3、条件运算符:==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if else
var a = 6;
if(a==1)
{
alert('语文');
}
else if(a==2)
{
alert('数学');
}
else if(a==3)
{
alert('英语');
}
else if(a==4)
{
alert('美术');
}
else if(a==5)
{
alert('舞蹈');
}
else
{
alert('不补习');
}
switch
var a = 6;
switch (a){
case 1:
alert('语文');
break;
case 2:
alert('数学');
break;
case 3:
alert('英语');
break;
case 4:
alert('美术');
break;
case 5:
alert('舞蹈');
break;
default:
alert('不补习');
}
六.数组及操作方法
数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的。
1.定义数组的方法
//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];
2.操作数组中数据的方法
1、获取数组的长度:aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 弹出4
2、用下标操作数组的某个数据:aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1
3、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4
4、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4
5、unshift()和 shift() 从数组前面增加成员或删除成员
var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4
6、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1
7、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(3)); // 弹出2
8、splice() 在数组中增加或删除成员
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4
3.多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;
4.获取元素的第二种方法
document.getElementsByTagName(”),获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的dom元素。
七.循环语句
程序中进行有规律的重复性操作,需要用到循环语句。
1.for循环
for(var i=0;i<len;i++)
{
......
}
2.while循环
var i=0;
while(i<8){
......
i++;
}
3.数组去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];
for(var i=0;i<aList.length;i++)
{
if(aList.indexOf(aList[i])==i)
{
aList2.push(aList[i]);
}
}
alert(aList2);