一、基础的JavaScript
JavaScript没有任何打印或者输出的函数
JavaScript显示数据方式:
- window.alert():弹出警告窗
- document.write():将内容写到HTML文档中
- innerHTML:写入到HTML元素
- console.log():写入到浏览器控制台
1、window.alert()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window.alert()方法</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落</p>
<script>
window.alert(5+6)
</script>
</body>
</html>
2、document.write()
<!DOCTYPE html>
<html>
<head>
<title>document.write:操作HTML元素</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落</p>
<script>
document.write(Date())
</script>
</body>
</html>
3、innerHTML:写入到HTML元素
<!DOCTYPE html>
<html>
<head>
<title>inner:写入到HTML元素</title>
</head>
<body>
<h1>一级标题</h1>
<p id="demo">会改变的内容</p>
<script>
document.getElementById("demo").innerHTML="改变之后的文字"
</script>
</body>
</html>
4、console.log():写到控制台
(常常在程序调试的时候使用)
<!DOCTYPE html>
<html>
<head>
<title>console.log():写到控制台</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c)
</script>
</body>
</html>
二、变量和字面量
字面量:在编程语言中,一般固定值成为字面量。如,3.14,....,
变量:变量用于存储数据值
总结:变量是一个名称,字面量是一个值。
三、tips
1、javascript的注释:单行//,多行/* */。
2、javascript对大小写敏感
3、JavaScript语句向浏览器发出的命令,语句的作用是告诉浏览器该做什么。
4、JavaScript会自动忽视多余的空格。
5、换行问题(还没解决),将“你好”变成
“你
好”
四、JavaScript数据类型
数组:数组三种声明方式
1、var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW" ;
2、var cars = new Array("Saab",'Volvo',"BMW");
3、var cars = ["Saab","Volvo”,"BMW"]
五、JavaScript对象
1、var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
firstname : "John",
lastname : "Doe",
id : 5566
};
对象的两种寻址方式:
name=person.lastname;
name=person["lastname"];
name=person["lastname"];
2、对象的属性
- javascript对象是变量的容器
- JavaScript对象是属性变量的容器
- javascript对象是属性和方法的容器
3、对象的方法
对象的方法定义了一个函数,并作为对象的属性存储
<!DOCTYPE html>
<html>
<head>
<title>javascript对象</title>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName:"John",
lastName:"Dan",
id : 5566,
fullName:function(){
return this.firstName + " " + this.lastName
}
};
document.getElementById("demo1").innerHTML = "不加括号:" + person.fullName;
document.getElementById("demo2").innerHTML = "加括号:" + person.fullName();
</script>
</body>
</html>
通常:fullName()是作为对象的一个方法,fullName是作为一个属性
demo1输出:function(){ return this.firstName + " " + this.lastName }
demo2输出:John Dan
六、JavaScript函数
1、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript函数</title>
<script>
function myFunction(){
alert("h");
}
</script>
</head>
<body>
<script>
function myFunction(){
alert("h");
}
</script>
<button onclick="myFunction()">点击</button>
</body>
</html>
JavaScript对大小写敏感,关键词function必须是小写的,并且必须以与函数名相同的大小写来调用函数
2、带有参数的函数
function myFunction(var1,var2){}
调用:<button onclick = "myFunction("Harry","Wizz")">点击</button>
3、带有返回值的函数
function myFunction(a,b){
return a*b
}
调用:document.getElementById("demo").innerHTML = myFunction(3,4);
4、JavaScript中的变量
局部JavaScript变量:在函数内部声明(var)的变量,只能在函数内部访问它()该变量的作用域是局部的,函数运行结束,变量就会删除
全局变量:在函数外声明的变量,作用域整个程序
七、JavaScript事件
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onclick="getElementById('demo1').innerHTML = Date()">时间1</button>
<p id="demo1"></p>
<button onclick="this.innerHTML=Date()">时间2</button>
<button onclick="disPlay()">点击</button>
<p id="demo2"></p>
<script>
function disPlay(){
return document.getElementById("demo2").innerHTML = Date();
}
</script>
</body>
</html>
HTML事件是发生在HTML元素上的事情,当在HTML页面中使用JavaScript时,JavaScript可以触发这些事件。
八、JavaScript中的循环
1、break和continue:
break用于调出循环,整个循环结束
continue用于错过这轮循环,比如i= 3 时continue,则i= 4 的循环还是可以循环。
2、JavaScript标签
可以对JavaScript语句进行标记(类似汇编语言?)
九、JavaScript类型转换
利用typeof操作符来查看变量的数据类型
1、转换成字符串的两种方法
String(x)和x.toString()
2、一元运算符+
一元运算符可用于将变量转换成数字
var x = "5";//x是字符串
var y = + x;//y是数字
如果变量不能转换为数字,他仍是一个数字类型,但内容为null
var x = "John";
var y = + x;//y为null
十、JavaScript表单验证
表单验证:判断表单字段值是否存在,如果不存在就弹出信息,阻止表单提交;