03.JavaScript语法中
2017-09-29 15:33
381 查看
一.字符串处理方法
1、字符串合并操作：“ + ”
var name = 'Tom';
var age = 18;
//弹出"我的名字叫做Tom，我的年龄是18岁"
alert('我的名字叫做'+ name +',我的年龄是'+age+'岁；' );2、parseInt() 将数字字符串转化为整数
var a = 12; var b = '23'; alert(parseInt(a)+parseInt(b));
3、parseFloat() 将数字字符串转化为小数
var a = 5.6; var b = 4.2; var c = 0.1; var d = 0.2; alert(parseFloat(a)+parseFloat(b)); // alert(parseFloat(c)+parseFloat(d));弹出0.30000000004 // 相加等于0.30000000004的问题，解决方法是先乘以100，再除以100 alert((parseFloat(c)*100+parseFloat(d)*100)/100);
4、split() 把一个字符串分隔成字符串组成的数组
var sTr = '2016-12-5';
var aRr = sTr.split('-');
// alert(typeof(aRr));
for (var i=0;i<aRr.length;i++) {
alert(aRr[i]);//依次弹出2016，12，5
}5、charAt() 获取字符串中的某一个字符
var sTr1 = '#div1'; var sTr2 = sTr1.charAt(0); alert(sTr2);//弹出#
6、indexOf() 查找字符串是否含有某字符
var sTr = 'Microsoft yahei';
var num1 = sTr.indexOf('yahei');
alert(num); //找到就弹出字符串出现的位置：10，从0开始数
var num2 = sTr.indexOf('xihei');
alert(num2); //没有找到就弹出 -17、substring() 截取字符串 用法： substring(start,end)（不包括end）
8、toUpperCase() 字符串转大写
9、toLowerCase() 字符串转小写
var sTr1="abcdefghijklmn" var sTr2 = sTr1.substring(10); //从第10个截到结尾,从0开始数 alert(sTr2);//弹出klmn alert(sTr2.toUpperCase());//弹出KLMN
10、字符串反转
var str = '12345';
var str2 = str.split('').reverse().join('-');
alert(str2)//弹出1-2-3-4-5二、调试程序的方法
1、alert之前经常使用的，弹出对话框的功能
2、console.log
<script type="text/javascript">
console.log("123");
</script>
二、定时器
定时器在javascript中的作用1、制作动画
2、异步操作
3、函数缓冲与节流
定时器类型及语法
setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器
一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var time1 = setTimeout(myalert,2000);//每隔2秒弹出一个对话框
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
</script>
</body>
</html>定时器制作时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1"></div>
<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 '星期六';
}
}
//如果是个位数，则补上一个0
function todou(n){
if(n<10)
{
return '0'+n;
}
else
{
return n;
}
}
</script>
</body>
</html>
定时器制作倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body >
<h2>剩余时间:</h2>
<div id="timer"></div>
<script language="javascript" type="text/javascript">
window.onload=function(){
function leftTimer(){
var leftTime = (new Date(2017,8-1,28,16,20,00)) - (new Date()); //计算剩余的毫秒数
var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
document.getElementById("timer").innerHTML ='距离2017年8月28日晚16点还剩下'+days+'天'+hours+'时'+minutes+'分'+seconds+'秒';;
}
function checkTime(i){ //将0-9的数字前面加上0，例1变为01
if(i<10)
{
i = "0" + i;
}
return i;
}
leftTimer();
setInterval(leftTimer,1000);
}
</script>
</body>
</html>
三、类型转换
1、直接转换 parseInt() 与 parseFloat()
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.92、隐式转换 “==” 和 “-”
if('3'==3)
{
alert('相等');
}3、NaN 和 isNaN
alert( parseInt('123abc') ); // 弹出123
alert( parseInt('abc123') ); // 弹出NaN四、变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<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>
五、封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。一般定义的函数和执行函数：
function changecolor(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
}
changecolor();函数用变量方式定义：
var myalert = function(){
alert('hello!');
}
myalert();封闭函数：把匿名函数用（）包起来，再在后面加（）就成了封闭函数
// 封闭函数定义：(function(){ .... })()
(function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
})();还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
}()完整的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1">1232</div>
<script type="text/javascript">
(function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
})();//一开始就执行了
</script>
</body>
</html>
六、闭包
什么是闭包
函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机function aaa(a){
var b = 5;
function bbb(){
a++;
b++;
alert(a);
alert(b);
}
return bbb;
}
var ccc = aaa(2);
ccc();
ccc();封闭函数的形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function aaa(a){
var b = 5;
function bbb(){
a++;
b++;
alert(a);
alert(b);
}
return bbb;
}
var ccc = aaa(2);
ccc();//弹出3,6
ccc();//弹出4,7
</script>
</body>
</html>用处
1、将一个变量长期驻扎在内存当中，可用于循环中存索引值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包的用途-存循环的索引值</title>
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
// for (var i=0;i<aLi.length;i++) {
// aLi[i].onclick=function(){
// alert(i);//每一个li的事件绑定了，但i的值却不会保存的，最后为8，点击每一个li都是弹出8
// }
// }
for(var i=0;i<aLi.length;i++)
{
(function(i){
aLi[i].onclick = function(){
alert(i);//每一个li的绑定点击的i的值都保存了下来
}
})(i);
}
//上面是简化的方式
// function a(i) {
// function b(){
// alert(i);
// }
// return b;
// }
// aLi[i].onclick=a(i);
}
</script>
<style type="text/css">
li{
height:30px;
background-color: gold;
margin-bottom:10px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>第一种情况
第二种情况
2、私有变量计数器，外部无法访问，避免全局变量的污染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包的用途-私有变量计数器</title>
<script type="text/javascript">
//匿名函数已经执行了一次，a变量存储了起来，count变量是bb函数的定义。
var count = (function(){
var a = 0;
function bb()
{
a++;
return a;
}
return bb;
})();
alert(count());//弹出1
alert(count());//弹出2
var c = count();
alert(c);//弹出3
</script>
</head>
<body>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WEB_03_JavaScript_JS基本语法_第二讲
- Javascript（一）-03-(语法的通用体现)
- 玩转Web之JavaScript(一)-----javaScript语法总结（一） 与鼠标操作有关的语法
- 03.Java语言基本语法之运算符，算数、赋值、比较、逻辑、位、三元运算等
- TypeScript和es5的JavaScript的语法比较
- JavaScript语法
- JavaScript语法
- javascript语法（一）
- JavaScript 高级语法(function(){})() 语法介绍
- JavaScript系统学习之一 <基本语法，运算符，流程控制语句>
- php程序员学习javascript:第一章：javascript基本语法：数据类型
- [ASP.NET MVC 小牛之路]03 - Razor语法
- （1）javascript 基本概念 -- 语法
- JavaScript语法结构，关键字，保留字，变量
- 12种不宜使用的Javascript语法
- Note On <High Performance JavaScript> - 03
- javascript学习 第2天 语法 标识符 严格模式 注释与语句 关键字与保留字
- 20170113C++阶段班03_Object C++_08-09语法复习/Object复习
- JavaScript 正则表达式上——基本语法
- JavaScript语法入门系列（三） 基本数据类型及其对应对象类型