Java学习---JavaScript
2018-03-08 17:20
381 查看
概述：
JavaScript简介
JavaScript的数据类型与变量
函数
DOM操作HTML
BOM操作浏览器
JavaScript改变CSS样式
JavaScript自定义对象
函数深入用法
函数的参数
JavaScript的内置对象
一：JavaScript介绍
1.JavaScript是一种弱类型的脚本编程语言。
JavaScript由三部分组成：ECMAScript、DOM、BOM。
ECMAScript规定了JavaScript的基础语法、数据类型。
DOM(Document Object Model)文档对象模型，主要用于操作HTML元素。
BOM(Browser Object Model)浏览器对象模型,用于与浏览器进行操作
2：JavaScript的数据类型与变量
数据类型：string、boolean、number、null、undefined、object。
JavaScript的变量是弱类型的
声明变量的方式： var 变量名=变量值;
eg: var s="hello javascript";
var a=5;
var flag=true;
判断变量的数据类型：typeof(变量名)
注意：判断数据类型时typeof并不总是有效，还可以使用instanceof关键字判断。
eg: 对象 instanceof Array
3.函数
自定义函数的声明： function 函数名(参数...){
// 函数代码(可以return)
}
调用函数的方法：函数名(参数...);
二：DOM操作HTML
可以通过document获取HTML里的元素节点(html标签)，称为DOM对象。
1. document的常用方法：
getElementById(“id值”) //通过元素的ID获取DOM对象
getElementsByName("name值") //通过元素的name属性值获取一组元素
getElementsByTagName("tag名") //通过元素的标签名获取一组元素
2.DOM对象的常用方法：
setAttribute("属性名","属性值"); // 设置DOM对象的属性
getAttribute("属性名");
3.DOM对象的属性：DOM对象的 innerHTML属性代表DOM对象对应的 html元素中包含的html内容
DOM对象的其他属性与html元素中的属性对应
三：BOM操作浏览器
1.window对象是BOM的顶级对象( 代表浏览器)
2.location代表地址栏
常用属性： location.href='要跳转到的地址';
常用方法： location.reload() 刷新页面
3.history代表浏览历史列表
常用方法：history.back(); // 后退到上一个浏览页面
history.go(n); // n可以为正数或负数
四：JavaScript改变CSS样式
语法： 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" onclick="changeDiv(this)">好好学习，天天向上！</div>
<input type="button" value="隐藏" onclick="hiddenDiv()">
<input type="button" value="显示" onclick="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='#aabbcc';
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自定义对象
1. 方式一：通过Object的构造函数从无到有地构建一个对象(“空手套白狼”方式)
var obj=new Object();
obj.name='张三'; // 设置属性
obj.age=20;
obj.getName=function(){
return this.name;
}
delete obj.name; // 删除对象的属性
2. 方式二：通过定义一个函数作为“模板”，实例化一个对象
eg: function Person(name,age){
this.name=name || '令狐冲';
this.age=age || 18;
this.getName=function(){
return this.name;
}
this.getAge=function(){
return this.age;
}
3. 方式三：通过“字面量”方式定义对象
var 对象名={key1:value1,key2:value2...};
遍历对象 : for...in语法糖
for(var key in per){
alert(key+"======>"+per[key]);
}
补充： eval(“”)可以将传入其中的原始字符串解析为JavaScript语句；
特别强调：eval()还可以将JSON字符串转换为JavaScript对象，转换时要加上括号
eg: var jsonStr=“{‘name’:’张三’,’age’:20}”;
var per=eval("("+jsonStr+")");
六：函数深入用法
1.将函数赋给一个变量
function func(a,b){
return a*b;
}
var x=func;
eg.function giveAnother(){
function func(){
var a=100;
var b=200;
alert(a+b);
}
var x=func; // 将函数赋给一个变量
x();
}
2.将函数赋给对象的属性
function asAttribute(){
var per={};
// 将函数赋给对象的属性
per.say=function (){
var div=document.getElementById("saydiv");
div.innerHTML="<h3>你好，我正在学习JavaScript...</h3>";
};
per.say();
}
3. 将函数作为参数传递给另一个函数(高阶函数)
// f参数可以接收另一个函数
function highFunc(s,f){
return f(s);
}
// 该函数可以将传入的字符串转换为大写形式
function upper(a){
return a.toUpperCase();
}
function okFunc(){
var result=highFunc("hello world",upper);
alert("高阶函数的调用结果是："+result);
}<
b32b
br />
4.将函数作为返回值
“闭包”是指内层函数可以贮存外层函数的局部变量或参数。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包的应用</title>
<script type="text/javascript">
var array=[];
function outer(){
var a=["apple","banana","orange","watermelon"];
for(var i=0;i<a.length;i++){
var x={};
x.index=i;
x.name=a[i];
x.func=function (){
alert(i);
};
array.push(x);
}
}
outer();
for(var j=0;j<array.length;j++){
array[j].func();
}
</script>
</head>
<body></body>
</html>
运行结果：弹出四个显示数字为“4”的警告框，这是因为当遍历集合时，因为集合中有四个对象，索引为0~3，而当内部函数for循环结束时，i++，返回给外函数的是四个已遍历循环完成的结果，所以不会出现0,1,2,3.
七：函数的参数
JavaScript中传递给函数的参数是通过arguments对象来保存的。
arguments对象有length属性，可以根据此属性得知实际调用时传递参数的个数，也可以通过下标操作符来获取arguments中的元素
八：JavaScript的内置对象
1. String
常用属性：length //返回字符串的长度
常用方法：toUpperCase() //将字母变为大写
toLowerCase() //将字母变为小写
indexOf("子字符串") //返回子字符串所在的索引
lastIndexOf("子字符串")
charAt(index) //获取索引为index的字符
substring(beginIndex) //截取字符串
substring(beginIndex,endIndex) //截取字符串（左开右闭）
2.Math内置对象
常用属性：PI 圆周率
常用方法：Math.random() //获取0.0到1.0之间的 随机数
Math.pow(a,b) //a的b次方
Math.sqrt(num) //求某个数的平方根
Math.ceil(num) //上舍入
Math.floor(num) //下舍入
Math.round(num) // 四舍五入
3.Array内置对象
声明数组的方式： var 数组名称=[元素1,元素2,元素3...];
JS中数组的特性： a.可以存储不同的数据类型的元素。
b.数组的长度可变。
c.数组的索引可以是数字，也可以是字符串。
数组的属性：length (长度属性可以变化)
数组的方法：push(元素); //将元素添加到数组中
pop(元素)； //弹出一个元素
注意：给数组添加元素的另一种方式：数组名[索引]=元素
遍历数组： for...in语法糖
for(var index in array){
// array[index] 当前遍历到的元素
}
4.Date内置对象 var date=new Date();
常用方法：getFullYear(); // 获取年
getMonth(); // 获取月
getDate(); // 获取一个月中的第几天
getDay(); // 获取一周中的第几天
getHours(); // 获取时
getMinutes(); // 获取分
getSeconds(); // 获取秒
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态时钟</title>
<script type="text/javascript">
function showTime(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var day=date.getDate();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
var div=document.getElementById("clock");
div.innerHTML="<h3>现在时间是："+year+"-"+(month+1)+"-"+day+" "+hour+":"+minute+":"+second+"</h3>";
}
setInterval("showTime()",1000); // 每隔1秒，定时调用指定函数
</script>
</head>
<body>
<hr/>
<div id="clock">~~~~</div>
<hr/>
</body>
</html>
运行结果：
JavaScript简介
JavaScript的数据类型与变量
函数
DOM操作HTML
BOM操作浏览器
JavaScript改变CSS样式
JavaScript自定义对象
函数深入用法
函数的参数
JavaScript的内置对象
一：JavaScript介绍
1.JavaScript是一种弱类型的脚本编程语言。
JavaScript由三部分组成：ECMAScript、DOM、BOM。
ECMAScript规定了JavaScript的基础语法、数据类型。
DOM(Document Object Model)文档对象模型，主要用于操作HTML元素。
BOM(Browser Object Model)浏览器对象模型,用于与浏览器进行操作
2：JavaScript的数据类型与变量
数据类型：string、boolean、number、null、undefined、object。
JavaScript的变量是弱类型的
声明变量的方式： var 变量名=变量值;
eg: var s="hello javascript";
var a=5;
var flag=true;
判断变量的数据类型：typeof(变量名)
注意：判断数据类型时typeof并不总是有效，还可以使用instanceof关键字判断。
eg: 对象 instanceof Array
3.函数
自定义函数的声明： function 函数名(参数...){
// 函数代码(可以return)
}
调用函数的方法：函数名(参数...);
二：DOM操作HTML
可以通过document获取HTML里的元素节点(html标签)，称为DOM对象。
1. document的常用方法：
getElementById(“id值”) //通过元素的ID获取DOM对象
getElementsByName("name值") //通过元素的name属性值获取一组元素
getElementsByTagName("tag名") //通过元素的标签名获取一组元素
2.DOM对象的常用方法：
setAttribute("属性名","属性值"); // 设置DOM对象的属性
getAttribute("属性名");
3.DOM对象的属性：DOM对象的 innerHTML属性代表DOM对象对应的 html元素中包含的html内容
DOM对象的其他属性与html元素中的属性对应
三：BOM操作浏览器
1.window对象是BOM的顶级对象( 代表浏览器)
2.location代表地址栏
常用属性： location.href='要跳转到的地址';
常用方法： location.reload() 刷新页面
3.history代表浏览历史列表
常用方法：history.back(); // 后退到上一个浏览页面
history.go(n); // n可以为正数或负数
四：JavaScript改变CSS样式
语法： 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" onclick="changeDiv(this)">好好学习，天天向上！</div>
<input type="button" value="隐藏" onclick="hiddenDiv()">
<input type="button" value="显示" onclick="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='#aabbcc';
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自定义对象
1. 方式一：通过Object的构造函数从无到有地构建一个对象(“空手套白狼”方式)
var obj=new Object();
obj.name='张三'; // 设置属性
obj.age=20;
obj.getName=function(){
return this.name;
}
delete obj.name; // 删除对象的属性
2. 方式二：通过定义一个函数作为“模板”，实例化一个对象
eg: function Person(name,age){
this.name=name || '令狐冲';
this.age=age || 18;
this.getName=function(){
return this.name;
}
this.getAge=function(){
return this.age;
}
3. 方式三：通过“字面量”方式定义对象
var 对象名={key1:value1,key2:value2...};
遍历对象 : for...in语法糖
for(var key in per){
alert(key+"======>"+per[key]);
}
补充： eval(“”)可以将传入其中的原始字符串解析为JavaScript语句；
特别强调：eval()还可以将JSON字符串转换为JavaScript对象，转换时要加上括号
eg: var jsonStr=“{‘name’:’张三’,’age’:20}”;
var per=eval("("+jsonStr+")");
六：函数深入用法
1.将函数赋给一个变量
function func(a,b){
return a*b;
}
var x=func;
eg.function giveAnother(){
function func(){
var a=100;
var b=200;
alert(a+b);
}
var x=func; // 将函数赋给一个变量
x();
}
2.将函数赋给对象的属性
function asAttribute(){
var per={};
// 将函数赋给对象的属性
per.say=function (){
var div=document.getElementById("saydiv");
div.innerHTML="<h3>你好，我正在学习JavaScript...</h3>";
};
per.say();
}
3. 将函数作为参数传递给另一个函数(高阶函数)
// f参数可以接收另一个函数
function highFunc(s,f){
return f(s);
}
// 该函数可以将传入的字符串转换为大写形式
function upper(a){
return a.toUpperCase();
}
function okFunc(){
var result=highFunc("hello world",upper);
alert("高阶函数的调用结果是："+result);
}<
b32b
br />
4.将函数作为返回值
“闭包”是指内层函数可以贮存外层函数的局部变量或参数。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包的应用</title>
<script type="text/javascript">
var array=[];
function outer(){
var a=["apple","banana","orange","watermelon"];
for(var i=0;i<a.length;i++){
var x={};
x.index=i;
x.name=a[i];
x.func=function (){
alert(i);
};
array.push(x);
}
}
outer();
for(var j=0;j<array.length;j++){
array[j].func();
}
</script>
</head>
<body></body>
</html>
运行结果：弹出四个显示数字为“4”的警告框，这是因为当遍历集合时，因为集合中有四个对象，索引为0~3，而当内部函数for循环结束时，i++，返回给外函数的是四个已遍历循环完成的结果，所以不会出现0,1,2,3.
七：函数的参数
JavaScript中传递给函数的参数是通过arguments对象来保存的。
arguments对象有length属性，可以根据此属性得知实际调用时传递参数的个数，也可以通过下标操作符来获取arguments中的元素
八：JavaScript的内置对象
1. String
常用属性：length //返回字符串的长度
常用方法：toUpperCase() //将字母变为大写
toLowerCase() //将字母变为小写
indexOf("子字符串") //返回子字符串所在的索引
lastIndexOf("子字符串")
charAt(index) //获取索引为index的字符
substring(beginIndex) //截取字符串
substring(beginIndex,endIndex) //截取字符串（左开右闭）
2.Math内置对象
常用属性：PI 圆周率
常用方法：Math.random() //获取0.0到1.0之间的 随机数
Math.pow(a,b) //a的b次方
Math.sqrt(num) //求某个数的平方根
Math.ceil(num) //上舍入
Math.floor(num) //下舍入
Math.round(num) // 四舍五入
3.Array内置对象
声明数组的方式： var 数组名称=[元素1,元素2,元素3...];
JS中数组的特性： a.可以存储不同的数据类型的元素。
b.数组的长度可变。
c.数组的索引可以是数字，也可以是字符串。
数组的属性：length (长度属性可以变化)
数组的方法：push(元素); //将元素添加到数组中
pop(元素)； //弹出一个元素
注意：给数组添加元素的另一种方式：数组名[索引]=元素
遍历数组： for...in语法糖
for(var index in array){
// array[index] 当前遍历到的元素
}
4.Date内置对象 var date=new Date();
常用方法：getFullYear(); // 获取年
getMonth(); // 获取月
getDate(); // 获取一个月中的第几天
getDay(); // 获取一周中的第几天
getHours(); // 获取时
getMinutes(); // 获取分
getSeconds(); // 获取秒
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态时钟</title>
<script type="text/javascript">
function showTime(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var day=date.getDate();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
var div=document.getElementById("clock");
div.innerHTML="<h3>现在时间是："+year+"-"+(month+1)+"-"+day+" "+hour+":"+minute+":"+second+"</h3>";
}
setInterval("showTime()",1000); // 每隔1秒，定时调用指定函数
</script>
</head>
<body>
<hr/>
<div id="clock">~~~~</div>
<hr/>
</body>
</html>
运行结果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java正则表达式学习总结，以及和javascript正则表达式的区别
- 黑马程序员--Java学习笔记之Web开发—JavaScript常用触发事件总结
- Java程序员的JavaScript学习笔记（1——理念）
- [原]Java程序员的JavaScript学习笔记（1——理念）
- Java程序员的JavaScript学习笔记（3——this/call/apply）
- Java程序员的JavaScript学习笔记（2——属性复制和继承）
- JavaScript学习笔记——事件（转自：http://www.blogjava.net/amigoxie/archive/2007/08/27/139711.html）
- Java程序员的JavaScript学习笔记（5——prototype和Object内置方法）
- Java程序员的JavaScript学习笔记（7——jQuery基本机制）
- [原]Java程序员的JavaScript学习笔记（6——面向对象模拟）
- Java程序员的JavaScript学习笔记（8——jQuery选择器）
- Java程序员的JavaScript学习笔记（9—— jQuery工具方法）
- [原]Java程序员的JavaScript学习笔记（9—— jQuery工具方法）
- [原]Java程序员的JavaScript学习笔记（3——this/call/apply）
- java 从零开始，学习笔记之基础入门<javascript>（三十）
- [原]Java程序员的JavaScript学习笔记（7——jQuery基本机制）
- 黑马程序员------java学习笔记之javascript
- [原]Java程序员的JavaScript学习笔记（5——prototype和Object内置方法）
- Java学习 - JavaScript控制flash操作 兼容IE FF
- 21天学通Java学习笔记-Day13(javascript-ajax)