一.初探

javacript 学习无法是围绕着对象和属性两个方面来兜圈子,万变不离其宗。

在js中,能点出来的,或者中括号里面的必然是属性(方法)。数组除外。

对象调用属性!

对象调用属性!

对象调用属性!

整个js翻来覆去都在围绕这个事情做文章。

对象调用属性有两种方式:

1.直接点 window.onload 默认是null

2.window[onload] = window[null]=undefined

二.语言特点

是一个解释性语言,解释到哪里就执行到哪里,所以往往不会在一个地方等待,而是先把所有的代码执行完了在说。

比较灵活:

1.可以动态给对象添加属性,或者给属性赋值

2.只要你愿意,随时随地可以引入外部的js脚本,并且立即执行

三.回调函数

一句话概括:回调函数就是把一个函数当做参数,传入另一个函数中,传进去的目的仅仅是为了在某个时刻去执行它

函数必须打一个括号才能执行。

比如:

$(function(){ 

})
$( )

就是一个函数,打了括号,

function(){

}

就必须执行

真相:

var $ = function(callback){
callback()
}

egg:

var $ = function(id){
return {
element : document.getElementById(id) ,
on : function(event,callback){
this.element['on' + event] = callback;
}
}
}

如果js给dom添加一个点击事件,一般会这样写

dom.onclick = function(){

}

或

dom['onclick'] = function(){

}

调用egg:

window.onload = function(){
$('box').on('click',function(){
$('box').element.style.background = 'green';
});
}

四.数组

三大特性:

1.一般编程语言数组的索引只能是数字,js数组中,它的索引可以是任意类型

2.它是动态的,扩容方便

3.可以放任何对象,也可以放函数,比如:arr[3]();

赋值:扩容赋值,也可以用push()

常用方法:push() pop() slice():复制

数组转字符串:ids.join(',')  //转换成逗号分隔的字符串

五.Json

一个轻量级的数据交换格式,是一系列键值对的集合,用逗号分隔

js对象转成json格式字符串:

var person = {'name' : 'Jack'}
alert(JSON.stringify(person));

json字符串转成js对象

console.log(JSON.parse("{\"name\":\"Jack\"}"));

获取js对象属性详情

var obj = {

    message : 'Hello JavaScript!'

};

console.log(Object.getOwnPropertyDescriptor(obj,'message'));

obj里面有一个属性message,而message又有四个描述性的东西,分别是configurable(可配置),enumerable(可枚举),value(值),还有 writable(可写入)。这四样东西,专业术语叫做属性描述符,或者数据描述符。目前我们看到的数据描述符都被赋予了默认值,我们也可以通过defineProperty方法对其进行个性化配置。

比如,我们把message设置为只读:

var obj = {

    message : 'Hello JavaScript!'

};

console.log(Object.getOwnPropertyDescriptor(obj,'message'));

Object.defineProperty(obj,'message',{

    writable:false

});

obj.message = 'haha';

alert(obj.message);

修改无效,值不会变,严格模式下会报错(加一行代码:'use strict' )

六.闭包

闭包就是在函数被创建的时候,存在一个私有作用域,并且能够访问所有的父级作用域。因此理论上讲,任何函数都是一个闭包。

从应用的角度来看,闭包可以讲函数或者对象的私有数据暴露出去,而不影响全局作用域。

function house(){
var footBall = '足球';
/* 客厅 */
function livingRoom(){
var table = '餐桌';
var sofa = '沙发';
alert(footBall);
} /* 卧室 */
function bedRoom(){
var bed = '大床';
} livingRoom();
} house();

函数house是一个闭包,里面又定义了两个函数,分别是livingRoom客厅,和bedRoom卧室,它们各自形成一个自己的闭包。对它们而言,父级作用域就是house。

如何将私有数据暴露出去

1.定义一个全局变量。 缺点:全局作用域比较敏感,一不小心就会出现变量名重复的问题

2.js函数也是一个数据类型,你可以把它看成和int,float一样的东西,那么既然int可以当做函数的返回值,函数当然也可以!

请记住以下两句话:

如果函数被当做参数传进去了,它就是所谓的回调函数

如果函数被当成返回值return出去了,它就是把一个闭包return出去了

egg:

