zoukankan      html  css  js  c++  java
  • 第一篇、javascript变量和循环

    一、代码存放位置

     理论上放在body和head中都可以,但是推荐放在body代码块底部,因为Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。

      Js代码可以放在一个单独的文件中,然后通过 <script src="common.js" type="text/javascript"></script>可以将其导入进来,或者直接在html文件中直接书写代码,如下面所示,其中两种方式的 type都可以不用写,因为浏览器默认的便是javascript

     1 方式一:type="text/javascript"可以省略
     2 <head>
     3     <meta charset='utf8'>
     4     <title></title>
     5     <script src='common.js'></script>
     6 </head>
     7 
     8 方式二:type="text/javascript"可以省略
     9 <body>
    10     <script>
    11 
    12         Js代码内容.....
    13 
    14     </script>
    15 </body>

    二、变量

    JavaScript中变量的声明是一个非常容易出错的点,

    局部变量:函数内局部变量必须一个 var 开头,函数内如果未使用var也是定义局部变量,所以为了不搞混,局部变量var开头,重新赋值也要用var

    全局变量:函数外则默认表示声明的是全局变量。

    <script>
        name = 'seven';        // 不加var,全局变量
    
        function func(){
            var age = 18;      // 加var,局部变量
            age = 21;          // 对局部变量重新赋值,所以定义局部变量也好,修改局部变量也好都加上var就不会乱了
            var age = 28;
            name = "tomcat";   // 对全局变量重新赋值
            gender = "";     // 这是局部变量,别乱了,所以定义局部变量使用var
    
            alert(age);
            alert(name);
            alert(gender);
        }
        alert(name);
        func()
    </script>
    View Code

    JavaScript中代码注释:

    • 单行 //
    • 多行 /*  */

    注意:此注释仅在Script块中生效。

    三、循环和异常

     一、if 循环

    用于判定相等或者不等的情形

    严格来说if循环必须是一个boolean表达式:但是javascriot是弱类型语言,可以把其他类型的值自动转化为Boolean
    自动转化为false:0、NaN、 “(空字符串)”、undefined
    自动转化为true:123、-123、infinity、字符串、‘0’、
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <button onclick="isHealthy()">体重健康测试</button>
    </head>
    <body>
        <script>
            function isHealthy(){
                var weight=window.prompt("请输入体重:");
                var height=window.prompt("请输入身高:");
                var score=weight/(height*height);
                if(score>25){
                    console.log("你有点胖了");
                }else if(score>20){
                    document.write("体重均匀");
                }else{
                    console.log("你太瘦了");
                }
            }
        </script>
    
    </body>
    </html>
    View Code

    二、swich-case语句 

    语法:
    swich:
      case: 
    语句一;
      case:
        语句二;
      default:
        语句三;
    当上面的判断要第一个执行的时候,语句二语句三也会继续执行,所以要用break中断循环

    swich-case的优点:

    1、常常和break语句结合使用实现分支的功能

    2、结构更清晰、效率更高

    缺点: 

    只能用于指定变量相等某个范围内的某个特定的值

     三、while循环

    循环:就是一遍又一遍的重复执行相同或者相似的代码

    循环结构的二个要素:

    1)  循环体—要执行的相同或者相似的语句

    2)  循环条件—重复执行的次数,或者继续执行循环的条件

    方式一、
    while循环的语法格式:
        while(boolean){
            循环体语句;
    }
    含义:如果boolean表达式为true,则执行一遍循环体中的语句;然后再判定一次boolean表达好似,如果为true,则再次执行一遍循环体中的语句…直到boolean表达式的值为false则循环结束
    方式二、
    do {
        可执行语句;
    }while(boolean表达式);
    while的两种循环方式

    注意点:

    break只能用在while和swich这两种语句当中

     四、for循环

    for循环支持两种遍历方式

    方式一:
    var names = ["alex", "tony", "rain"];
     
    for(var i=0;i<names.length;i++){
        console.log(i);
        console.log(names[i]);
    }
    
    方式二:
    var names = ["alex", "tony", "rain"];
    
    for(var index in names){
        console.log(index);
        console.log(names[index]);
    }
    View Code
    for循环执行过程:
    1、    计算表达式1的值
    2、    计算表达式2(boolean表达式)的值,如果为true则执行循环体,否则退出循环
    3、    执行循环体
    4、    执行表达式3
    5、    计算表达式2如果为true则执行循环体,否则退出循环
    6、    如此循环往复,直到表达式2的值为false
    countinue:关键字只能用于循环中。

    五、异常处理

    try {
        //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
    }
    catch (e) {
        // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
        //e是一个局部变量,用来指向Error对象或者其他抛出的对象
    }
    finally {
         //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
    }

    四、补充

    1、输入的内容直接打印到浏览器页面上面

    document.write(“这个内容会打印到浏览器页面上面”)

     2、在解释器中打印输出

    consolo.log();

    3、和用户交互

    window.prompt(“来输入内容”);  

    4、弹出警告框

    window.alert("里面内容随便写"); 

  • 相关阅读:
    Android图像格式类及图像转换方法
    Java实现文件的加密与解密
    Google最新截屏案例详解
    Android应用程序模拟手机按键
    Android浮动小球与开机自启动
    Android手机截屏
    Android图片浏览器之图片删除
    Android图片浏览器之缩略图
    MFC实现Gif动画制作工具
    QRadioButton分组且无边框的简单实现
  • 原文地址:https://www.cnblogs.com/pyrene/p/6517654.html
Copyright © 2011-2022 走看看