JavaScript基本语法

作者: 打电话记错号码的人 | 来源:发表于2016-08-04 20:08 被阅读105次

    作品链接:http://www.jianshu.com/users/1e0f5e6f73f6/top_articles

    1. JavaScript介绍

    • JavaScript是一门广泛用于浏览器客户端的脚本语言

      • 脚本语言: 缩短传统的编写-编译-链接-运行过程,解释运行而非编译运行
    • JavaScriptl的常见用途

      • HTML DOM操作(节点操作,比如添加、修改、删除节点)
      • 给HTML网页增加动态功能,比如动画
      • 事件处理:比如监听鼠标点击、鼠标滑动、键盘输入

    2. JavaScript的编写输出形式

    用js写一个helloWord

    alert("hello world")
    

    利于调试,供程序员观看:

    console.log('hello world')
    
    

    3. JavaScript的基本语法

    • 数据类型
    • 最值
    • 函数
    • 对象
    • 逻辑字

    (1)-------------JS中常见的数据类型----------

    • js中定义变量必须用var
    var age = 18;//number
    var money = 1.099;//number
    var name = 'wpf';
    var result = false;// boolean
    var score = null;//object
      // typeof 用于判断变量的真实类型
     console.log(age, money, name, result, score);
    console.log(typeof age, typeof money, typeof name, typeof result,typeof score);
    

    (2)字符串的拼接

    • 规律: 运算是从左往右,任何类型的变量与string类型拼接都会被转为string
    var str = 10 + 10 + '10' + '10';// 201010
    var str1 = '10' + 10 + '10' + 10;//10101010
    var str2 = ('10' + 10) + '10' + 10;//10101010
    var str3 = '10' + '10' + 10 + 10;//10101010
    

    (3)-----------------数组------------------

    • 数组中可以放任意类型的数据
      var newArray = [10, -5, age, name, result, score, ['哈哈哈', 'abc', '123']];        //数组的类型 object
    // 遍历数组 方法1
          for (var  i = 0; i < newArray.length; i++){
         console.log(newArray[i]);
       }
    // 遍历数组2
    for (var i in newArray) {
      console.log(i, newArray[i]);
      }
     console.log(newArray[newArray.length - 1][0]);//哈哈哈
    // 删除最后一个元素,添加一个新的元素到数组中 pop()和push()        newArray.pop();
     newArray.push(['大熊猫']);
     console.log(newArray);
     console.log(newArray[newArray.length - 1]);//['大熊猫']
    

    (4)------------取出数组中的最大值和最小值-----------

    • 方法1
    var newNumbers = [10,3,23,938];
    var minNumber = Math.min.apply(null,newNumbers);
    var maxNumber = Math.max.apply(null,newNumbers);
    console.log(minNumber, maxNumber);
    
    • 方法2
    var minNumber = Math.min(10,32,34,4554,-9);
    var maxNumber = Math.max(10,32,34,4554,-9);
    console.log(minNumber, maxNumber);
    

    (5)函数
    *函数的定义格式

     function 函数名(参数列表){
            // 函数体
    
            函数没有返回类型
        }
    
    • 加法运算
    // 两个数相加
    function sum(num1, num2){ // 参数列表不需要标明类型
      return num1 + num2;
    }
    // 调用函数
    var result = sum(245, 89);
    console.log(result);
    
    
    // 万能的加法函数
    function sum1(numbers){
       var count = 0;
      for (var i = 0; i < numbers.length; i++){
           count += numbers[i];
     }
      return count;
    }
    var  numbers = [12,124,'23'];
    var result1 = sum1(numbers);
    console.log(result1);
    
    
    // 内置数组 arguments
    function sum2(){
     var count = 0;
      for(var i = 0; i < arguments.length; i++){
         count += arguments[i];
     }
      return count;
    }
    var result2 = sum2(90,23,45,67,87,34);
    console.log(result2);
    

    (6)对象

    • this在哪个对象中,就代表该对象

    1.单一对象

    var peapole = {
    name:'jack',
    age:18,
    height:178,
     friends:['rose','dog'],
    eat:function (someThing){
       console.log(this.name + '------吃肉'+ someThing);
      },
     run:function (someWhere){
      console.log(this.name + '------跑' + someWhere);
      }};
    // 调用对象的属性
    console.log(peapole.name, peapole.friends);
    // 调用对象的方法
    people.eat('肉');
    people.run('船上');
    

    2.批量产生对象

    方法1.

    //构造函数
    function Dog(){
      this.name = null;
      this.height = null;
      this.age = null;
      this.friends = [];
      this.eat = function (someThing){
         console.log(this.name + '------吃肉'+ someThing);
      };
      this.run = function (someWhere){
        console.log(this.name + '------跑' + someWhere);
      }
    }
    // 批量产生狗
    var dog1 = new Dog();
    var dog2 = new Dog();
    
    // 赋值
    dog1.name = 'huahua';
    dog1.height = 1.33;
    dog1.age = 8;
    dog1.friends = ['lili','xixi'];
    
    dog2.name = 'xniba';
    dog2.height = 0.33;
    dog2.age = 1;
    dog2.friends = ['niuniu','lele'];
    dog1.eat('meat');
    dog2.eat('niunai');
    console.log(dog1,dog2);
    

    方法2

    // 构造函数
       function Dog(name, height, age, friends){
        this.name = name;
        this.height = height;
        this.age = age;
        this.friends = friends;
       this.eat = function(someThing){
           console.log(this.name + '吃' + someThing);
         },
          this.run = function(someWhere){
           console.log(this.name + '跑' + someWhere);
       }
      }
    // 创建新的对象
      var  dog3 = new  Dog('nini',12,1,['haha','xixi']);
      console.log(dog3);
    

    (7)逻辑关键字的运用

    1.|| 逻辑或

    var name1 = 'null';
    var name2 = 'name2';
    var name3 = 'name3';
    var name4 = 'name4';
    var newName = null;
    // 判断
    if (name1){
      newName = name1;
    } else if (name2){
      newName = name2;
    } else if (name3){
      newName = name3;
    } else {    newName = name4;
    }
    // 新的做法
    newName = name1 || name2 || name3 || name4;
    console.log(newName);
    

    2.&& 逻辑与

    var age = 22;
    if (age>20){    console.log('大学毕业');}
    (age > 20) && console.log('大学毕业');
    

    相关文章

      网友评论

        本文标题:JavaScript基本语法

        本文链接:https://www.haomeiwen.com/subject/ndvcsttx.html