1.命名规范
JS的变量名可以用 下划线 数字 字母 美元符$ 组成 但数字不能开头
例如:
var a = 34;
var b = 45;
alert(a+b);
var $‘ = "jquery";
alert($);
c = 56;
alert(c);
<script type="text/javascript">
var a = 3;
var b = "hello";
var $c = "world";
console.log(a,b,$c);
</script>
js变量是区分大小写的
而且字符串可以用单引号也可以用双引号括起来
既var c = “hello”;
var d =’hello’;都是可以的
2.JS变量类型
1)数值类型
var a = 23;
var b = 3.14;
2)字符串类型
var c = "hello";
var d = "world";
3)布尔类型
var e = true;
4)null型
var f = null;
5)undefiend型
var g = undefined;
说明: null代表对象不存在,即对象为空用null
若基本数据类型为空 则为undefiend;
6)一般数组的写法
[]包围 逗号隔开每个值
JS中数组的索引永远是从0到n的 不会出现跳值的情况
var arr = ['赵',‘钱’,'孙','李','吴'];
调用方法:arr[2];
7)对象的写法
var obj = {name:"lisi",age:29};
说明对象里面的name那可以不加引号,但是后面的值若是字符串,必须加引号
调用方法: obj.name; 或者obj[name];
3.运算符
var a = 3;
var b = 2;
alert(a%b);
输出1
JS中拼接字符串用”+”
alert("hello" + 3 + "world");
输出 hello3world
//左往右加时,碰到第一个非数值型之后,就理解为字符串拼接
alert(3+2+"hello"+5+6);
输出5hello11
逻辑运算符与一般的语言不同
var a = false;
var b = 4;
var c = a||b;
在一般语言中为true 在JS中则为4
逻辑运算符返回的值为:能确定运算结果的单元的值
var a = false;
var b = 6;
var c = true;
var d = a||b||c;
此时d的值为6;
4.控制结构
1) 数组遍历:
使用for循环
var arr = ['赵','钱','孙','李'];
for(var i = 0;i<arr.length;i++)
console.log(arr[i]);
2)对象遍历
使用for循环
var obj = {name:'lise','age':29,'height':180};
for(var k in obj){
console.log(k);
console.log(obj.k); //错误的写法
cousole.log(obj[k]);//正确
}
5.对象的操作
String字符串对象
length属性 长度
concat(String) 连接两个或更多个字符串
indexOf(String) 返回出现字符串的位置
substr(num1,num2)截取字符串:从num1开始截取长度为num2
toLowerCase() 转换成小写
toUpperCase() 转换成大写
replace(str1,str2)字符串替换
Date日期对象
getYear()返回年份(2位或4位)
getFullYear()返回年份(4位)
getMonth()返回月份0-11
getDate()返回日期 1-31
getDay()返回星期 0-6
getHours()返回小时数0-23
getMinutes()返回分钟数0-59
getSeconds()返回秒数0-59
getMilliseconds()返回毫秒数0-999
Math数学对象
该对象不需要new 直接调用其内部静态方法
cell(数值) 向上取整
floor(数值) 向下取整
min(数值1,数值2) 返回最小值
max(数值1,数值2) 返回最大值
pow(数值1,数值2) 返回数值1的数值2次方
random() 返回随机数 0--1
round(数值) 四舍五入
sqrt(数值) 开平方根
数组对象
concat() 返回一个由两个数组合并组成的心数组
join()返回一个由数组中的所有元素连接在一起的string对象
pop()删除数组中的最后一个元素并返回该值
push()向数组中添加新元素,返回数组的新长度
shift()删除数组中的第一个元素并返回值
unshift()返回iuyige数组,在该数组头部插入了指定的元素
sort()排序
reverse()反序数组
slice()返回数组的一个片段
splice()从数组中删除元素
6.浏览器window对象
window对象的方法:
window.alert(message);
window.confirm(message);
window.close()关闭
window.print()打印
window对象的子对象
navigator浏览器信息对象
appCodeName 内部代码
appName 浏览器名称
appVersion浏览器版本
platform 操作系统类型
userAgen 用户代理信息
cookieEnabled是否支持cookie
<script type="text/javascript">
console.log(window.navigator.cookieEnabled);
console.log(测试);
</script>
assign(url)页面跳转
history历史纪录
length:历史纪录的数目
back();
forward();
go();
screen屏幕对象
height 高度
width 宽度
availHeight 可用高度
avaliWedth 可用宽度
coloeDepth 颜色
两个练习
1.点击屏幕,实现颜色的变换
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<html>
<head>
<style>
div{
width:300px;
height:300px;
}
#test1{
background: green;
}
#test2{
background:red;
}
</style>
<script>
function ch(){
var div = document.getElementById("test1");
div.id="test2";
}
</script>
</head>
<h1>特效是什么</h1>
<div id ="test1" onclick = "ch();"></div>
</body>
</html>
2.点击屏幕,实现图片的切换
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<script>
function toggle(){
var test1 = doucument.getElementByTagId('test1');
if(test1.scr.indexOf('on')>0)
test1.src = "off.jpg";
else{
test1.scr = "on.jpg";
}
}
</script>
<html>
<head>
<title></title>
</head>
<body>
<img id = "test1" scr="on.jpg" alt=onclick = "toggle();">
</body>
</html>