您的位置：首页 > Web前端 > JavaScript

JavaScript第二课基础知识

2017-10-11 14:59 190 查看

一、ECMAScripts:翻译解释器

DOM : Document Object Model 操作HTML document

BOM: Browser Object Model 操作浏览器 Window

兼容性问题

ECMA 几乎没有兼容性问题

DOM 有一些操作不兼容

BOM 无兼容问题(完全不兼容)

二、变量的类型

typeof 查看变量类型

alert(typeof 1);

number(数字) string(字符串) Boolean(布尔值) function(函数) object(对象) undefined(未定义)

undefined 出现的两种情况:1、未定义 2、未赋值

一个变量最好只存放一种类型的数据

类型转换

parseInt 可以把字符串转化成数字，从左往右查，遇到非数字即停止注意parseInt()中变量不加''

NaN 非数字 not a number

isNaN函数判断是否为NaN

<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function()
{
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
var oBtn=document.getElementById('btn1');

oBtn.onclick=function()
{
var n1=parseInt(oTxt1.value);
var n2=parseInt(oTxt2.value);
if(isNaN(n1))
{
alert('您输入的第一个数字有误');
}
else if(isNaN(n2))
{
alert('您输入的第二个数字有误')
}
else
{
alert(n1+n2);
}
}
}
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="txt2" type="text"/>
<input id="btn1" type="button" value="求和">
</body>

parseFloat()转换成小数一般可以使用parseFloat

隐式类型转换 ==先转换类型在比较 ===不转换类型直接比

var a=5;

var b='5';

alert(a==b) true 先转换类型在比较

alert(a===b) false 不转换类型直接比

+ 在JavaScript中的功能 1、字符串连接 2、数字相加

- 在JavaScript中只有减法的一种用途

三、变量的作用域

局部变量：只能在定义它的函数中使用

全局变量：在任何地方都能用，定义在所有函数外

闭包：子函数可以使用父函数中的局部变量

四、命名规范

可读性

规范性（匈牙利命名法）：类型前缀首字母大写

类型前缀类型实例

数组 a Array aItems

布尔值 b Bollean bIsComplete

浮点数 f Float fPrice

函数 fn Function fnHandler

整数 i Integer iItemCount

对象 o object oDiv1

正则表达式 re RegExp 若EmailCheck

字符串 s String sUserName

变体变量 v Variant vAnything

算数

取模求余数 %

实例:隔行换色

<script>
window.onload=function()
{
var aLi=document.getElementsByTagName('li');
[b]for(var i=0;i<aLi.length;i++)
{
if(i%2==0)
{
aLi[i].style.background='#ccc';
}
else
{
aLi[i].style.background='';
}
}
};

</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>
</body>

秒转时间

<script>
var s=123;
alert(parseInt(s/60)+'分'+s%60+'秒');
</script>

赋值

i=i+1 和i+=1 一样

！= 和！===

与&& 并且

或|| 或者

！否

（）改变运算优先级

程序流程控制

判断：if switch

if(条件1)

{

语句一

}

else if（条件二）

{

语句二

}

else

(语句三)

switch（变量）性别

{

case 值1：男：

语句一；欢迎先生；

break；

case值2：女：

语句二；欢迎女士；

break；

default：欢迎

语句n

}

<script>
window.onload=function()
{
var name='abc';
var sex='男';
switch(sex)
{
case'男':
alert(name+'先生,您好');
break;
case'女':
alert(name+'女士,您好');
break;
default:
alert(name+'您好');

}
};

</script>

三元运算符 ?:

条件?语句1:语句2

<script>
window.onload=function()
{
var a=21;
a%2==0?alert('双数'):alert('单数')
};

</script>

普通判断

{
var a=21;
if(a%2==0)
{
alert('双数');
}
else
{
alert('单数');
}
};

</script>

循环

while for

跳出

break 打破、中断

<script>
window.onload=function()
{
for(var i=0;i<5;i++)
{
if(i==2)
{
break;
}
alert(i);
}
};

</script>

中断所有循环

continue继续

<script>
window.onload=function()
{
for(var i=0;i<5;i++)
{
if(i==2)
{
continue;
}
alert(i);
}
};
</script>

中断本次循环

什么是真什么是假

真：true 非零数字非空字符串非空对象

假: false 数字0 空字符串空对象 undefined

Json 下标是字符串

<script>
var json={a:12, b: 5, c:'abd'};
alert(json.b);
</script>

数组下标是数字

区别数组有个属性length ,json没有length

数组的循环 for 0 - length

<script>
var json={a:12, b: 5, c:'abd'};
var arr=[12,5,7];
for(var i=0;i<arr.length;i++)
{
alert('第'+i+'个东西:'+arr[i]);
}
</script>