var test = function(){
var i = ;/* 定义一个函数将变量i暴露出去*/
var get = function(){
return i ;
}
return get; //将函数暴露出去
} function test2(){
var fn= test();//接收test暴露出来的函数
alert(fn()); //获得test中的私有数据
} test2();// 10

讲私有数据包装成json对象

var test = function(){
var apple = '苹果';
var pear = '梨子';
/* 定义一个函数将水果暴露出去*/
var getFruit = {
apple : apple ,
pear : pear
}
return getFruit; //将对象暴露出去
} function test2(){
var getFruit = test();//接收test暴露出来的函数
console.log(getFruit);
} test2();
var 紫金葫芦 = function(id){
var domElement = document.getElementById(id);
var returnObject = { domElement : domElement , backgroundColor : function(color){
domElement.style.backgroundColor = color;
}, click : function(fn){
domElement.onclick = fn;
}
};
return returnObject;
}

这些方法是不是和jQuery有点类似呢?

七.js类库

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title></title>
<script>
(function(win){
  var miniQuery = function(selector){
      var miniQuery = document.getElementById(selector);       return {
      obj : miniQuery , //将dom元素保存起来,再返回给你
      // ------------------------ css 相关 ------------------------//
      backgroundColor : function(color){
      this.obj.style.backgroundColor = color;
      }
      }
       }       win.$ = miniQuery;       })(window);       var $box = $('box');
      $box.backgroundColor('red');
</script>
</head>
<body>
<div style='padding: 50px;display:inline-block;background: blue;' id='box'></div>
</body>
</html>

学习参考地址:http://www.xiaotublog.com/

Javacript 学习笔记的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

随机推荐

  1. 18个你可能不相信是用CSS制作出来的东西

    与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和交互的能力,CSS集合HTML以及JavaScrip ...

  2. 使用Fiddler进行http抓包和调试

    本文目录 : Fiddler的工作原理 Fiddler的常用操作 支持https解密分析 Fiddler的断点调试 本文小结 参考文献 俗话说:工欲善其事,必先利其器. Fiddler是windows ...

  3. Java基础知识二次学习--第八章 流

    第八章 流   时间:2017年4月28日11:03:07~2017年4月28日11:41:54 章节:08章_01节 视频长度:21:15 内容:IO初步 心得: 所有的流在java.io包里面 定 ...

  4. (入门篇 NettyNIO开发指南)第三章-Netty入门应用

    作为Netty的第一个应用程序,我们依然以第2章的时间服务器为例进行开发,通过Netty版本的时间服务报的开发,让初学者尽快学到如何搭建Netty开发环境和!运行Netty应用程序. 如果你已经熟悉N ...

  5. Http学习之使用HttpURLConnection发送post和get请求(1)

    最常用的Http请求无非是get和post,get请求可以获取静态页面,也可以把参数放在URL字串后面,传递给servlet,post与get的不同之处在于post的参数不是放在URL字串里面,而是放 ...

  6. WebApi2 文件图片上传下载

    Asp.Net Framework webapi2 文件上传与下载 前端界面采用Ajax的方式执行 一.项目结构 1.App_Start配置了跨域访问,以免请求时候因跨域问题不能提交.具体的跨域配置方 ...

  7. 移动端网页meta设置和响应式

    苏宁易购WAP的meta分析 响应式 meta设置 媒体查询时读的width为viewport的宽度.viewport宽度为手机分辨率.比如note2 1280*720.需要重置为设备 640*360 ...

  8. offsetHeight/Width clientHeight/Width scrollHeight/Width等高宽算法

    图解: jquery里的对应取法: clientHeight/Width:innerHeight/Width(), offsetHeight/Width: outerHeight/Width(). w ...

  9. SQL Server中对存储过程的理解

    数据库的存储过程理解为,处理数据的子程序,写起来像函数,用起来像函数,在SQL Server中存储过程分为两大类,系统的和自定义的,系统的都放在master系统数据库中,自定义就是自己去写的,用DDL ...

  10. C# Ajax 返回json数据--前后台交互

    本人实习生一枚,遇到这个问题,网上找的试了试基本可以,自己搞了一下.可以供新手参考,大神如有指点,请不吝赐教. 版权声明:本文为博主原创文章,未经博主允许不得转载. 前台JavaScript代码: & ...