一、javaScript组成
1、ECMAScript:解释器、翻译 ---------------------------------------------------------几乎没有兼容性问题
2、DOM:Document Object Model --------操作HTML的能力----document--------有一些兼容性问题
3、BOM:Browser Object Model -------------浏览器---------------window----------完全不兼容
(各组成部分的兼容性,兼容性问题的由来)
二、下拉+text
window.onload=function(){var oBtn=document.getElementById("btn");
var oSel=document.getElementById("sel");
var aInput=document.getElementsByTagName(‘input‘);
oBtn.onclick=function(){
var n0=Number(aInput[0].value); //input里的数字类型是字符串;
var n1=Number(aInput[1].value);
var oVal=oSel.value;
var c=n0+oVal+n1; //c为字符串
aInput[2].value=eval(c); //此时c为数字;
//eval是对字符串进行操作;
// switch(oVal){
// case ‘+‘:
// alert(n0+n1);
// break;
// case ‘-‘:
// alert(n0-n1);
// break;
// case ‘*‘:
// alert(n0*n1);
// break;
// case ‘/‘:
// alert(n0/n1);
// break;
// }
}
}
三、字符串拼接
alert(‘abc‘+12+5+‘def‘); ------abcd125def
(1)字符串和数字相加,会把数字转变成字符串
alert(12+5+‘abcd‘+‘def‘); ------ 17abcdefg
(2)程序从左向右执行
alert(‘abcd‘+12+5+‘def‘); ----abcd125def
四、分号问题
1. window.onload=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、字符串与另一数字或字符串-*/%都会进行隐式转换
(3)数字--->字符串:加引号:alert("a"+12+5); alert(""+12+5);
相关练习:
1、比较两个数的大小
var aInput=document.getElementsByTagName(‘input‘);
aInput[2].onclick=function(){
var value1=Number(aInput[0].value);
var value2=Number(aInput[1].value);
if( isNaN(value1)||isNaN(value2)||value1==‘ ‘|| value2==‘ ‘){
alert(‘输入数字‘);
}else{
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].onclick=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); //b is not defined
};
2、什么是闭包---子函数可以使用父函数中的局部变量
function fn(){
var a=444;
function fn3(){ //没有用上
alert(a);
};
return function(){
alert(a);
};
};
var fn2=fn(); //function(){alert(a);}
fn2(); //444
八、命名规范
1、命名规范及必要性
(1)可读性——能看懂
(2)规范性——符合规则
2、匈牙利命名法
(1)类型前缀
(2)首字母大写
3、类型 前缀 类型 实例
数组 a Array aInput
布尔值 b Boolean bfls
浮点数 f Float fPrice
函数 fn Function fn
整数 i Integer icount
对象 o Object oDiv
正则表达式 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 oSe=document.getElementsByTagName(‘select‘)[0];
var oBtn=aInput[2];
var n1=Number(aInput[0].value);
var n2=Number(aInput[1].value);
oBtn.onclick=function(){
if(n1==‘‘||n2==‘‘){
alert(‘请输入两个数字‘);
}else if(isNaN(n1)||isNaN(n2)){
alert(‘至少一个输入的不是数字,请检查!‘);
}else{
switch(oSe.value){
case "+":
alert(n1+n2);
break;
case "-":
alert(n1-n2);
break;
case "*":
alert(n1*n2);
break;
case "/":
alert(n1/n2);
break;
}
}
}
计算任意个文本框的和:
var aT=document.getElementsByTagName(‘input‘);
var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=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(); //0,1,2
function show(){
for(var i=0;i<5;i++){
if(i==3){
continue;
}
alert(i);
}
}
show(); //0,1,2,4
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