1.基本用法
JavaScript函数
1.1 概述
函数可以把代码封装起来，并且可以重复调用，完成特定功能的代码块1.2 函数分类
1.2.1 系统函数
"alert(123)";
eval(<表达式>：将其中的参数字符串作为一个javascript表示式进行执行并返回结果。
parseInt("字符串")：将字符串转换为整型数字parseFloat("字符串")：将字符串转换为浮点型数字
isNaN()：判断参数是否是NaN(不是数字),如果是NaN,那么isNaN函数返回true,否则返回false。
1.2.2 自定义函数
（1）无参函数
function 函数名(){
//javascript代码;
}
（2）有参函数
function 函数名(参数1,参数2,...){
//javascript代码;
}
（3）带返回值函数（无参）
function 函数名(){
return 返回值或变量;
}（4）带返回值函数（有参）
function 函数名(参数1,参数2,...){
return 返回值或变量;
}1.2.3 自定义函数的定义方式
（1）显示定义 function xxxName(){}
（2）匿名定义 var method = function(){}
（3）Function定义 var calSum3 = new Function('num1', 'num2', 'return num1 + num2');1.2.4 自定义函数的调用方式
（1）外部调用 HTML标签上
（2）内部调用 类似Java
（3）函数调用函数BOM编程（Browser Object Model）
3.1 BOM概述
（1）BOM（Browser Object Model）即浏览器对象模型。
（2）BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
（3）由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
（4）BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
（5）BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。【结构图分析】
window：代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象），作用：移动、调整浏览器大小
location： 代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息
history：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作（出于对用户的隐私考虑，我们只能拿到当前的浏览记录，不能拿到所有的历史记录）
navigator：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器
screen：代表用户的屏幕信息
document：访问HTML文档的入口3.2 常用方法：
prompt: 显示可提示用户输入的对话框
alert: 显示带有提示信息和确定按钮的对话框
confirm: 显示一个带有提示信息、确定和取消的对话框
--window.open("1.html");//打开新的指定页面 【注意路径级别】
--location.href("1.html");//不打开新页面的前提下直接进入新页面
--location.reload();//刷新当前页面
--window.close();//关闭当前页面
--history.back();//返回 必须有历史记录 history.go(-1)
--history.forward();//前进 必须有历史记录 history.go(1)setTimeout: 指定的延迟时间之后来执行代码（一次性计时器）
setInterval: 每隔指定的时间执行代码（间隔性触发计时器）清除设置的定时器方法
clearInterval():清除setInterval()设置的定时器
clearTimeout():清除setTimeout()设置的定时器3.3 常用事件：
onload：一个页面或一个图像完成加载
onmouseover：鼠标移到某元素之上
onclick：点击对象
onkeydown：某个按键按下
onchange：域的内容被改变四、匿名调用函数
匿名函数：没有名字的函数。例1：
onload()
①<body οnlοad="myf()">//直接放在body里 等body加载完毕后才执行②function test(){
alert("哈哈哈");
}
window.οnlοad=test;③window.οnlοad=function(){
alert("哈哈哈");匿名函数
}
五、时间对象
Date对象：时间对象、日期对象。格式：
var 日期对象=new Date(参数)
//获得当前日期，参数格式：MM DD,YYYY,hh:mm:ss:ms案例：
var today=new Date(); //返回当前日期和时间
var tdate=new Date("september 1,2015,12:23:33");Date对象的方法：
setXxx：设置时间
getXxx：得到时间
Xxx包括：
FullYear: 当前年
Month: 0~11（一月至十二月）
Day: 0~6（星期几）
Date: 1~31
Hours: 0~23
Seconds和Minutes:0~59案例：
var today=new Date(); //获取当前时间
var year=today.getFullYear(); //得到年
var month=today.getMonth(); //得到月
var day=today.getDay(); //得到星期几
var date=today.getDate(); //得到日
var hh=today.getHours(); //得到时
var mm=today.getMinutes(); //得到分
var ss=today.getSeconds(); //得到秒
//将字符串的值写入到html中某个ID中
var dd=year+"年"+month+"月"+date+"日";
var da=document.getElementById("da");
da.innerHTML=dd; //innerHTML获取对象的内容或向对象插入内容
让时间一直在显示：setInterval()方法function mm(){
//每隔1秒自动执行
setInterval("函数名",1000);
//等待1秒后执行一次setTimeout("函数名",1000);
}六、数学函数Math
Math.abs(x) //返回数的绝对值
Math.ceil(x) //返回比x大的最小整数 Math.ceil(34.5)--35
Math.floor(x) //返回比x小的最大整数 Math.floor(34.5)--34
Math.random() //返回0~1之间的随机数
Math.round(x) //四舍五入取整
Math.sqrt(x) //返回数的平方根
2.简易计算器的制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//封装一个函数:根据id返回其对应的标签
function $(id){
return document.getElementById(id);
}
//实现加法运算
function add(type){
//获取第一个输入框和第二个输入框中的value值
var num1 = $('num1').value;
var num2 = $('num2').value;
//获取到第三个输入项的值
var num3 = $('num3');
// console.log(num1,num2);
//判断非空
// if(num1.trim().length == 0 || num1.trim() == ''){
// alert("不能为空");
// }
// 终极写法 非空判断
if(!num1 || !num2){
alert('不能为空');
}else{//不为空
//根据isNaN判断是否为非数字
if(!isNaN(num1) && !isNaN(num2)){
var sum = 0;
//判断参数type的结果到底是+ - * /
if(type === '+'){
sum = parseFloat(num1)+parseFloat(num2);
}else if(type === '-'){
sum = parseFloat(num1)-parseFloat(num2);
}else if(type === '*'){
sum = parseFloat(num1)*parseFloat(num2);
}else if(type === '/'){
sum = parseFloat(num1)/parseFloat(num2);
}
//将加法运算的结果赋值给第三个输入项
num3.value = sum;
}else{
alert('输入项中的内容不符合要求');
}
}
};
</script>
</head>
<body>
<h3>史上最Low计算器</h3>
<hr>
第一个数字 <input id="num1" type="text">
<br>
第二个数字 <input id="num2" type="text">
<br>
<button onclick = "add(this.innerHTML);">+</button>
<button onclick = "add('-');">-</button>
<button onclick = "add('*');">*</button>
<button onclick = "add('/');">/</button>
<br>
结果 <input id="num3" type="text">
</body>
</html>定时器 的基本使用与open打开与关闭网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//BOM---window对象
//代表整个窗口
//alert()confirm() prompt();
//可以根据window调用,当然可以省略
// alert(123);
// window.alert(123);
// 在script标签中所定义的任意全局属性以及任意全局方法 都会默认成为window部分之一.
// var sb = 123;
// alert(window.sb);
//open();打开一个新窗口
function myOpen(){
//点击按钮打开新窗口:4399
// window.open("http://www.4399.com");
window.open("http://www.baidu.com","low",'height=400,width=500');
}
//关闭网页
function myClose(){
var flag = window.confirm('你确定要分手吗?');
if(flag){
window.close();
}
}
// window对象的定时器==倒计时|轮播器|时钟
// setTimeout(回调函数,毫秒值)---一次性
// setInterval()---循环性
//clearTimeout(定时器);清除定时器
//clearInterval();清除定时器
//
//案例:3秒后执行1次好好学习
var timer = window.setTimeout(function(){
console.log('好好学习')
},3000);
//在2秒时 手动停止
function myClearTimeout(){
console.log("我点击了停止");
window.clearTimeout(timer);
}
//封装一个函数:根据id返回其对应的标签
function $(id){
return document.getElementById(id);
}
//对于非表单元素而言,获取其标签中的文本内容通过innerHTML
function sendMessage(){
var oBtn = $('oBtn');
// 禁用标签
oBtn.disabled = true;
var date = 3;//10秒
//定时器
var timer = window.setInterval(function(){
//判断
if(date == 0){
oBtn.disabled = false;//启用
oBtn.innerHTML = '发送短信';
date = 3;
//停止定时器
window.clearInterval(timer);
}else{//date不为0
oBtn.innerHTML = date;
date--;
}
},1000);
}
</script>
</head>
<body>
<button onclick="myOpen();">open演示</button>
<button onclick="myClose();">close演示</button>
<hr>
<button onclick="myClearTimeout();">停止clearTiemout定时器</button>
<hr>
<input type="text">
<button id="oBtn" onclick="sendMessage();">发送短信</button>
</body>
</html>window中得加载事件的使用 等body中代码执行完后再执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// HTML网页的执行流程:从上往下 从左往右依次执行
// window对象的特殊事件--加载事件(onload)
// script标签的位置:head标签中 body标签中
// 需求:根据id属性获取div标签(body中 没有问题)
// var oDiv = document.getElementById("oDiv");
// console.log(oDiv.innerHTML);
//针对上面的获取问题 解决方案 加载事件
//
//加载事件的目的:等网页的所有内容全部加载完毕后,onload加载事件中的逻辑才会去执行.
//
//注意事项:一个网页中只能编写一个onload加载事件
window.onload = function(){
var oDiv = document.getElementById("oDiv");
console.log(oDiv.innerHTML);
};
// window.onload = function(){
// alert(123);
// };
// 手动添加事件方法
//少用
window.addEventListener('load',function(){
console.log(123);
});
window.addEventListener('load',function(){
console.log(456);
});
// $(function(){}); jQuery的加载函数 可以写多个
</script>
</head>
<body>
<div id="oDiv">
我是div标签内容
</div>
<script type="text/javascript">
// var oDiv = document.getElementById("oDiv");
// console.log(oDiv.innerHTML);
</script>
</body>
</html>history 历史记录前进与后退 的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- js --> <script type="text/javascript"> // history 历史记录 (前进 后退) function next(){ history.forward();//前进 } </script> </head> <body> <h1>demo7.html</h1> <a href="demo8.html">跳转到下一章节</a> <button onclick="next();">前进</button> </body> </html>后退
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function back(){ history.back(); } </script> </head> <body> <h1>demo8.html</h1> <a href="demo7.html">返回上一章节</a> <button onclick="back();">后退</button> </body> </html>
扫一扫
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
