zoukankan      html  css  js  c++  java
  • JavaScript基础(二)

     

    1. 条件语句

    通过条件来控制程序的走向,就需要用到条件语句

    1.1. 条件语句语法

    1. if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
    2. if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
    3. if...else if....else 语句 - 使用该语句来判断多条件,执行条件成立的语句

    运算符:
    1、算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
    2、赋值运算符:=、 +=、 -=、 *=、 /=、 %=
    3、条件运算符:==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

    1.2. 比较运算符

    比较运算符描述例子
    == 等于 x == 8 为 false
    === 全等(值和类型) x === 5 为 true; x === "5" 为 false
    != 不等于 x != 8 为 true
    > 大于 x > 8 为 false
    < 小于 x < 8 为 true
    >= 大于或等于 x >= 8 为 false
    <= 小于或等于 x <= 8 为 true
     

    1.3. 逻辑运算符

    比较运算符描述例子
    && and (x < 10 && y > 1) 为 true
    || or (x==5 || y==5) 为 false
    ! not !(x==y) 为 true

     假如 x = 5, 查看比较后的结果:

    比较运算符示例代码:

    var iNum01 = 12;
    var sNum01 = '12';
    
    if(iNum01==12){
        alert('相等!');
    }
    else{
        alert('不相等!')
    }
    
    // "==" 符号默认会将符号两边的变量转换成数字再进行对比,这个叫做隐式转换
    if(sNum01==12){
        alert('相等!');
    }
    else{
        alert('不相等!')
    }
    
    // "===" 符号不会转换符号两边的数据类型
    if(sNum01===12){
        alert('相等!');
    }
    else{
        alert('不相等!')
    }
    
    // 多条件判断
    var sFruit = "苹果";
    if (sFruit == "苹果") {
        alert("您选择的水果是苹果");
    } else if (sFruit == "鸭梨") {
        alert("您选择的水果是鸭梨");
    } else {
        alert("对不起,您选择的水果不存在!")
    }

     假如 x=6, y=3, 查看比较后的结果:

    逻辑运算符示例代码:

    var x = 6;
    var y = 3;
    
    if(x < 10 && y > 1){
        alert('都大于');
    }
    else{
        alert('至少有一个不大于');
    }
    
    if(x > 5 || y > 7 ){
        alert('至少有一个大于');
    }
    else{
        alert('都不大于');
    }
    
    if(!(x == y)){
        alert('等于')
    }
    else{
        alert('不等于')
    }
    if else 多重if else语句 switch语句
    多重if else语句可以换成性能更高的switch语句
    var iNum01 = 3;
    var iNum02 = 5;
    var sTr;
    if(iNum01>iNum02){
        sTr = '大于';
    }
    else
    {
        sTr = '小于';
    }
    alert(sTr);

     理解练习:
    制作单个按钮点击切换元素的显示和隐藏效果

    var iNow = 1;
    if(iNow==1)
    {
        ... ;
    }
    else if(iNow==2)
    {
        ... ;
    }
    else
    {
        ... ;
    }
    var iNow = 1;
    
    switch (iNow){
        case 1:
            ...;
            break;
        case 2:
            ...;
            break;    
        default:
            ...;
    }

    理解练习:
    制作随着星期换背景的页面

    2. 数组及操作方法

    2.1. 数组的介绍

    数组就是一组数据的集合,javascript 中,数组里面的数据可以是不同类型的数据,好比 python 里面的列表。

    2.2. 数组的定义

    // 实例化对象方式创建
    var aList = new Array(1,2,3);
    
    // 字面量方式创建,推荐使用
    var aList2 = [1,2,3,'asd'];

    2.3 操作数组中数据的方法

    1、获取数组的长度:aList.length; 2、用下标操作数组的某个数据:aList[0]; 3、join() 将数组成员通过一个分隔符合并成字符串 4、push() 和 pop() 从数组最后增加成员或删除成员
    var aList = [1,2,3,4];
    alert(aList.length); // 弹出4
    var aList = [1,2,3,4];
    alert(aList[0]); // 弹出1
    var aList = [1,2,3,4];
    alert(aList.join('-')); // 弹出 1-2-3-4
    var aList = [1,2,3,4];
    aList.push(5);
    alert(aList); //弹出1,2,3,4,5
    aList.pop();
    alert(aList); // 弹出1,2,3,4
    5、unshift()和 shift() 从数组前面增加成员或删除成员 6、reverse() 将数组反转 7、indexOf() 返回数组中元素第一次出现的索引值

    8、splice() 在数组中增加或删除成员

    arr.splice(start,num,element1,.....,elementN)

    参数解析:

    1. start:必需,开始删除的索引。

    2. num:可选,删除数组元素的个数。

    3. elementN:可选,在start索引位置要插入的新元素。

    此方法会删除从start索引开始的num个元素,并将elementN参数插入到start索引位置

    var aList = [1,2,3,4];
    aList.unshift(5);
    alert(aList); //弹出5,1,2,3,4
    aList.shift();
    alert(aList); // 弹出1,2,3,4
    var aList = [1,2,3,4];
    aList.reverse();
    alert(aList);  // 弹出4,3,2,1
    var aList = [1,2,3,4,1,3,4];
    alert(aList.indexOf(1));
    var aList = [1,2,3,4];
    aList.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素
    alert(aList); //弹出 1,2,7,8,9,4

    2.4多维数组

    多维数组指的是数组的成员也是数组的数组。

    var aList = [[1,2,3],['a','b','c']];


    3. 循环语句

    循环语句就是让一部分代码重复执行,javascript中常用的循环语句有:

    • for
    • while
    • do-while

    3. 1  for循环

     

    3.2 while循环

     

    3.3 do-while循环

    var array = [1, 4, 5];
    
    for(var index = 0; index < array.length; index++){
        result = array[index];
        alert(result);
    }

    练习:
    1、将数组中的数据分别用弹框弹出
    2、将数组中的数据放入到页面中的列表中

     
    var array = [1, 4, 5];        
    var index = 0;
    
    while (index < array.length) {
        result = array[index];
        alert(result);
        index++;
    }

    说明:

    当条件成立的时候, while语句会循环执行

     
    var array = [1, 4, 5];
    var index = 0;
    
    do {
        result = array[index];
        alert(result);
        index++;
    } while (index < array.length);

    说明:

    当条件不成立的时候do语句也会执行一次

    数组去重:

    var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
    
    var aList2 = [];
    
    for(var i=0;i<aList.length;i++)
    {
        if(aList.indexOf(aList[i])==i)
        {
            aList2.push(aList[i]);
        }
    }
    
    alert(aList2);
  • 相关阅读:
    easyui-layout完整web界面布局
    combobox中动态载入tree数据
    easyui---layout 有无横的间隔 的区别 split:true
    单选按钮radio获取选中的值
    Datagrid清空数据
    Lancher3默认桌面显示
    菜单背景全透效果
    android通过耳机控制音乐播放器
    android 音乐暂停
    Android 系统默认音量和最大音量
  • 原文地址:https://www.cnblogs.com/zeon/p/13623721.html
Copyright © 2011-2022 走看看