Javascript

• 用于浏览器客户端的脚本语言
  • 脚本语言:缩短传统的编写-编译-连接-运行过程,解释运行而非编译运行
• 用途
  • HTML DOM操作(节点操作)
  • 给HTML网页增加动态功能
  • 事件处理:监听鼠标点击
• Node.js
  • 定义: 是一个JS运行环境,是对Google V8引擎进行了封装
  • 优势: 可以作为后台语言
• 常用语法
  • 定义: 返回类型都是var
  • typeof: 真实类型
    • 数字: number
    • “”: string
    • true/false: boolean
    • null: object
  • 字符串拼接
    • 运算是从左往右计算
    • 任何类型的变量与string类型拼接上都会被转为string类型
  • 数组
    • 定义并初始化: var newArr = [10, -5, age. result, score, [‘HMJ’, ‘HYH']];
    • 类型是object
    • 数组
      • 输出数组中的内容
        • for(var i = 0; i < newArr.length; i++){console.log(newArr[i]);}
        • for(var i in newArr){console.log(i, newArr[i]);}
      • 删除数组中最后一个元素: newArr.pop();
      • 添加元素到数组的最后: newArr.push([‘HJG’]);
      • 取出数组中的最小值: var minNumber = Math.min.apply(null, newArr);
      • 取出数组中的最大值: var minNumber = Math.max.apply(null, newArr);
      • 取出多个数中的最小值:var minNumber = Math.min(num1, num2…);
    • 函数
      • 万能加法函数: 

        • <script type="text/javascript">
                  //万能加法函数
                 function sum(numbers){
                     var count = 0;
                     for(var i = 0; i < numbers.length; i++){
                         count += numbers[i];
                     }
                     return count;
                 }
                  //调用函数
                  var numbers = [12, 23, '10'];
                  var result = sum(numbers);
                  console.log(result);
          </script>

      • 函数调用: 
    • 内置数组: 
      • window

        • <script type="text/javascript">
                  //window
                  //1.所有的全局变量都是window的属性
                  //2.所有全局的函数都是window的函数
                  var age = 1000;
                  console.log(window.age);
                  function dog1(){
                      //局部变量不属于window的属性
                      var age = 1000;
                  }
                  function dog2(){
                      //this代表window对象
                      console.log(this);
                  }
                  window.alert(0);
                  window.console.log('----');
                  //动态跳转
                  window.location.href = 'http://baidu.com';
          </script>

      • document
        •     document的用途
        •     1.动态获取当前网页中任意的标签
        •     2.动态的对获取到的标签进行CRUD(create, retrieve, update, delete)

        • <script type="text/javascript">
                  //动态插入到body中
                  document.write('HMJ');
                  //插入标签
                  document.write('<input type = "date">');
                  //插入图片
                  document.write('<img src="images/1.jpg">');
          </script>

      • DOM操作

        • <script type="text/javascript">
                  function changeImage(){
                      //拿到图片对象
                      var img = document.getElementById('icon');
                      //更改图片
                      //是自己的属性就直接调用,如果不是自己的就用style的
                      img.src = 'images/5.png';
                  }
                  function changeImageRound(){
                      //拿到要操作的标签
                      var img = document.getElementsByClassName('icon')[0];
                      //拿到button
                      var btn = document.getElementsByTagName('button')[1];
          //            console.log(img, btn);
                      //切换图片
                      //截取路径: indexOf lastIndexOf
                      //indexOf lastIndexOf: 如果找到则返回任意整数,没有找到就返回-1
                      if(img.src.lastIndexOf('images/1.jpg') != -1){
                          img.src = 'images/5.png';
                      }else{
                          img.src = 'images/1.jpg';
                      }
                  }
          </script>

    • 对象: 

      • <script type="text/javascript">
                //this在哪个对象中就代表该对象
                var dog = {
                   name : 'wangcai',
                    age : 19,
                    height : 1.2,
                    friends : ['xx', 'QQ'],
                    eat : function(foods){
                        console.log(this.name + '-----吃' + foods);
                    },
                    run : function(place){
                        console.log(this.name + '-----在' + place + '跑');
                    }
                };
                //调用狗对象的属性
                console.log(dog.name, dog.friends);
                //调用对象的方法
                dog.eat('骨头');
                dog.run('田野');
        </script>

• 输出
  • 调试阶段用页内js
  • 输出: alert(‘弹框输出的提示信息’);
    • 用单引号可以防止出错
  • 调试输出: console.log(‘内容可以在审查元素中的console中查看');