No2 JavaScript

一 JavaScript简介

• 什么是JavaScript
  
  • JavaScript是一门广泛用于浏览器客户端的脚本语言
  • 业内一般简称JS

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

• JS的常见用途

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

• 什么是Node.js

  • Node是一个JavaScript运行环境(runtime)，是对Google V8引擎进行了封装
  • V8引擎执行JavaScript的速度非常快，性能非常好

• Node.js的优势

  • 可以作为后台语言
  • 单线程
    
    • 不新增额外线程的情况下，依然可以对任务进行并行处理（采用事件轮询）
  • 非阻塞I/O、V8虚拟机、事件驱动

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

  • 页内JS：在当前网页的script标签中编写

    <script type="text/javascript"></script>

  • 外部JS <script src="index.js"></script>

二 JavaScript语法

• JS 代码是阻断式输出

• 控制台输出格式 console.log("hello World");

• 定义基本数据类型

  • var有点类似泛型

 var age = 10; // number var money = 100.99; // number var name = 'jack'; // string var result = false; // boolean ture var score = null; // object// 输出 console.log(age, money, name, result, score);// 真实类型  typeOf console.log(typeof age,typeof money,typeof name,typeof  result,typeof score);

// 拼接  var newName = name +'-'+ name1;   console.log(newName);// 拼接都是从左往右,任何类型的变量和string类型的变量拼接都会被转为string   var str = 10 + 10 + '10'; // 2010   var str1 = '10' + '10' + 10; // 101010   var str2 = (10 + '10') + 10; // 101010   var str3 = 10 + (10 + '10'); // 101010

• 数组格式

 // 数组  var dataArr = [10,'121', name, result, score, ['哈哈哈哈']]; // 数组的长度  console.log(dataArr.length); // 输出数组  console.log(dataArr);     // 遍历输出     for(var i=0; i<dataArr.length; i++){           console.log(dataArr[i]);    }  for(var i in dataArr){        console.log(i, dataArr[i]);    }

• 增加/删除元素

 // 删除最后一个元素    dataArr.pop();    for(var i in dataArr){        console.log(i, dataArr[i]);        }// 增加一个元素   var names = ['xxx'];   dataArr.push(names);

// 单独取出元素  console.log(dataArr[dataArr.length-1]);

• 数组中最大数和最小数

    var data = [1000, 9, 56666,32];//        console.log(Math.max(2121,4334,5454));        console.log(Math.min.apply(null, data));        console.log(Math.max.apply(null,data));

• 函数
  
  • 函数的定义格式
    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 result4 = function (){       console.log('我是匿名函数');     }    // 如何调用    result4();

三 JS中创建对象

• 创建单个对象