或者用 for in

<script>
var json={a:12, b: 5, c:'abd'};
var arr=[12,5,7];
for(var i in arr )
{
alert('第'+i+'个东西:'+arr[i]);
}
</script>

json的循环

<script>
var json={a:12, b: 5, c:'abd'};
var arr=[12,5,7];
for(var i in json )
{
alert('第'+i+'个东西:'+json[i]);
}
</script>

函数的返回值

<script>
function show(a,b)
{
return a+b;
}
var a=show(3,5);
alert(a);
</script>

函数传参

argument 可变参,相当于一个数组,存着传给函数的所有参数

<script>
function sum()
{
var result=0;
for(var i=0;i<arguments.length;i++)
{
result+=arguments[i];
}
return result;
}
var a=sum(3,7,3343,34,553432,21,);
alert(a);
</script>

css函数

css(oDiv, ' width') 给两个参数是获取样式

css(oDiv,' width','200px') 给是三个参数是设置样式

<script>
function css()
{
if(arguments.length==2)
{
return arguments[0].style[arguments[1]]
}
else
{
arguments[0].style[arguments[1]]=arguments[2];
}
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');
css(oDiv, 'background', 'green');
}

</script>
</head>
<body>
<div id="div1" style="width:200px; height:300px; background:red;">

</div>
</body>

或者

function css(obj,name,value)
{
if(arguments.length==2)
{
return obj.style[name]
}
else
{
obj.style[name]=value;
}
}

获取行间样式

<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
alert(oDiv.style.width);
}

</script>
</head>
<body>
<div id="div1" style="width:200px; height:300px; background:red;">

</div>

获取非行间样式

JavaScript第二定律好东西必然不兼容

<style>
#div1 {width:200px; height:300px; background:red;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
alert('oDiv.currentStyle.width');
}

</script>
</head>
<body>

currentStyle只在IE浏览器下兼容

chrome ff 需要的是 getComputedStyle 获取计算后的样式

getComputedStyle 有两个参数,第一个参数是需要获取的参数,第二个参数随便放

<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
alert(getComputedStyle(oDiv,null).width);
}

</script>

兼容

<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
if(oDiv.currentStyle)
{
alert(oDiv.currentStyle.width);
}
else
{

}
alert(getComputedStyle(oDiv,null).width);
}

</script>

定义一个函数

<script>
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');

alert(getStyle(oDiv,'width'));
}

</script>

复合样式:backgrouond border

单一样式:width height position

window.onload=function ()
{
var oDiv=document.getElementById('div1');

alert(getStyle(oDiv,'backgroundColor'));
}

数组

定义 var arr=[1,2,3,4,5]

var arr=newArray[1,2,3,4,5] 没有区别,第一个比较常用

数组的属性

length

既可以获取,又可以设置

<script>
var arr=[1,2,3,4]
arr.length=3
alert(arr.length)

</script>

数组的添加 push 尾部添加

<script>
var arr=[1,2,3,4]
arr.push(5)
alert(arr)
</script>

数组的删除 pop 尾部删除

<script>
var arr=[1,2,3,4]
arr.pop
alert(arr)
</script>

头部删除 shift

<script>
var arr=[1,2,3,4]
arr.shift()
alert(arr)
</script>

头部添加 unshift

<script>
var arr=[1,2,3,4]
arr.unshift(0)
alert(arr)
</script>

splice 从中间添加删除操作

splice(起点,长度) 需指定两个参数,起点和长度

<script>
var arr=[1,2,3,4,5,6]
arr.splice(2,3);
alert(arr);弹出126
</script>

插入

<script>
var arr=[1,2,3,4,5,6]
arr.splice(2,0,'a','b','c');//插入splice(起点,长度,元素..);
alert(arr);
</script>

替换

<script>
var arr=[1,2,3,4,5,6]
arr.splice(2,2,'a','b');//替换splice(起点,长度,元素..);
alert(arr);
</script>

数组的连接

join(分隔符)

<script>
var arr=[1,2,3,4,5,6]

alert(arr.join('-'));
</script>

concat(数组2)

sort排序

<script>
var arr=[1,9,3,4,5,6]

alert(arr.sort());
</script>

比较函数

<script>
var arr=[12,8,99,19,112];
arr.sort(function(n1,n2)
{
if(n1<n2)
{
return -4;
}
else if(n1>n2)
{
return 1;
}
else
{
return 0
}
})

alert(arr);
</script>

或者

<script>
var arr=[12,8,99,19,112];
arr.sort(function(n1,n2)
{
return n1-n2;
});

alert(arr);
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航