JS申明变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/**
* 1、申明变量的语法:
* var 变量名字;
* var 变量名 = 值;
* js中的变量类型不敏感
* typeof，查看变量的类型
* 2、申明变量可以不使用var，不推荐这样，一定要养成用var申明的习惯
*/
var name;
age = 30;
console.debug(age,typeof(age))
age = "三十";
console.debug(age,typeof age)
age = true;
console.debug(age,typeof(age))
</script>
</head>
<body>
</body>
</html>
JS算数运算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/**
* 1、对字符串做 - * / %的时候，会自动把字符串转换成数字
* 2、对字符串做 + 的时候，会做字符串拼接
* 3、NaN:not a number,不是一个数字
* 4、==：相对等，只会比较值
* 5、===：绝对等，先比较类型，再比较值
* 6、!==：绝对不等，类型和值有一个不一样，就绝对不等
*/
var a = "2";
var b = 1;
var c = "1c";
console.debug("a-b",a-b);
console.debug("a+b",a+b);
console.debug("a-c",a-c);
var d = "5";
var e = 5;
console.debug(d==e)
console.debug(d===e)
</script>
</head>
<body>
</body>
</html>
JS逻辑运算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/**
* 短路的特点：
* 逻辑与（&&运算）：对false短路
* 逻辑或（||运算）：对true短路
* JS中的6种false：0 null false "" NaN undefined
* 在js中，进行逻辑运算的时候，当运算结束或者短路的时候，会返回当前表达式的值
* a && b && c
*/
console.debug(true && true);//true
console.debug(true && false);//false
console.debug("abc" && 2 && "ok");//ok
console.debug("abc" && null && "ok");//null
console.debug(0 || 1 || "ok");//1
</script>
</head>
<body>
</body>
</html>
JS函数申明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/**
* 函数的申明：
* function 函数名([参数]){
//函数体
[return 返回值]
}
跟java的区别：
1.不用申明返回类型
2.函数参数不需要var申明
3.参数申明但是没有赋值，就会表现出undefined
*/
function test(name){
console.debug("我是函数，你好：",name);
}
var s = test('老师');
console.debug(s);
</script>
</head>
<body>
</body>
</html>
JS匿名函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/**
* 匿名函数：没有名字的函数，匿名函数必须要一个变量名来接收
function ([参数]){
//函数体
[return 返回值]
}
}
*/
var func = function (){
console.debug("我是匿名函数");
}
func();
</script>
</head>
<body>
</body>
</html>
JS函数的重载(JS没有函数重载)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/**
* JS的函数重载:
* JS中没有函数重载，在JS中不要写重载
* JS中写一个同名函数，永远都只会执行最后一个
* JS函数调用跟参数没有关系，只跟函数名有关系
*/
function test(){
console.debug("没有参数");
}
function test(p1){
console.debug("p1",p1);
}
function test(p1,p2){
console.debug("p1,p2",p1,p2);
}
test();
test('abc');
</script>
</head>
<body>
</body>
</html>
JS全局变量和局部变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript">
/**
* 全局变量和局部变量:
* 全局变量：函数体外面定义的，或函数体里面不是用var定义的变量就是全局变量。
* 局部变量：函数体内部使用var定义的变量就是局部变量。
*/
var name = "张三";
function show(){
var name = "李四";
age = 30;
}
show();
console.debug("name=",name);
console.debug("age=",age);
</script>
</head>
<body>
</body>
</html>
JS时间对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript">
var date = new Date();
console.debug("年份",date.getFullYear());
console.debug("月份",date.getMonth()+1);
console.debug("日",date.getDate());
console.debug("小时",date.getHours());
console.debug("分钟",date.getMinutes());
console.debug("秒：",date.getSeconds());
</script>
</head>
<body>
</body>
</html>
JS字符串对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript">
/**
* indexOf()
返回指定字符串的下标,只会找第一次出现的位置,
如果找不到指定的字符串，返回-1
split()
方法用于把一个字符串分割成字符串数组
substr()
方法可在字符串中抽取从 start 下标开始截取指定的数目的字符，未指定长度则一直截取到结尾
substring()
方法用于提取字符串中介于两个指定下标之间的字符，不包括结束位置的字符
toLowerCase()
方法用于把字符串转换为小写
toUpperCase()
方法用于把字符串转换为大写
*/
var str = "abcdefge";
console.debug(str.indexOf("df"));
var str2 = "1=2=3=4=5=6"
console.debug(str2.split("="));
var str3 = str.substr(2,2);
console.debug("str3:",str3);
var str4 = str.substr(2);
console.debug("str4:",str4);
var str5 = str.substring(2,5);
console.debug("str5",str5);
var str6 = "CXK";
console.debug(str6.toLowerCase());
console.debug("str",str.toUpperCase());
</script>
</head>
<body>
</body>
</html>
JS数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript">
/**
* 申明数组有四种方式;
*/
var array = new Array();
console.debug(array);
array = new Array(3);
console.debug(array);
array = new Array(1,2,3,4);
console.debug(array);
array = ["a","b","c"];
console.debug(array);
</script>
<script type="text/javascript">
/**
push()//向数组末尾添加一个或更多元素，并返回新长度
pop()//删除并返回数组的最后一个元素
join()//把数组的所有元素组装成一个字符串，元素之间通过指定分隔符进行分隔
concat()//连接2个或更多数组，并返回结果
reverse()//颠倒数组中元素的顺序
*/
var array = ["张根硕","古巨基","阳顶天"]
//访问数据元素
console.debug(array[1]);
//添加元素
array.push("张三","李四");
console.debug(array);
//删除元素
var last = array.pop();
console.debug("last=",last,"array=",array);
//join拼装字符串
var str = array.join("@");
console.debug("str=",str);
//拼接数组
var array2 = ["孙悟空","威震天","龙骑士"];
array = array.concat(array2);
console.debug(array);
//颠倒顺序
array.reverse();
console.debug(array);
</script>
</head>
<body>
</body>
</html>
JS类的申明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript">
/**
* 在JS里面申明类的语法:
* function 类名([参数列表]){
对象体
}
申明语法跟函数一样，函数名首字母大写就是类
创建类的对象： new
读取属性：对象.属性名
给对象添加属性：
1、类的定义里面，使用this关键字来添加属性。
this：谁调用我，this就是谁。
2、类定义的外面，直接使用对象添加，只能作用于当前对象。
*/
function Person(name,age){
this.name = name;
this.age = age;
}
//创建对象
var person = new Person("武大郎",69);
var person1 = new Person("张三",30);
console.debug("name:",person.name)
person.sex = "男";
person1.sex = "女";
console.debug("person",person);
console.debug("person1",person1);
</script>
</head>
<body>
</body>
</html>
JS的prototype
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript">
/**
* prototype是用来扩展类的，扩展类的属性和方法。
* 不管是内置的类还是自定义的类，都有prototype
* 扩展的语法：类名.prototype.属性/方法 = xxx;
* 对类的扩展，可以作用于所有的对象
*/
Date.prototype.getMyTime = function(){
return this.getFullYear()+"年"+(this.getMonth()+1)+"月"+this.getDate()+"日";
}
var date1 = new Date();
console.debug(date1.getMyTime());
var date2 = new Date();
console.debug(date2.getMyTime());
</script>
</head>
<body>
</body>
</html>
JS字符串转数字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript">
/**
* 将字符串转换成数值
* parseInt
* parsetFloat
* 1 、如果要转换的内容，是数字+字符的格式，那么会丢弃调字符
* 2、如果要转换的内容，是字符开头，那么会报NaN（not a number）;
*/
var a = "250";
console.debug(a);
console.debug(parseInt(a));
var b = "250a250";
console.debug("b=",parseInt(b));
var c = "a250";
console.debug("c=",parseInt(c));
</script>
</head>
<body>
</body>
</html>
JS循环遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript">
/**
* 常用的循环：
* 1、 for循环，一般拿来循环数组 for(var i=0;i<数组.length;i++){xxx}
* 2、for in ，既可以循环数组，也可以遍历对象
* 使用for in遍历对象的时候，取值要用对象[变量]
*/
//遍历数组
var array = ["张三","李四","王五"]
for(var k in array){
console.debug(k,array[k]);
}
//遍历对象
function Person(name,age){
this.name = name;
this.age = age;
}
var p = new Person("张三",48);
for(var k in p){ //k:属性名 p[k]:属性名对应的属性值
console.debug(k,p[k]);
}
</script>
</head>
<body>
</body>
</html>
JS的window对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript">
/**
每个浏览器窗口都有一个window对象。
使用window对象的成员，window可以省略
window的三个成员：
1、alert：弹窗
2、setTimeout：定时器，在多少毫秒之后，干一件事
setTimeout(function(){xxx},2000)
3、setInterval：定时器，每隔多少毫秒，干一件事
setInterval(function(){xxx},2000)
*/
console.debug(window);
setTimeout(function(){
console.debug("你来了");
},3000);
setInterval(function(){
console.debug("我也来了");
},1000);
</script>
</head>
<body>
</body>
</html>
JS的location
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript">
console.debug(window.location);
/**
* location用来做页面跳转
* 语法： location.href=xxxx
*/
setTimeout(function(){
location.href = "http://www.taobao.com";
},3000);
</script>
</head>
<body>
</body>
</html>
JS注意事项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript">
/**
* script标签可以放在任何位置，除了title标签
* script标签只能干一件事：要么引入外部JS，要么在里面写JS代码
*/·
alert(1);
</script>
<script type="text/javascript" src="js/01.js">
</script>
</head>
<body>
</body>
</html>
扫一扫
2809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
