1、js基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 单行注释
/*
进行
多行注释
*/
document.write("Hello Javascript");
</script>
<br/>
<button onclick="document.getElementById('text').style.display='none'">隐藏文本</button>
<button onclick="document.getElementById('text').style.display='block'">显示文本</button>
<p id="text"> 这个是一段可以被javascript隐藏的文本</p><br/>
<script src="http://how2j.cn/study/hello.js"></script>
</body>
2、JS运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var x = 10;
document.write("变量x的值:"+x);
</script>
<br/>
<script>
x = 10;
document.write("没有用var声明的变量x的值:"+x);
</script>
<br/>
<script>
var x=true;
var y=false;
document.write("布尔值:"+x);
document.write("<br>");
document.write("布尔值:"+y);
</script>
<script>
var a=10; //十进制
var b=012;//第一位是0,表示八进制
var c=0xA;//0x开头表示十六进制
var d=3.14;//有小数点表示浮点数
var e=3.14e2;//使用e的幂表示科学计数法
document.write("十进制 10 的值: "+a);
document.write("<br>");
document.write("八进制 012 的值: "+b);
document.write("<br>");
document.write("十六进制 0xA 的值: "+c);
document.write("<br>");
document.write("浮点数 3.14 的值: "+d);
document.write("<br>");
document.write("科学记数法 3.14e2 的值: "+e);
document.write("<br>");
</script>
<script>
var x='hello '; //单引号
var y="javascript"; //双引号
document.write("单引号的字符串:"+x);
document.write("<br>");
document.write("双引号的字符串:"+y);
</script>
<script>
var x=10; //Number类型
document.write("此时 x的值是 "+x+" 类型是数字");
document.write("<br>");
x = "hello javascript"; //String类型
document.write("此时 x的值是 "+x+" 类型是字符串");
</script>
<script>
var x;
document.write('声明了但是未赋值的时候,类型是: '+typeof x);
document.write("<br>");
x=5;
document.write('赋值为5之后,类型是: '+typeof x);
document.write("<br>");
x=5.1;
document.write('赋值为5.1之后,类型是: '+typeof x);
document.write("<br>");
x=true;
document.write('赋值为true之后,类型是: '+typeof x);
document.write("<br>");
x="hello";
document.write('赋值为hello之后,类型是: '+typeof x);
</script>
</body>
</html>
3、JS字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a="hello javascript";
document.write("变量a的类型是:"+(typeof a));
document.write("<br>");
document.write("变量a的长度是:"+a.length);
</script>
<script>
var a=10;
document.write("数字 "+a+" 转换为字符串"+a.toString());
document.write("<br>");
var b=true;
document.write("布尔 "+b+" 转换为字符串"+b.toString());
document.write("<br>");
var c="hello javascript";
document.write("字符串 "+c+" 转换为字符串 "+c.toString());
document.write("<br>");
</script>
<script>
var a=10;
document.write('默认模式下,数字10转换为十进制的'+a.toString()); //默认模式,即十进制
document.write("<br>");
document.write('基模式下,数字10转换为二进制的'+a.toString(2)); //基模式,二进制
document.write("<br>");
document.write('基模式下,数字10转换为八进制的'+a.toString(8)); //基模式,八进制
document.write("<br>");
document.write('基模式下,数字10转换为十六进制的'+a.toString(16)); //基模式,十六进制
document.write("<br>");
</script>
<script>
document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数
document.write("<br>");
document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("3.14"));//转换浮点数
document.write("<br>");
document.write("字符串的\"10abc\"转换为数字的:"+parseInt("10abc")); //判断每一位,直到发现不是数字的那一位
document.write("<br>");
document.write("字符串的\"hello javascript\"转换为数字的:"+parseInt("hello javascript")); //如果完全不包含数字,则返回NaN - Not a Number
document.write("<br>");
</script>
<script>
document.write("空字符串''转换为布尔后的值:"+Boolean("")); //空字符串
document.write("<br>");
document.write("非空字符'hello javascript '串转换为布尔后的值:"+Boolean("hello javascript")); //非空字符串
document.write("<br>");
document.write("数字 0 转换为布尔后的值:"+Boolean(0)); //0
document.write("<br>");
document.write("数字 3.14 转换为布尔后的值:"+Boolean(3.14)); //非0
document.write("<br>");
document.write("空对象 null 转换为布尔后的值:"+Boolean(null)); //null
document.write("<br>");
document.write("非空对象 new Object() 转换为布尔后的值:"+Boolean(new Object())); //对象存在
document.write("<br>");
</script>
<script>
document.write("通过Number() 函数转换字符串'123' 后得到的数字:"+Number("123")); //正常的
document.write("<br>");
document.write("通过Number() 函数转换字符串'123abc' 后得到的数字:"+Number("123abc")); //包含非数字
document.write("<br>");
document.write("通过Number() 函数转换字符串'abc123' 后得到的数字:"+Number("abc123")); //包含非数字
document.write("<br>");
document.write("通过parseInt() 函数转换字符串'123' 后得到的数字:"+parseInt("123")); //正常的
document.write("<br>");
document.write("通过parseInt() 函数转换字符串'123abc' 后得到的数字:"+parseInt("123abc")); //包含非数字,返回开头的合法数字部分
document.write("<br>");
document.write("通过parseInt() 函数转换字符串'abc123' 后得到的数字:"+parseInt("abc123")); //包含非数字,以非数字开头,返回NaN
document.write("<br>");
</script>
<script>
var a = null;
document.write('String(null) 把空对象转换为字符串:'+String(a));
document.write("<br>");
document.write('null.toString() 就会报错,所以后面的代码不能执行');
document.write(a.toString());
document.write("因为第5行报错,所以这一段文字不会显示");
</script>
</body>
</html>
4、JS自定义函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function print(){
document.write("这一句话是由一个自定义函数打印");
}
print();
</script>
<br/>
<script>
function print(message){
document.write(message);
}
print("第一句话");
print("<br>");
print("第二句话");
</script>
<br/>
<script>
function print(message){
document.write(message);
}
function calc(x,y){
return x+y;
}
var sum = calc(500,20);
print(sum);
</script>
</body>
5、局部变量与全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function f1(a){
document.write('参数的作用域在函数以内,其值是 '+a);//参数a的作用范围,所以打印出来是5;
}
function f2(){
document.write('在函数里不能访问其他函数的参数'+a); //不在参数a的作用范围,是一个未声明的变量,无法打印
}
f1(5);
f2();
document.write('在函数外也不能访问'+a);//也不在参数a的作用范围,是一个未声明的变量,无法打印
</script>
<br/>
<script>
var a = 0; //定义在函数前面,即全局变量,所有函数都可以访问
function f1(){
document.write('通过函数f1 设置全局变量a的值 为 5');
a = 5; //能够访问
}
function f2(){
document.write('通过函数f2 访问并打印全局变量a的值 '+a); //能够访问
}
f1(); //通过f1,设置a的值
document.write('<br>');
f2(); //通过f2, 打印a的值
</script>
</body>
</html>
6、JS逻辑运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function showHello(){
alert("Hello JavaScript");
}
</script>
<button onclick="showHello()">点击一下</button>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
p("1+2="+ (1+2));
p("5-3="+ (5-3));
p("3*2="+ (3*2));
p("9/3="+ (9/3));
p("10%3="+ (10%3));
</script>
<br/>
<script>
var a = 5;
document.write('a++ 是先取值,再运算,所以打印出来是:'+a++); //先取值 ,即5
document.write("<br>");
var b = 5;
document.write('++b 是先运算,再取值,所以打印出来是:'+ ++b); //先运算,再取值,即6
</script>
<br/>
<script>
x = 5;
x+= 6;
document.write('x+=6就是 x=x+6的意思,所以最后的值就等于: '+x);
</script>
<br/>
<script>
document.write('当+两边都是数字的时候,+就是加法运算符,所以1+2='+(1+2));
document.write("<br>");
document.write('当+任意一边是字符串的时候,+就是字符串连接符,所以1+\"2\"='+ (1+"2"));
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
p("1==2: "+(1==2));
p("1!=2: "+(1!=2));
p("1>2: "+(1>2));
p("1<2: "+(1<2));
p("1>=2: "+(1>=2));
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
p("1=='1': "+(1=='1'));
p("1==='1': "+(1==='1'));
</script>
<br/>
<script>
var age = 15;
var movie = age<18?"卡通":"你懂的";
document.write('使用?: 三相运算法进行判断。 <br>');
document.write('age<18?"卡通":"你懂的" <br>表示当年纪小于18的时候,就看卡通,否则就看 你懂得<br>');
document.write('而age变量的值是15,所以返回 '+movie);
</script>
</body>
</html>
7、JS控制结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var age = 15;
if(age<18){
document.write("如果年纪小于18,就看 卡通");
}
</script>
<br/>
<script>
var age = 22;
if(age<18){
document.write("年纪小于18就看卡通");
}
else{
document.write("否则就看 你懂的");
}
</script>
<br/>
<script>
var age = 20;
if(age<18){
document.write("小于18就看 卡通");
}
else if(age<22){
document.write("大于等于18,并且小于22,就看 你懂的");
}
else{
document.write("大于等于22就看 新闻联播");
}
</script>
<br/>
<script>
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var today;
switch (day)
{
case 0:
today="星期天";
break;
case 1:
today="星期一";
break;
case 2:
today="星期二";
break;
case 3:
today="星期三";
break;
case 4:
today="星期四";
break;
case 5:
today="星期五";
break;
case 6:
today="星期六";
break;
}
document.write("今天是 : "+today);
</script>
</body>
</html>
7、JS自定义函数与异常处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
document.write("使用for循环打印 0 到 4<br>");
for(var i=0;i<5;i++){
p(i);
}
</script>
<br/>
<script>
document.write("使用while循环打印 0 到 4<br>");
function p(s){
document.write(s);
document.write("<br>");
}
var i = 0;
while(i<5){
p(i);
i++;
}
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
document.write("使用do-while循环打印 0 到 4<br>");
var i = 0;
do{
p(i);
i++;
} while(i<5);
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
document.write("使用for循环打印 0 到 4<br>如果发现是3,就<span style='color:red'>放弃本次循环,并且进入下一次</span>循环<br>");
for(i=0;i<5;i++){
if(i==3)
continue;
p(i);
}
</script>
<br/>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
document.write("使用for循环打印 0 到 4<br>如果发现是3,就<span style='color:red'>终止循环,循环体结束 </span><br>");
for(i=0;i<5;i++){
if(i==3)
break;
p(i);
}
</script>
<br/>
<script>
document.write("试图调用不存在的函数f2()就会报错,并且导致javascript中止执行,后面的代码也不会执行了");
function f1(){
//函数f1是存在的
}
f2(); //调用不存在的函数f2();
document.write("剩下的代码");
</script>
<br/>
<script>
function f1(){
//函数f1是存在的
}
try{
document.write("试图调用不存在的函数f2()<br>");
f2(); //调用不存在的函数f2();
}
catch(err){
document.write("捕捉到错误产生:");
document.write(err.message);
}
document.write("<p>因为错误被捕捉了,所以后续的代码能够继续执行</p>");
</script>
<br/>
</body>
</html>
8、JS数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var x = new Number(123);
document.write('数字对象x的值:'+x);
document.write("<br>");
document.write('数字对象x的类型:'+typeof x); //通过typeof 获知这是一个object
document.write("<br>");
var y = 123;
document.write('基本类型y的值:'+y);
document.write("<br>");
document.write('基本类型y的类型:'+typeof y); //通过typeof 获知这是一个number
</script>
<script>
document.write('Number对象的最小值:'+Number.MIN_VALUE);
document.write("<br>");
document.write('Number对象的最大值:'+Number.MAX_VALUE);
</script>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var a = new Number("123abc"); //通过非数字创建Number对象,得到的是一个NaN
p('通过非数字字符串"123abc"创建出来的Number对象 a的值是:'+a);
p('但是, a==Number.NaN会返回:'+(a==Number.NaN)); //即便是一个NaN 也"不等于" Number.NaN
p('正确判断是否是NaN的方式是调用isNaN函数:'+isNaN(a)); //正确的方式是通过isNaN() 函数进行判断
</script>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var a = new Number("123");
p("数字对象123通过toFixed(2) 保留两位小数:"+a.toFixed(2)); //保留两位小数点
var b = new Number("3.1415926");
p("PI 通过toFixed(3) 保留三位小数:"+b.toFixed(3));//保留三位小数点
</script>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var a = new Number("123");
p("数字对象123通过toExponential 返回计数法表达 "+a.toExponential ());
var b = new Number("3.1415926");
p("数字对象3.1415926通过toExponential 返回计数法表达 "+b.toExponential ());
</script>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var a = new Number("123");
var b = a.valueOf();
p('数字对象a的类型是: '+typeof a); //返回object
p('通过valueOf()返回的值的类型是'+typeof b); //返回number
</script>
</body>
</html>