JavaScript基础(三)
1. Javascript组成
1、ECMAscript javascript的语法(变量、函数、循环语句等语法)
2、DOM 文档对象模型 操作html和css的方法
3、BOM 浏览器对象模型 操作浏览器的一些方法
2. 字符串处理方法
1、字符串合并操作:“ + ” | 2、parseInt() 将数字字符串转化为整数 | 3、parseFloat() 将数字字符串转化为小数 |
var iNum01 = 12; var iNum02 = 24; var sNum03 = '12'; var sTr = 'abc'; alert(iNum01+iNum02); //弹出36 alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加 alert(sNum03+sTr); // 弹出12abc |
var sNum01 = '12'; var sNum02 = '24'; var sNum03 = '12.32'; alert(sNum01+sNum02); //弹出1224 alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36 alert(sNum03) //弹出数字12 将字符串小数转化为数字整数 |
var sNum03 = '12.32' alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数 |
4、split() 把一个字符串分隔成字符串组成的数组 | 5、charAt() 获取字符串中的某一个字符 | 6、indexOf() 查找字符串是否含有某字符 |
var sTr = '2017-4-22'; var aRr = sTr.split("-"); var aRr2= sTr.split(""); alert(aRr); //弹出['2017','4','2'] alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2'] |
var sId = "#div1"; var sTr = sId.charAt(0); alert(sTr); //弹出 # |
var sTr = "abcdefgh"; var iNum = sTr.indexOf("c"); alert(iNum); //弹出2 |
7、substring() 截取字符串 用法: substring(start,end)(不包括end) | 8、toUpperCase() 字符串转大写 | 9、toLowerCase() 字符串转小写 |
var sTr = "abcdefghijkl"; var sTr2 = sTr.substring(3,5); var sTr3 = sTr.substring(1); alert(sTr2); //弹出 de alert(sTr3); //弹出 bcdefghijkl |
var sTr = "abcdef"; var sTr2 = sTr.toUpperCase(); alert(sTr2); //弹出ABCDEF |
var sTr = "ABCDEF"; var sTr2 = sTr.toLowerCase(); alert(sTr2); //弹出abcdef |
字符串反转 |
var str = 'asdfj12jlsdkf098'; var str2 = str.split('').reverse().join(''); alert(str2); |
3. 类型转换
1、直接转换 parseInt() 与 parseFloat() | 2、隐式转换 “==” 和 “-” | 3、NaN 和 isNaN |
alert('12'+7); //弹出127 alert( parseInt('12') + 7 ); //弹出19 alert( parseInt(5.6)); // 弹出5 alert('5.6'+2.3); // 弹出5.62.3 alert(parseFloat('5.6')+2.3); // 弹出7.8999999999999995 alert(0.1+0.2); //弹出 0.3000000000000004 alert((0.1*100+0.2*100)/100); //弹出0.3 alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9 |
if('3'==3) { alert('相等'); } // 弹出'相等' alert('10'-3); // 弹出7 |
alert( parseInt('123abc') ); // 弹出123 alert( parseInt('abc123') ); // 弹出NaN |
课堂练习:
制作一个计算器,可以计算加、减、乘、除,用户输入非数字或者置空可以提示
4.调试程序的方法
1、alert
2、console.log
3、document.title
5. 定时器
5.1定义:
定时器就是在一段特定的时间后执行某段程序代码
定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流
5.2. 定时器的使用:
js 定时器有两种创建方式:
- setTimeout(func[, delay, param1, param2, ...]) :以指定的时间间隔(以毫秒计)调用一次函数的定时器
- setInterval(func[, delay, param1, param2, ...]) :以指定的时间间隔(以毫秒计)重复调用一个函数的定时器
setTimeout函数的参数说明:
|
setInterval函数的参数说明:
|
/* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器 */ var time1 = setTimeout(myalert,2000); var time2 = setInterval(myalert,2000); /* clearTimeout(time1); clearInterval(time2); */ function myalert(){ alert('ok!'); } |
课堂练习:
1、定时器制作移动动画
2、定时器制作无缝滚动
3、定时器制作时钟 | 4、定时器制作倒计时 |
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); function timego(){ var now = new Date(); var year = now.getFullYear(); var month = now.getMonth()+1; var date = now.getDate(); var week = now.getDay(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var str = '当前时间是:'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second); oDiv.innerHTML = str; } timego(); setInterval(timego,1000); } function toweek(n){ if(n==0) { return '星期日'; } else if(n==1) { return '星期一'; } else if(n==2) { return '星期二'; } else if(n==3) { return '星期三'; } else if(n==4) { return '星期四'; } else if(n==5) { return '星期五'; } else { return '星期六'; } } function todou(n){ if(n<10) { return '0'+n; } else { return n; } } </script> ...... <div id="div1"></div>
|
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); function timeleft(){ var now = new Date(); var future = new Date(2016,8,12,24,0,0); var lefts = parseInt((future-now)/1000); var day = parseInt(lefts/86400); var hour = parseInt(lefts%86400/3600); var min = parseInt(lefts%86400%3600/60); var sec = lefts%60; str = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒'; oDiv.innerHTML = str; } timeleft(); setInterval(timeleft,1000); } </script> ...... <div id="div1"></div>
|
6.变量作用域
6.1. 变量作用域的介绍
变量作用域就是变量的使用范围,变量分为:
- 局部变量
- 全局变量
局部变量就是在函数内使用的变量,只能在函数内部使用。 | 全局变量就是在函数外定义的变量,可以在不同函数内使用。 |
<script type="text/javascript"> function myalert() { // 定义局部变量 var b = 23; alert(b); } myalert(); // 弹出23 alert(b); // 函数外使用出错 </script> |
<script type="text/javascript"> // 定义全局变量 var a = 12; function myalert() { // 修改全局变量 a++; } myalert(); alert(a); // 弹出13 </script> |
<script type="text/javascript"> //全局变量 var a = 12; function myalert() { //局部变量 var b = 23; alert(a); alert(b); } myalert(); //弹出12和23 alert(a); //弹出12 alert(b); //出错 </script> |
7. 封闭函数
封闭函数是javascript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数
一般定义的函数和执行函数: |
function myalert(){ alert('hello!'); }; myalert(); |
封闭函数: |
(function myalert(){ alert('hello!'); })(); |
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数 |
!function myalert(){ alert('hello!'); }() |
封闭函数的好处:
封闭函数可以创造一个独立的空间,在封闭函数内定义的变量和函数不会影响外部同名的函数和变量,可以避免命名冲突,在页面上引入多个js文件时,用这种方式添加js文件比较安全,比如:
var iNum01 = 12; function myalert(){ alert('hello!'); } (function(){ var iNum01 = 24; function myalert(){ alert('hello!world'); } alert(iNum01); myalert() })() alert(iNum01); myalert(); |
8.常用内置对象
1、document | 2、location | 3、Math |
document.getElementById //通过id获取元素 document.getElementsByTagName //通过标签名获取元素 document.referrer //获取上一个跳转页面的地址(需要服务器环境) |
window.location.href //获取或者重定url地址 window.location.search //获取地址参数部分 window.location.hash //获取页面锚点或者叫哈希值 课堂练习 |
Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
课堂练习 |