var dog = {            name : 'wangcai',            height : 1.55,            age : 15,            friends: ['gouyou1','gouyou2'],            run : function(someWhere){            // this 它在哪个对象中,然后代表该对象                console.log(this.name + '-----跑' + someWhere);            },            eat : function(someThing){                console.log(this.name +'-----吃' + someThing);            }        };        // 验证        console.log(typeof dog);        // 调用属性        console.log(dog.name, dog.age,dog.height, dog.friends);        // 调用函数        dog.eat('骨头');        dog.run('操场');

• 批量产生对象

 function Dog(){        console.log('------');     }// 调用   Dog();// 产生对象 new --- > [[Dog alloc] init];   var dog1 = new Dog();   var dog2 = new Dog();   console.log(dog1,dog2);

 // 构造函数 function Dog(){    this.name = null;    this.age = null;    this.height = 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 = 'wangcai';    dog1.age = 16;    dog1.height = 1.66;    dog1.friends = ['hhh', 'xxxxx'];    dog1.eat('五花肉');    dog1.run('房间');

• 另一种写法：

function Dog(name, age, height, friends){            this.name = name;            this.age = age;            this.height = height;            this.friends = friends;            this.eat = function(someThing){                console.log(this.name + '吃' + someThing);            };            this.run = function(someWhere){                console.log(this.name + '跑' + someWhere);            }        }

• JS 中逻辑或写法

  newName = name1 || name2 || name3 || name4;     console.log(newName);

• JS 中逻辑与写法

// 新写法 (条件) && {....}  (age > 20) && console.log('...............可以结婚了');

四 JS内置对象

window

• window:
  
  • 1. 所有的全局的变量都是window的属性
  • 1. 所有的全局的函数都是window的函数

// 验证属性   var age = 20;   console.log(window.age);// 验证函数   function dog(){           console.log('我是一条狗');        }        dog();        window.dog();

• 动态跳转
  window.location.href = 'http://baidu.com';

document

• document:
  
  • 1.动态的获取当前网页中的任何一个节点(标签)
  • 2.对获取的节点进行CRUD

<script type="text/javascript">  // 往当前页面写入     document.write('hello world!');  // 写入一个标签     document.write('<input type="date">');  // 写入图片     document.write('<img src="https://www.baidu.com/img/bdlogo.png" width="50">');</script>

• DOM 操作-更改图片

 <script type="text/javascript">    function changeImg(){     // 拿到图片     var img = document.getElementById('icon');     // 更改属性     img.src = 'images/img_02.jpg';     } </script><body>   <img id="icon" src="images/img_01.jpg">   <p></p>   <button onclick="changeImg();">更改图片</button></body>

• DOM 操作-更改图片

<body>   <img class="icon" src="images/img_01.jpg">   <p></p>   <button>切换图片</button>   <script type="text/javascript">       // 拿到要操作的标签       var img = document.getElementsByClassName('icon')[0];       var btn = document.getElementsByTagName('button')[0];       btn.onclick = function(){          console.log(img.src);           // indexOf = lastIndexOf  找到 返回任意正数, 没有找到,返回-1          if(img.src.lastIndexOf('images/img_01.jpg') != -1 ){              img.src = 'images/img_02.jpg';          }else{              img.src = 'images/img_01.jpg';          }       }   </script></body>

五 JS中常见事件

<script type="text/javascript">    // 当页面加载完毕    window.onload = function (){//        alert('页面加载完毕');      // 拿到img标签        var img = document.getElementsByName('icon')[0];      // 当鼠标进入图片       img.onmouseover = function(){           console.log('当鼠标进入图片');       }      // 当鼠标在图片中移动       img.onmousemove = function(){           console.log('当鼠标在图片中移动');       }      // 当鼠标离开图片        img.onmouseout = function(){            console.log('当鼠标离开图片');        }    }    // 拿到输入框    var int = document.getElementById('int');    int.onfocus = function(){        // css属性 style        int.style.width = '600px';        int.style.height = '100px';        int.style.outline = 'none';        int.style.border = '1px solid red';    }    int.onselect = function(){        alert(int.value);    }</script>

六 DOM的CRUD

• 增

  • 方法1

    document.write('<input type="file">');document.write('<img id="icon" src="images/img_01.jpg">');

  • 方法2

    var div = document.createElement('div');div.style.backgroundColor = 'red';div.innerText = '我是div';div.style.width = '500px';div.style.height = '300px';//加入bodydocument.body.appendChild(div);var imgs = document.createElement('img');imgs.src = 'images/img_02.jpg';div.appendChild(imgs);

• 删

var img2 = document.getElementById('icon');// 这种写法比较繁琐  img2.parentNode.removeChild(img2);  img2.remove();

• 改
  
  • 先拿到标签再改

• 查

  • 4种方式
    
    • getElementsByName
    • getElementsByClassName
    • getElementsByTagName
    • getElementsByID
  • 查看 body 有几个子节点
    

    console.log(document.body.childNodes);

七 Canvas

• HTML
  
  • <canvas id="canvas"></canvas>
• JS

 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //  context是一个绘图的上下文环境 //  2d是二维图形

• Canvas绘制直线

// 起点context.moveTo(100,100);// 终点context.lineTo(400, 400);// 绘制context.stroke();// 设置线条颜色和宽度context.strokeStyle = 'red';context.lineWidth = 5;// 设置填充色context.fillStyle = 'blue';

• Canvas绘制弧线

context.arc(          centerX, centerY, radius,          startingAngle, endingAngle,           anticlockwise=false            )// centerX, centerY: 圆心的坐标// radius: 半径// startingAngle, endingAngle: 开始角度,结束角度// anticlockwise: false顺时针 true逆时针