一、JavaScript简介
1、JavaScript是一种弱类型的脚本编程语言。
2、JavaScript由三部分组成：ECMAScript、DOM、BOM。
3、ECMAScript规定了JavaScript的基础语法、数据类型。
4、DOM(Document Object Model)文档对象模型，主要用于操作html元素。
5、BOM(Browser Object Model)浏览器对象模型，用于与浏览器进行操作。
二、JavaScript的数据类型与变量
1、数据类型：string、boolean、number、null、undefined、object。
2、JavaScript的变量是弱类型的
3、声明变量的方式：var 变量名 = 变量值;
eg: var s = "hello JavaScript";
var a = 5;
var flag = true;
3、判断变量的数据类型：typeof(变量名)
4、注意：判断数据类型时typeof并不总是有效，还可以使用instanceof关键字判断。
eg：对象 instanceof Array
三、函数
1、自定义函数的声明：
function 函数名(参数...){
//函数代码（可以return）
}
调用函数的方法：函数名（参数...）;
实例：通过自定义函数实现对数据类型的判断和变量之间的计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型与变量</title>
<script type="text/javascript">
function judjeType() {
alert("Welcome to learn javascript!Start juding the data type:");//弹出警告框
var s = "hello world";
var n = 12.5;
var falg = false;
alert("变量s的数据类型是：" + typeof(s));
alert("变量n的数据类型是：" + typeof(n));
alert("变量flag的数据类型是：" + typeof(falg));
alert("undefined类型是：" + typeof(x));
}
function compute(a,b) {
alert(a+"+"+b+"="+(a+b));
return a+b;
}
</script>
</head>
<body>
<input type="button" value="判断数据类型" οnclick="judjeType()">
<input type="button" value="计算" οnclick="compute(24,55)">
</body>
</html>显示结果：
四、DOM操作HTML
可以通过document获取HTML里的元素结点（html标签），称为DOM对象。
1、document的常用方法：
getElementById("id值") 通过元素的ID获取DOM对象
geElementsByName("name值") 通过元素的name属性值获取一组元素
getElementsByTagName("tag名") 通过元素的标签名获取一组元素
2、DOM对象的常用方法：
setAttribute("属性名","属性值"); //设置DOM对象的属性
getAttribute("属性名"); //通过 属性名获取属性值
3、DOM对象的属性：
DOM对象的innerHTML属性代表DOM对象对应的html元素中包含的html内容
DOM对象的其他属性与html元素属性对应
实例：通过DOM操作HTML删除html文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除内容</title>
<script type="text/javascript">
function deleteContent() {
var flag = confirm("真的要删除嘛？");
if(flag){
var mydiv=document.getElementById("mydiv");
mydiv.innerHTML="";
}
}
</script>
</head>
<body>
<input type="button" value="点击删除" οnclick="deleteContent()">
<div id="mydiv">Good Good Study,Day Day Up!</div>
</body>
</html>显示结果：
未删除前：
删除之后：
五、BOM操作浏览器
1、window对象是BOM的顶级对象（代表浏览器）
2、location代表地址栏
常用属性：location.href='要跳转到的地址';
常用方法：location.reload(); //刷新页面
3、history代表浏览历史列表
常用方法：history.back(); //后退到上一个浏览器页面
history.go(n); //n可以为正数或负数，为正数是向前跳转，为负数是后退
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location</title>
<script type="text/javascript">
function goBaidu(){
//location隶属于window
location.href="http://www.baidu.com";
}
</script>
</head>
<body>
<input type="button" value="点击跳转至百度" οnclick="goBaidu()"><br/><br/>
<input type="button" value="刷新" οnclick="javascript:location.reload()">
</body>
</html>显示结果：
操作之前：
操作之后：
由于那个刷新比较快，不便于截图，所以这里就不放图了
六、JavaScript改变CSS样式
1、语法：
DOM对象.style.样式属性名=样式属性值
eg:
DOM对象.style.visibility="hidden"; //隐藏元素
DOM对象.style.visibility="visible"; //显示元素
实例：通过点击浏览器有颜色的区域改变颜色，并且点击按钮能控制隐藏与显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变CSS样式</title>
<link rel="stylesheet" type="text/css" href="css/mycss.css">
<script type="text/javascript" src="js/myjs.js"></script>
</head>
<body>
<div id="mydiv" οnclick="changeDiv(this)">好好学习，天天向上！</div>
<input type="button" value="隐藏" οnclick="hiddenDiv()" />
<input type="button" value="显示" οnclick="showDiv()" />
</body>
</html>CSS代码：
div{
width:200px;
height:200px;
background-color: yellow;
margin: 10px auto;
}JS代码：
var flag=true;
function changeDiv(obj){
if(flag){
obj.style.color='red';
obj.style.backgroundColor='#a1b2c3';
flag=false;
}else{
obj.style.color="black";
obj.style.backgroundColor='yellow';
flag=true;
}
}
function hiddenDiv() {
var mydiv=document.getElementById("mydiv");
mydiv.style.visibility="hidden";
}
function showDiv(){
var mydiv=document.getElementById("mydiv");
mydiv.style.visibility="visible";
}显示结果：
七、JavaScript自定义对象
方式一 ：通过Objec的构造函数从无到有地构建一个对象（“空手套白狼”方式）
var obj=new Object();
obj.name='张三'; //设置属性
obj.age=20;
obj.getName=function(){
return this.name;
}
delete obj.name; //删除对象的属性function(nmae,age){
this.name=name || '李四';
this.age=age || 18;
this.getName=function(){
this.name=name;
}
this.age=function(){
this.age=age;
}
}方式三：通过“字面量”方式定义对象
var 对象名={key1:value1,key2:value2...};
用for...in语法糖进行遍历
for(var key in per){
alert(key+"------>"+per[key]);
}
实例1：通过Object的构造函数创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过Object的构造函数创建对象</title>
<script type="text/javascript">
var per = new Object();
per.name = "张三";
per.age = 20;
per.getName=function() {
return this.name = name;
};
alert("直接获取姓名：" + per.name);
alert("通过getName获取姓名：" + per.getName())
delete per.name; //删除对象的name属性
alert(per.name);
per.sex="男";
alert(per.sex);
</script>
</head>
<body>
</body>
</html>显示结果：
实例2：通过创建函数模板创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过创加函数模板创建对象</title>
<script type="text/javascript">
function Person(name,age) {
this.name=name || '张三';
this.age=age || 18;
this.getName=function () {
return this.name;
}
this.getAge=function () {
return this.age;
}
}
var per = new Person("李四",20);
alert("姓名：" + per.name + "------>" + per.getName());
alert("年龄：" + per.age + "------>" + per.getAge());
per.home="华山";
alert("家住：" + per.home);
</script>
</head>
<body>
</body>
</html>显示结果：
实例3：通过字面量方式创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过字面量方式创建对象</title>
<script type="text/javascript">
var per = {"name":"张三","age":20,"score":90.5,"isMarried":false};
//for...in语法糖遍历对象
for(var p in per){
alert(p + "------>" + per[p]);
}
</script>
</head>
<body>
</body>
</html>显示结果：
补充：
1、eval("")可以将传入其中的原始字符串解析为JavaScript语句；
2、特别强调：eval()还可以将JSON字符串转换为JavaScript对象，转换时要加上括号。
eg: var jsonStr = "{'name':'张三','age':20}";
var per=eval("("+jsonStr+")");
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>转变JSON字符串</title>
<script type="text/javascript">
var jsonStr = '{"name":"Bob","age":20,"score":89,"isMarried":true}';
var per = eval("(" + jsonStr + ")");//通过eval()函数将json字符串转换成JS对象
alert(per.name);
eval("var s = 'hello eval';alert(s)");
</script>
</head>
<body>
</body>
</html>显示结果：
扫一扫
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
