`
yumo12
  • 浏览: 17792 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

JS一起学03:js组成、下拉+text、字符串拼接、分号问题、数据类型、变量类型、作用域和闭包、命名、运算符、流程判断、调试、iNow、onchang

    博客分类:
  • js
阅读更多

一、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.onclick=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.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字符串与另一数字或字符串相减、乘除都会进行隐式转换     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].onclick=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].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);
 };
    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.onclick=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.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();
 
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.onload=function(){
    var oUl=document.getElementsByTagName('ul');
    var aLi=oUl.children;
    var aBtns=document.getElementsByTagName('input');
    var iNow=0;
    aBtns[0].onclick=function(){
        iNow++;
        if(iNow==aLi.length)iNow=0;
        oUl.style.left=-iNow*400+'px';
    }
    aBtn[1].onclick=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>
分享到:
评论

相关推荐

    【JavaScript源代码】JS难点同步异步和作用域与闭包及原型和原型链详解.docx

    JS难点同步异步和作用域与闭包及原型和原型链详解  目录 JS三座大山同步异步同步异步区别作用域、闭包函数作用域链块作用域闭包闭包解决用var导致下标错误的问题投票机闭包两个面试题原型、原型链原型对象原型链...

    【JavaScript源代码】详解JavaScript闭包问题.docx

    详解JavaScript闭包问题  闭包是纯函数式编程语言的传统特性之一。...变量的作用域分为两种:全局变量和局部变量。 var n = 999; //全局变量 function f1() { a = 100; //在这里a也是全局变量 alert(n); } 

    JS匿名函数、闭包

    在后台执行环境中,闭包的作用域链包含着它自己的作用域、包含函数的作用域和全局作用域; 通常,函数的作用域及其所有变量都会在函数执行结束后被销毁; 但是,当函数返回了一个闭包时,这个函数的作用域将会...

    JS的作用域与闭包

    JS作用域与闭包。

    深入理解javascript原型和闭包

    深入理解javascript原型和闭包(01)——一切都是对象 深入理解javascript原型和闭包(02)——函数和对象的关系

    Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例

    本文实例讲述了Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作。分享给大家供大家参考,具体如下: 实例对象也可以实现闭包的功能,不过实例对象消耗的资源(内存)比闭包多。 demo.py(闭包): # 闭包,...

    Python语言基础:作用域.pptx

    作用域作用域作用域的查找顺序新作用域的引入目录Contents01作用域作用域作用域就是一个 Python 程序可以直接访问命名空间的正文区域。Python 中,变量的访问权限决定于这个变量是在哪里赋值的。变量的作用域决定了...

    JavaScript使用闭包模仿块级作用域操作示例

    本文实例讲述了JavaScript使用闭包模仿块级作用域操作。分享给大家供大家参考,具体如下: 在阅读这篇文章之前,建议先阅读JavaScript的作用域链以及JavaScript闭包。 正如闭包的定义一样:“闭包指的是有权访问另一...

    Web前端面试题目JavaScript(作用域,原型。原型链,闭包,封装函数).txt

    前端面试题,包含JavaScript的闭包,作用域,原型,原型链,上下文环境以及DOM,BOM封装函数深度克隆,以及一些常见的·JS问题,试题简单但是容易混淆,作为前端工程师必考题

    JavaScript作用域、闭包、对象与原型链概念及用法实例总结

    本文实例讲述了JavaScript作用域、闭包、对象与原型链概念及用法。分享给大家供大家参考,具体如下: 1 JavaScript变量作用域 1.1 函数作用域 没有块作用域:即作用域不是以{}包围的,其作用域完成由函数来决定,...

    JS中的闭包理解。。。。。。。。

    js闭包 • 每个函数都有一个包含词法环境的执行上下文,它的词法环境确定了函数内的变量赋值以及对外部环境的引用。...• JavaScript中闭包作用域是词法作用域,即它在代码写好之后就被静态决定了它的作用域。

    js闭包写法学习demo

    js闭包写法学习demo

    基于Python闭包及其作用域详解

    关于Python作用域的知识在python作用域有相应的笔记,这个笔记是关于Python闭包及其作用域的详细的笔记 如果在一个内部函数里,对一个外部作用域(但不是全局作用域)的变量进行引用,那么内部函数就被称为闭包...

    浅谈JavaScript作用域和闭包

    作用域和闭包在JavaScript里非常重要。但是在我最初学习JavaScript的时候,却很难理解。这篇文章会用一些例子帮你理解它们。 我们先从作用域开始。 作用域 JavaScript的作用域限定了你可以访问哪些变量。有两种作用...

    【金三银四】 一文弄懂 js 数据类型、堆栈内存、作用域(链)、闭包知识拓展 (一)

    对答如流系列篇,关于基本数据类型、堆栈内存、作用域作用域链、闭包 大家好,这里是lionLoveVue,基础知识决定了编程思维,学如逆水行舟,不进则退。金三银四,为了面试也还在慢慢积累知识,Github上面可以直接查看...

    作用域与闭包

    由作用域引出的作用域链的问题, 并在此基础上讨论闭包的问题

    作用域和闭包知识点文档

    JavaScript作用域与闭包知识点详细说明文档,有相关案例代码,欢迎下载,有问题可留言讨论哈哈哈!

    闭包作用域

    我自己总结的一点javascript闭包的作用域,可能不是太好

    JavaScript闭包函数

    闭包是ECMAScript (JavaScript)最强大的特性之一,但用好闭包的前提是必须理解闭包。闭包的创建相对容易,人们甚至会在不经意间创建闭包,但这些无意创建的闭包却存在潜在的危害,尤其是在比较常见的浏览器环境下...

Global site tag (gtag.js) - Google Analytics