JavaScript入门学习

关于JS

JS也就是JavaScript，是一种浏览器客户端的脚本语言，给html网页增加动态功能，比如动画，如果想掌握好H5，JS是必须要掌握的。

JS的基本语法

js中，一般以var来定义一个变量，与OC不同，var定义的对象不需要指定类型，会根据对象的内容自动进行判断,如下所示。

var age = 18;  //number
var money =  1.82;//number
var name = 'Jack';//string
var  name1 = 'Rose'; //string
var result = true; //false  boolean
var score  = null;//object

而字符串的拼接也和swift一样

//字符串拼接
//运算时从左向右，任何类型的变量与string类型拼接都会被转化为string
var newName = name +"-"+ name1;
var str1 = 10 + 10 + '10' + '10'; //201010
var str2 = '10' + '10' + 10 + 10; //10101010
var str3 = ('10' + 10) + "10" + 10; //10101010

那么我们一般如何调试呐,分为控制台和提示框。

//输出 单引号双引号都行  建议单引号 因为按钮是 OnClick = ""  相当于断点
alert('Hello World');
//调试输出    谷歌浏览器  审查元素-console
console.log("调试输出")
//想知道真实类型
//typeof
console.log(age,money,name,result,score);
console.log(typeof age,typeof money,typeof name,typeof result,typeof score);

数组的基本定义,数组里面可以包含数组，和OC不同，数组里面可以包含不同类型的对象。

var newArr1 = [];
var newArr2 = [10, 05, age,name,result,score,['hahaha','阿萨德']]; //object
//删除数组最后一个元素
newArr2.pop();
//数组中加一个元素
newArr2.push(['jay']);
var newNumbers = [10,-9,232,4554];
//取出最小值
var minNumber1 = Math.min(10,23,34,54);
var minNumber2 = Math.min().apply(null,newNumbers);
//取出最大值
var maxNumber = Math.max(null,newNumbers);

//输出数组中的内容 遍历
for(var i = 0; i<newArr2.length; i++){
    console.log(newArr2[i]);
    }   
//这里的i是索引
for(var i in newArr2){
    console.log(i,newArr2[i]);
    }

JS的内置对象

window 关于window有两点
1.所有的全局变量都是window的属性
2.所有的全局的函数都是window的函数

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

JS的Dom操作

Dom的用途
Document的用途
1.动态的获取当前网页中的任意一个标签
2.动态的获取到的标签进行crud
create retrieve update delete

//动态插入
document.write('Hello World');
//插入标签
document.write('<input type = "date">');
//插入一张图片
document.write('<img src="img/img01.png>');

DOM的curd

//c create
//增
//1
document.write('HelloWorld');
document.write('<button>')

//2
var div = document.createElement('div');
div.style.backgroundColor = 'red';
div.style.width = '500px';
div.style.height = '300px';
//添加到父标签
document.body.appendChild(div);
//往div中插入一张图片
var img = document.createElement('img');
img.src = 'img/icon.png';
div.appendChild(img);

//向p标签插入东西
var p = document.getElementById('word');
var img2 = document.createElement('img');
img2.src = 'img/icon.png';
p.appendChild(img2);

//r retrieve
//查

//find(document.body);
//function find(object){
//  for(var i in object){
//      console.log(object[i]);
//  }
//}

console.log(document.body.childNodes);

//u update
//改
//拿到对应的标签  做出改变

//d delete
//删
//document.body.removeChild(p);
//拿到当前标签的父标签  再来删除
//p.parentNode.removeChild(p);
//p.remove();

JS语法的灵活性

 || &&
逻辑或 ||
var  name1 = 'name1';
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 if(name4){
    newName = name4;
    }
    console.log(newName);
            
//新做法
newName = name1||name2||name3||name4;
console.log(newName);
            
//逻辑与 &&
var age = 22;
if(age>20){
    console.log('你可以结婚了');
    }
//新做法
(age>20)&&console.log('你可以结婚了!!!');

JS中的函数 - 匿名函数

这就是个自己封装的函数

//两个数相加
function sum( number1,  number2){   
        return number1 + number2 ;
    }
//调用函数
var result =  sum(10,20);

//万能的加法函数
function sum2(numbers){
    var count = 0;
    for(var i = 0;i<numbers.length;i++){
        count+=numbers[i];
        }
        return count;
    }
var numbers = [10,23,46,786,97,78];
var sumResult = sum2(numbers);

//内置数组  arguments
function sum3(){
    var count = 0;
    for(var i = 0;i<arguments.length;i++){
        count += arguments[i];
        }
        return count;
    }
var sumResult3 = sum3(10,23,46,97,78);

产生对象

如何自定义一个对象 带有属性和方法

//this this在哪个对象中就代表哪个对象
//定义一个对象
var dog  = {
        name : 'wangcai',
        age : 4,
        height : 1.2,
        friend : ['xixi','lili'],
        eat: function(something){
                console.log(this.name + '---吃' + something);
        },
        run: function(somewhere){
                console.log(this.name + '---跑' +somewhere);
        }
    };
//调用狗对象的属性
console.log(dog.name,dog.friend);
//调用狗的方法
dog.eat('骨头');
dog.run('公园');


//如何批量产生对象
//构造函数
function Dog(){
    this.name = null;
    this.height = null;
    this.frirens = [];
    this.age = null;
    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 = 'xiaohei';
dog1.height = 1.23;
dog1.run('火星');
dog1.friend = ['xiaohua'];
//赋值
dog2.name = 'xiaobai';
dog2.height = 0.53;
dog2.eat('月亮');
dog2.friend = ['xiaohuang'];

//构造函数
function Cat(name,height,age,friends){
    this.name = name;
    this.height = height;
    this.frirens = friends;
    this.age = age;
    this.eat = function(something){
        console.log(this.name + '吃' + something);
        },
    this.run= function(somewhere){
        console.log(this.name + '跑' + somewhere);
        }
    }
//创建新对象
var cat = new Cat('mi',12,23,['324']);
cat.eat('猫粮');

其他

一些其他关键字

setTimeout("alert('时间到了')",3000);
setTimeout 在某个函数以内执行一个函数，只执行一次
setInteger 让程序每隔一定时间来调用函数一次

鼠标事件

当鼠标进入图片
img.onmouseover = function(){
    alert('手指进入图片');
}
当手指在图片上移动
img.onmousemove = function(){}
当鼠标移出图片
img.onmouseout = function(){}
当前页面加载完毕
window.onload = function(){}

canvas 绘制图形
这个canvas和OC中的drawRect类似

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