js语法

JS语法

---

1. 什么是JavaScript

• JavaScript是一门广泛用于浏览器客户端的脚本语言
  由Netspace公司设计，当时跟Sun公司合作，所以名字起得像Java
  业内一般简称JS

2.JS的常见用途

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

3.JavaScript的书写方式

• JS常见的书写方式有2种:

    // 页内JS：在当前网页的script标签中编写
    <script type="text/javascript"></script>
    // 外部JS
    <script src="index.js"></script>

4.JS节点的基本操作（CRUD）

（一）create创建 (C)
    var div = document.createElement(‘div’);
     document.body.appendChild(div);

（二）read查 (R)
    //Id
    var div = document.getElementById(‘div’);
    //TagName
    var div = document.getElementsByTagName(‘div’)[0];
    //ClassName
    var div = document.getElementsByClassName(‘div’)[0];
    //标签
    var div = document.getElementsByName(‘div’)[0];

（三）update改 (U)
    var img = document.getElementById(‘logo’);
     img.src = ‘images/logo.jpg’;

（四）delete删(D)
   var img = document.getElementById(‘logo’);
    img.parentNode.removeChild(img);
   //或者
    img.remove();

5.事件绑定

（一）推荐做法
    var button= document.getElementById(‘login’);
     button.onclick = function(){
      // 实现点击按钮想做的事情
     }

（二）直接写到标签的内部
   <button onclick=“var age=20; alter(age);”>登录</button>

（三）不常用
   function login(){
      // 实现点击按钮想做的事情
   }
   var button = document.getElementById(‘login’);
   button.onclick = login();

6. JS调试输出：

 console.log('hello world')
  比较下alter和console在调试的优缺点
  进百度----> console.log 招聘信息

7、JS数据类型

• number:包括所有的数字（整数、小数）
• boolean:正常取值（true 或者 false）
• string: 字符串，可以用双引号和单引号引住内容（建议使用单引号）
• object:对象类型,（注意：数组[]也是对象类型)

(1)基本数据类型  
  var age = 10; //number
  var money = 10.5; // number
  var name = "jack"; // string
  var name2 = 'rose'; // boolean

  //*推荐使用单引号
   <button onclick = "alter("10")">
   var result = true; // true false
  * 可以不写var

  //打印类型，加深印象：
  console.log(typeof age)

(2)字符串的拼接  
   var prefix = 'I am';
   var name = 'jack'
   var str = prefix + name + 'sb' + 20;

(3) 字符串与数字拼接
   出题：
    var str1 = 10 + 10 + '10';
    var str2 = '10' + 10 + 10;
    var str3 = '10' + （10 + 10）
    var str4 =  10 + '10' + '10'
    注意点：运算从左往右，任何类型与字符串相加都是字符串类型

（4）数组
    var names = []; // 比较下js和oc和java的数组区别
    var names = [10, 20, 'jack', 10.8, true, false];
    console.log(names.length)
    console.log(names[0])
    console.log(typeof names)

8、JS对象

 var dog = {
       name : 'jack',
       age : 10
    };
 console.log(dog.name)
 console.log(dog.name + '-' + dog.age)

 var dog2 = {
       name : 'hhh',
       age  : 10,
       height : 1.55  (身高已经超过郭敬明了)
    };
    console.log .... 

9、JS函数

*函数的定义格式
    function 函数名（参数列表）{
        // 函数体  
    }

    // 加法运算
    function sum(num1, num2){  // 参数列表不需要标明类型
       return num1 + num2
    }
    cosole.log(sum(1, 2));

    // 写一个万能的加法函数
     对比前面一个，突出新方法
     function sum(numbers){
        var count = 0;
        for(var i = 0; i < numbers.count; i++){
            count += numbers[i];
        }
        return count;
     }
     // 改进版
     function sum(){ // arguments
        var count = 0;
        for (var i = 0; i < arguments.length; i++){
           count += arguments[i];
        }  
        return count
     }

    //还有一种方式，匿名函数
    var sum = function (num1, num2){
        return num1 + num2;
    }
    console.log(sum(100, 200));
    console.log(typeof sum);

     **总结：js非常灵活，有很多写法，其他语言办不到**

9、JS_Window

• 要想把我们学习的JS运用到iOS开发中，我们还需要学习两个知识点：
  
  • 两个内置对象：系统自带的对象，全局对象
    
    • 内置对象：**window 和 document**

9.1Window

1.window的特点：
  1> 所有全局变量都是它的属性；
  2> 所有全局函数都是它的函数；

  var age = 20;
  function run(){
    var age = 20;<!--局部变量-->
    console.log('---run----');
  }
   //调用
   run();
   window.run();

   console.log(age);
   console.log(window.age);
   //弹框
    alert('10');
    window.alert('10');

    // 当前函数属于哪个对象，this就代表这个对象
    function Dog(){
        console.log(this);
    }

    Dog(); // window.dog
    new Dog(); // 通过构造函数产生了一个新的对象，this代表这个狗对象
    function Dog(){
       this.alter('10'); 
    }
    Dog();
    new Dog();

    // 阻塞操作->弹框
    alter('10'); 
    // 通过这句代码改变浏览器的指向，实现用JS代码自动跳转；
    window.location.href = ''; 
    location.herf = '';

9.2document

• 1.document的用途：
  
  • 1> 可以用来获得网页中的任何一个元素
  • 2> 可以创建HTML元素
  • 3> ….

总结：获取HTML元素的方式：
*document.getElementById(‘icon’);
*document.getElementsByTagName(标签名);
*document.getElementsByClassName(类名-class属性值);
*document,getElementsByName(name的属性值);

**- getElementByID** 
**- getElementsByTagName**
**- getElementsByClassName**
**- getElementsByname**

  document.write('');
  * 测试下内容会不会被覆盖

  提出需求:
  1.点击按钮，改变图片；
  升级：
  2.点击按钮，互相切换图片；


  分别切换图片
  function btnClick(){
     // 获取图片对象
     var icon = document.getElementById('icon');
     var icon = document.getElementsByTagName('img')[0];
     var icon = document.getElementsByClassName('tom')[0];
     var icon = document.getElementsByName('cat')[0];

     // 切换图片
     if (icon.src.indexof('test.png') == -1){
        icon.src = 'test.png';
     }else{
        icon.src = 'other.png';
     }
  }
  ID太多也不好，对比iOS尽量少使用tag,举例子：有些公司通过文档限定tag的取值

  3.其他的方法
  1> 点击图片
     var icon = document.getElementByTagName('img');
     icon.onclick = function(){
        console.log('点击了图片');
     };
   2> 点击body
     document.body.onclick = function (){
        console.log('点击了body');
     };
   3> 鼠标事件
      icon.onmousemove = function(){
         console.log('鼠标在图片上移动');
      };
      icon.onmouseover = function(){
         console.log('鼠标滑入图片');
      };
      icon.onmouseout = function(){
         console.log('鼠标滑出图片');
      };  

       icon.onkeyDown
       icon.onkeyUp

  4.倒计时函数
    <style>
        div{
            color: red;
            font-size: 100px;
        }

        img{
           display: none;
        }

    </style>
    <script>
         var timer = setInterval(function(){
           var div = document.getElementById('time');
           div.innerHTML = div.innerHTML - 1;
           if(div.innerHTML == '0'){
             // 停止计时
             clearInterval(timer);
            // 隐藏数字
             div.style.display ='none';
            // 显示图片
             var icon = document.getElementById('icon');
             icon.style.display = 'inline-block';
           }
         }, 1000);
    </script>