一、javaScript组成
1、ECMAScript:解释器、翻译 ---------------------------------------------------------几乎没有兼容性问题
2、DOM:Document Object Model --------操作HTML的能力----document--------有一些兼容性问题
3、BOM:Browser Object Model -------------浏览器---------------window----------完全不兼容
(各组成部分的兼容性,兼容性问题的由来)
二、
下拉+text
var oSel=document.getElementById('sel');
var oBtn=document.getElementById('btn');
var oTxt=document.getElementById('txt');
var oDiv=document.getElementById('div1');
oBtn.οnclick=function(){
function setStyle(name,value){
oDiv.style[name]=value;
}
setStyle(oSel.value,oTxt.value);
}
三、
字符串拼接
alert('abc'+12+5+'def'); ------abcd125def
(1)
字符串和数字相加,会把数字转变成字符串
alert(12+5+'abcd'+'def'); ------ 15abcdefg
(2)
程序从左向右执行
alert('abcd'+(12+5)+‘def'); ----abcd17def
乘法表:
1*1=1
1*2=2 2*2=4
1*3=3 2*3=6 3*3=9
1*4=4 2*4=8 3*4=12 4*4=16
var oUl=document.getElementById('ul1');
for(var i=0; i<9; i++){ //i代表第几行
var s='<li>';
for(var j=0; j<i+1; j++){
s+='<span>'+(j+1)+'*'+(i+1)+'='+(j+1)(i+1)+</span>';
}
s+='</li>';
oUl.innerHTML+=s;
}
四、分号问题
1. window.οnlοad=function(){}; //此处是因为赋值,所以加分号,和function无关
即:
元素.事件=function (){};
2.
if/while循环/for循环/function(){} 不要加分号
站长工具--压缩
五、
数据类型
1. 基本数据类型———不可拆分
(1)字符串string
(2)数字number
(3)布尔值boolean
(4)undefined
2. 混合数据类型——object
(1)数组array
(2)元素element
(3)方法function
六、变量类型
1、类型:typeof运算符
(1)用法:返回值
(2)常见类型:number(包括NaN)、string、boolean、undefined、object(包括数组、空对象null)、function
2、一个变量应该只存放一种类型的数据
3、value获取到的是字符串
.alert(oTxt1.value+oTxt2.value);
4、
数据类型转换
(1)显式(强制)
A、parseInt:可以过滤掉数字后的非数字,和小数
B、parseFloat:保留小数,可以带字母
C、Number:保留小数,但不允许任何非数字成分,只能转纯数字。
例子:var s='12ebfm45'— parseFloat— '12'
var s='12ebfm45'— Number— NaN
var s='12451.11'— Number — 12451.11
var s='12px'; s=Number(s); alert(typeof s); 会弹出NaN。
B、NaN的意义和检测
NaN和NaN不相等
NaN属于数字类型 alert(typeof NaN);---->number
文本框相加特别注意处:
一定要把两个都不是数字的情况放在第一个不是数字的情况前面:if(isNaN(num1)&&isNaN(num2)){
alert('两个都不是数字');
}else if(isNaN(num1){
alert('第一个不是数字');
}else{……}
(2)隐式
A、==先转换类型,再比较_————alert( 4=='4' ); 返回true;
===不转类型直接比(既比类型又比值)alert(4==='4');返回false;
B、< 、<=、>、>=、*、/、也会执行隐式转换————alert(4<'5');返回true; var s='5'; s=s*'4'; alert(s); 隐形转换
C
、
字符串与另一数字或字符串相减、乘除都会进行隐式转换 var a="12"; alert(a/2);----6(加号的作用有字符串连接、数字相加 var a="12.5"; alert(a-0+5);-----17.5)
D、取余%
(3)数字--->字符串:加引号:alert("a"+12+5); alert(""+12+5);
相关练习:
1、比较两个数的大小
var aInput=document.getElementsByTagName('input');
aInput[2].οnclick=function(){
var value1=Number(aInput[0].value);
var value2=Number(aInput[1].value);
if( isNaN(value1)||isNaN(value2)||aInput[0].value==''|| aInput[1].value==''||value1==' '|| value2==' '){
alert('输入数字');
}else{
// > < 隐性转换 -〉 JS帮你Number(str)
if(value1<value2){alert(value2+'大');}else if(value1>value2){alert(value1+'大');}else{alert('相等');};
};
};
2、判断一个数字是不是整数
var value=aInput[0].value;
if(
value==parseInt(value)){
alert('整数');
}
3、简易网页计算器
var aInput=document.getElementsByTagName('input');
var oSe=document.getElementById('se');
aInput[2].οnclick=function(){
var value1=Number(aInput[0].value);
var value2=Number(aInput[1].value);
switch(oSe.value){
case '+':
alert(value1+value2);
break;
case '-':
alert(value1-value2);
break;
case '*':
alert(value1*value2);
break;
case '/':
alert(value1/value2);
break;
};
};
七、变量作用域和闭包
1、变量作用域(作用范围)
(1)局部变量
局部变量只能在定义它的函数里使用
(2)全局变量
var a=44;
function fn(){
alert(a);
var b=33;
fn2();
};
fn();
function fn2(){ //看函数的作用域。是看它定义在哪
alert(b);
};
2、什么是闭包---子函数可以使用父函数中的局部变量
function fn(){
var a=444;
function fn3(){
alert(a);
};
return function(){
alert(a);
};
};
var fn2=fn(); //闭包
fn2();
八、命名规范
1、命名规范及必要性
(1)可读性——能看懂
(2)规范性——符合规则
2、匈牙利命名法
(1)类型前缀
(2)首字母大写
3、类型 前缀 类型 实例
数组 a Array altems
布尔值 b Boolean blsComplete
浮点数 f Float fPrice
函数 fn Function fnHandler
整数 i Integer itemCount
对象 o Object oDiv1
正则表达式 re RegExp ReEmailCheck
字符串 s String sUserName
变体变量 v Variant vAnything
九、运算符
1、算术:+加 -减 *乘 /除 %取模
实例:隔行变色、秒转时间、可以用-0来将value转成数字类型
i=i+1 i+=1 i++ i=i+3 i+=3
2、赋值:=、 +=、 -=、 *=、 /=、 %=(小%大=小,隔行变色)
3、关系(比较):<、 >、 <=、 >=、 ==、 ===、 !=、 !==(不全等)
4、逻辑:&&与、 ||或、 !非
5、运算符优先级:括号。另外,!优先级比>高
if(!2>3){
alert(">"); //!优先级高于>,所以先计算!2是false,再计算false>3.这里把false转成0,所以false>3是错的false,所以走else中的语句
}else{
alert("<");
}
简易计算器:
var aInput=document.getElementsByTagName('input');
var num1=aInput[0];
var num2=aInput[1];
var oSe=document.getElementsByTagName('select')[0];
var oBtn=aInput[2];
oBtn.οnclick=function(){
var O=oSe.value;
var n1=num1.value;
var n2=num2.value;
if(n1==''||n2==''){
alert('请输入两个数字');
}else if(isNaN(n1)||isNaN(n2)){
alert('至少一个输入的不是数字,请检查!');
}else{
switch(O){
case "+":
alert(Number(n1)+Number(n2));
break;
case "-":
alert(Number(n1)-Number(n2));
break;
case "*":
alert(Number(n1)*Number(n2));
break;
case "/":
alert(Number(n1)/Number(n2));
break;
}
}
}
计算任意个文本框的和:
var aT=document.getElementsByTagName('input');
var oBtn=document.getElementById('btn1');
oBtn.οnclick=function(){
var result=0;
var ok=true;
for(var i=0; i<aT.length; i++){
var n=parseInt(aT[i].value);
if(isNaN(n)){
alert('第'+(i+1)+'个是错的');
ok=false;
}
result+=n;
}
if(ok){
alert('总共是'+result);
}
}
十、流程控制(判断)
1、判断:if、switch、?:
(1) switch(变量){
case 值1:
语句1
break;--------
跳出,后面的就不执行了
case 值2:
语句2
break;
……
default:
语句n
}
例子:switch(true) {
case 4>6:
alert('星期一');
break;
case 7>5:
alert('星期二');
break;
};
(2)?:三目运算符---只能执行一句话
条件?语句1:语句2;
A. 10>9?alert(10):alert(9);//正常
B. 10>9?var a=10:var a=9; //报错 因为var 必须放在行首,正确为:
var a=10>9?10:9;
(3)条件 &&
if(10>6){
alert(10);
}
简化 条件 && 条件成立执行
即 10>6 &&alert(10);
2、循环:while、for
3、跳出:break、continue(只用在循环和switch里用)
break:跳出
continue:跳过本次循环,后面的继续执行
function show(){
for(var i=0;i<5;i++){
if(i!=3){
alert(i);
}else{
break;
}
}
}
show();
function show(){
for(var i=0;i<5;i++){
if(i==3){
continue;
}
alert(i);
}
}
show();
4、什么是真、什么是假
(1)真:true、非零数字、非空字符串、非空对象、空格
(2)假:false、数字零、空字符串、空对象、undefined、null、NaN
5、参数
function fn(){
alert(arguments.length);
}
fn(1,2,3);
十一、
调试
1. alert();
2. document.title
3. ie-----禁用脚本调试
4. google:console.log(a) 内部输出,调试,计算器
5. FF:Ctrl+shift+J
十二、iNow
1. 简单的历史图库
window.οnlοad=function(){
var oUl=document.getElementsByTagName('ul');
var aLi=oUl.children;
var aBtns=document.getElementsByTagName('input');
var iNow=0;
aBtns[0].οnclick=function(){
iNow++;
if(iNow==aLi.length)iNow=0;
oUl.style.left=-iNow*400+'px';
}
aBtn[1].οnclick=function(){
iNow--;
if(iNow==-1)iNow=aLi.length-1;
oUl.style.left=-iNow.400+'px';
}
}
<div id="box1">
<ul>
<li>1111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
<div id="box2">
<input type="button" value="左">
<input type="button" value="右">
</div>