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';
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容