一.初探

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

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

对象调用属性！

对象调用属性！

对象调用属性！

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

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

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

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

二.语言特点

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

比较灵活：

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

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

三.回调函数

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

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

比如：

  1. $(function(){ 
  2.  
  3. })
  1. $( )

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

  1. function(){
  2.  
  3. }

就必须执行

真相：

  1. var $ = function(callback){
  2.      callback()
  3. }

egg：

  1. var $ = function(id){
  2.     return {
  3.         element : document.getElementById(id) ,
  4.         on : function(event,callback){
  5.             this.element['on' + event] = callback;
  6.         }
  7.     }
  8. }

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

  1. dom.onclick = function(){
  2.  
  3. }
  4.  
  5. 或
  6.  
  7. dom['onclick'] = function(){
  8.  
  9. }

调用egg：

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

四.数组

三大特性：

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

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

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

赋值：扩容赋值，也可以用push（）

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

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

五.Json

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

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

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

json字符串转成js对象

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

获取js对象属性详情

  1. var obj = {
  2.  
  3.     message : 'Hello JavaScript!'
  4.  
  5. };
  6.  
  7. console.log(Object.getOwnPropertyDescriptor(obj,'message'));

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

比如，我们把message设置为只读：

  1. var obj = {
  2.  
  3.     message : 'Hello JavaScript!'
  4.  
  5. };
  6.  
  7. console.log(Object.getOwnPropertyDescriptor(obj,'message'));
  8.  
  9. Object.defineProperty(obj,'message',{
  10.  
  11.     writable:false
  12.  
  13. });
  14.  
  15. obj.message = 'haha';
  16.  
  17. alert(obj.message);

修改无效，值不会变，严格模式下会报错（加一行代码：'use strict' ）

六.闭包

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

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

  1. function house(){
  2.     var footBall = '足球';
  3.     /* 客厅 */
  4.     function livingRoom(){
  5.         var table = '餐桌';
  6.         var sofa = '沙发';
  7.       alert(footBall);
  8.     }    
  9.  
  10.     /* 卧室 */
  11.     function bedRoom(){
  12.         var bed = '大床';
  13.     }
  14.  
  15.     livingRoom();
  16. }
  17.  
  18. house();

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

如何将私有数据暴露出去

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

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

请记住以下两句话：

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

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

egg：

  1. var test = function(){
  2.     var i = ;/* 定义一个函数将变量i暴露出去*/
  3.     var get = function(){
  4.         return i ;
  5.     }
  6.     return get; //将函数暴露出去
  7. }
  8.  
  9. function test2(){
  10.   var fn= test();//接收test暴露出来的函数
  11.   alert(fn()); //获得test中的私有数据
  12. }
  13.  
  14. test2();// 10

讲私有数据包装成json对象

  1. var test = function(){
  2.     var apple = '苹果';
  3.     var pear = '梨子';
  4.     /* 定义一个函数将水果暴露出去*/
  5.   var getFruit = {
  6.     apple : apple ,
  7.     pear : pear
  8.   }
  9.     return getFruit; //将对象暴露出去
  10. }
  11.  
  12. function test2(){
  13.   var getFruit = test();//接收test暴露出来的函数
  14.   console.log(getFruit);
  15. }
  16.  
  17. test2();
  1. var 紫金葫芦 = function(id){
  2.       var domElement = document.getElementById(id);
  3.     var returnObject = {
  4.  
  5.         domElement : domElement ,
  6.  
  7.         backgroundColor : function(color){
  8.             domElement.style.backgroundColor = color;
  9.         },
  10.  
  11.         click : function(fn){
  12.             domElement.onclick = fn;
  13.         }
  14.     };
  15.     return returnObject;
  16. }

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

七.js类库

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  6.         <title></title>
  7.         <script>
  8.             (function(win){
  9.             　　var miniQuery = function(selector){
  10.      　　　　　　var miniQuery = document.getElementById(selector);
  11.  
  12.      　　　　　　return {
  13.          　　　 　　obj : miniQuery , //将dom元素保存起来，再返回给你
  14.          　　　　　　// ------------------------ css 相关 ------------------------//
  15.          　　　　　　backgroundColor : function(color){
  16.              　　　　　　this.obj.style.backgroundColor = color;
  17.          　　　　　　}
  18.      　　　　　　}
  19. 　　　　　　　}
  20.  
  21.    　　　　　 win.$ = miniQuery;
  22.  
  23. 　　　　　　})(window);
  24.  
  25. 　　　　　　var $box = $('box');
  26. 　　　　　　$box.backgroundColor('red');
  27.         </script>
  28.     </head>
  29.     <body>
  30.         <div style='padding: 50px;display:inline-block;background: blue;' id='box'></div>
  31.     </body>
  32. </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. Day3-函数及作用域

    一.函数定义:一组代码片段用函数名封装起来,通过函数名的方式调用执行. 特性: 1.减少重复代码 2.使程序易扩展 3.使程序易维护 语法定义: def sayhi(): print("he ...

  2. Android官方架构组件介绍之LifeCycle

    Google 2017 I/O开发者大会于近日召开,在开发者大会上谷歌除了发布了Android O等一些新产品之外,也对Android代码的架构做出了一个官方的回应. Google 2017 I/O开 ...

  3. （转ORCLE导入导出命令）

    oracle数据库导入导出命令! Oracle数据导入导出imp/exp 功能:Oracle数据导入导出imp/exp就相当与oracle数据还原与备份.   大多情况都可以用Oracle数据导入导出 ...

  4. ES学习笔记

    ES学习 1. 安装 1.1 ES 安装配置 curl -O https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5. ...

  5. 前端设计技巧——用 Promise 处理交互和异步

    本文仅表达前端的一些设计技巧,如果您在查阅js技术,请忽略此文! 前端开发经常会遇到这样的场景: 当满足一定条件时,需要弹出一个模态框,以便接收用户的输入.然后根据不同的输入,进行不用的操作. (ps ...

  6. 项目管理之 SVN 管理软件 CornerStone for Mac

    常用的项目管理有 Git 和 SVN.之前公司一直使用的是 Git,使用的是 SourceTree 客户端,据说 Git 比 SVN 要好,只能说各有特点吧,有兴趣的可以查看下两个的区别. 下面是学习 ...

  7. Github 开源：使用控制器操作 WinForm/WPF 控件（ Sheng.Winform.Controls.Controller）

    利用午休时间继续把过去写的一些代码翻出来说一说,文章可能写的比较简略,但是我会努力把核心意思表达清楚,具体代码可直接访问 Github 获取. Github 地址:https://github.com ...

  8. 傻瓜式安装nginx以及负载均衡配置

    概述 需求 做了一个对内的http api应用.由于只有一台服务器,考虑到升级问题(即升级时会造成几秒钟用户访问不了),决定搭一个nginx,公共端口:9999,部署2套应用,端口:9981,9982 ...

  9. General Thread States

    对于实践中可能出现的各种General Thread States 以下列表描述了与常规查询处理关联的线程状态值,而不是更复杂的活动,例如复制. 其中许多仅用于在服务器中查找错误. after cre ...

  10. JavaSE教程-03Java中分支语句与四种进制转换-练习

    练习1: 老师如果带100或以上则请客吃饭 import java.util.Scanner; public class Test2{ public static void main(String[] ...