SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
Front-end dev
by Paul Comanici (darkyndy)
JavaScript is fun
[] + [] = ?
JavaScript is fun
[] + [] = ""

{} + {} = ?
JavaScript is fun
[] + [] = ""

{} + {} = NaN

1 + "-1" = ?
JavaScript is fun
[] + [] = ""

{} + {} = NaN

1 + "-1" = "1-1"

NaN + [] = ?
JavaScript is fun
[] + [] = ""

{} + {} = NaN

1 + "-1" = "1-1"

NaN + [] = "NaN"

1 + NaN = ?
JavaScript is fun
[] + [] = ""

{} + {} = NaN

1 + "-1" = "1-1"

NaN + [] = "NaN"

1 + NaN = NaN
JavaScript patterns
function () {
   var x = 0;
   if (x === 1) {
        var y = 1;
        //execute other logic...
   } else if (x === 2) {
        var z = 2;
        //custom logic
   }
}
JavaScript patterns
function () {                    Single var pattern
   var x = 0;                    Benefits:
                                 1. Provides a single place to look for all the local
   if (x === 1) {                variables needed by the function
                                 2. Prevents logical errors when a variable is used
        var y = 1;               before it's defined
        //execute other logic... 3. Helps you remember to declare variables and
                                 therefore minimize globals
                                 4. Is less code (to type and to transfer over the wire)
   } else if (x === 2) {
        var z = 2;
        //custom logic
   }
}
JavaScript patterns
var Animal = (function () {
      "use strict";
      var type = "cat",
           defaultType = "cat";
      return {
           getType: function () {
                return type;
           },
           setType: function (customType) {
                customType = customType || defaultType;
                type = customType;
           }
      };
}());
JavaScript patterns
var Animal = (function () {
      "use strict";
      var type = "cat",
           defaultType = "cat";            Module pattern
      return {
           getType: function () {
                return type;
           },
           setType: function (customType) {
                customType = customType || defaultType;
                type = customType;
           }
      };
}());
JavaScript patterns
var Animal = (function () {
        "use strict";
        var type = "cat",
               defaultType = "cat",
               getType = null,
               setType = null;
        getType = function () {
               return type;
        };
        setType = function (customType) {
               customType = customType || defaultType;
               type = customType;
        };
        return {
               getType: getType,
               setType: setType
        };
}());
JavaScript patterns
var Animal = (function () {
        "use strict";
        var type = "cat",
               defaultType = "cat",                 Revealing module pattern
               getType = null,
               setType = null;
        getType = function () {
               return type;
        };
        setType = function (customType) {
               customType = customType || defaultType;
               type = customType;
        };
        return {
               getType: getType,
               setType: setType
        };
}());
JavaScript patterns
JavaScript namespacing and closures combined with module pattern


base.js -> namespace creator
car.js -> module
JavaScript patterns (base.js)
(function () {                                                                        jQuery.each(nsp, function (j, n) {
                                                                                             pp = make(n, pp);
       "use strict";                                                                  });
       /*global window, jQuery, NK */                                                 pp.__name__ = ns;
       if (typeof NK !== "undefined") {                                               ret.push(pp);
                                                                                      switch (ret.length) {
                 return;                                                              case 0:
       }                                                                                     return null;
       window.NK = {                                                                  case 1:
                                                                                             return ret[0];
                 namespace : function (ns) {
                                                                                      default:
                           var ret = [],                                                     return ret;
                                   make = function (n, parent) {                      }
                                                                                  }
                                           parent = parent ||
                                                                             };
window;
                                                                     }());
                                           if (!parent.
hasOwnProperty(n)) {
                                                   parent[n] = {};
                                           }
                                           return parent[n];
                                   },
                                   nsp = ns.split("."),
                                   pp = null;
JavaScript patterns (car.js)
(function () {                                                                     getPropr: function (p) {
         "use strict";                                                                   if (p in my) {
                                                                                                  return my[p];
         /*global jQuery, NK */
                                                                                         }
         var my = {
                                                                                         return null;
                         type: "",                                                 },
                         color: "",                                                setPropr: function (p, v) {
                         origin: "",                                                     if (p in my) {
                         init: function () {                                                      my[p] = v;
                                     my.type = "audi";
                                                                                         }
                                                                                   }
                         },
                                                                               },
                         setColor: function (c) {                              obj = NK.namespace("NK.Car");
                                     c = c || "black";                 jQuery.extend(obj, {
                                     my.color = c;                   init: my.init,
                         },                                                    getPropr: my.getPropr,
                         getColor: function () {
                                                                               setPropr: my.setPropr,
                                                                               getColor: my.getColor,
                                     return my.color;
                                                                               setColor: my.setColor,
                         },                                                    setFerrari: my.setFerrari
                         setFerrari: function () {             });
                                     my.type = "ferrari";   }());
                                     my.color = "red";
                         },
JSLint
 1. function test() {
 2.      a = new Array();
 3.      a["d"] = "08";
 4.      aa = [1,2,3];
 5.      c = parseInt(a["d"]);
 6.      if (c == 8) {
 7.            for (var i=0;i<aa.length; i++){
 8.                  if (aa[i] == 2) console.log("true")
 9.                  console.log("false")
10.            }
11.      }
12. }
Google Developer Tools
- console
- debugger
- JS breakpoints
- DOM breakpoints
- live JS edit
- modify JS in debug
- access to private methods in debug
Google Developer Tools
Suggestions for sites to debug?
The end
Thanks,
          Paul Comanici (darkyndy)

Weitere ähnliche Inhalte

Was ist angesagt?

响应式编程及框架
响应式编程及框架响应式编程及框架
响应式编程及框架jeffz
 
Coffee Scriptでenchant.js
Coffee Scriptでenchant.jsCoffee Scriptでenchant.js
Coffee Scriptでenchant.jsNaoyuki Totani
 
The Ring programming language version 1.7 book - Part 83 of 196
The Ring programming language version 1.7 book - Part 83 of 196The Ring programming language version 1.7 book - Part 83 of 196
The Ring programming language version 1.7 book - Part 83 of 196Mahmoud Samir Fayed
 
Coffee script
Coffee scriptCoffee script
Coffee scripttimourian
 
Ian 20150116 java script oop
Ian 20150116 java script oopIan 20150116 java script oop
Ian 20150116 java script oopLearningTech
 
Clojure: The Art of Abstraction
Clojure: The Art of AbstractionClojure: The Art of Abstraction
Clojure: The Art of AbstractionAlex Miller
 
Linguistic Symbiosis between Actors and Threads
Linguistic Symbiosis between Actors and ThreadsLinguistic Symbiosis between Actors and Threads
Linguistic Symbiosis between Actors and ThreadsESUG
 
Using QString effectively
Using QString effectivelyUsing QString effectively
Using QString effectivelyRoman Okolovich
 
Start Wrap Episode 11: A New Rope
Start Wrap Episode 11: A New RopeStart Wrap Episode 11: A New Rope
Start Wrap Episode 11: A New RopeYung-Yu Chen
 
Python-GTK
Python-GTKPython-GTK
Python-GTKYuren Ju
 
Python and GObject Introspection
Python and GObject IntrospectionPython and GObject Introspection
Python and GObject IntrospectionYuren Ju
 
Kotlin Advanced - Apalon Kotlin Sprint Part 3
Kotlin Advanced - Apalon Kotlin Sprint Part 3Kotlin Advanced - Apalon Kotlin Sprint Part 3
Kotlin Advanced - Apalon Kotlin Sprint Part 3Kirill Rozov
 
Something about Golang
Something about GolangSomething about Golang
Something about GolangAnton Arhipov
 
連邦の白いヤツ 「Objective-C」
連邦の白いヤツ 「Objective-C」連邦の白いヤツ 「Objective-C」
連邦の白いヤツ 「Objective-C」matuura_core
 
GoLightly: A Go Library For Building Virtual Machines
GoLightly: A Go Library For Building Virtual MachinesGoLightly: A Go Library For Building Virtual Machines
GoLightly: A Go Library For Building Virtual MachinesEleanor McHugh
 
Better Software: introduction to good code
Better Software: introduction to good codeBetter Software: introduction to good code
Better Software: introduction to good codeGiordano Scalzo
 
Doc Parsers Api Cheatsheet 1 0
Doc Parsers Api Cheatsheet 1 0Doc Parsers Api Cheatsheet 1 0
Doc Parsers Api Cheatsheet 1 0Oleh Burkhay
 
Virtual machine and javascript engine
Virtual machine and javascript engineVirtual machine and javascript engine
Virtual machine and javascript engineDuoyi Wu
 
Javascript foundations: Function modules
Javascript foundations: Function modulesJavascript foundations: Function modules
Javascript foundations: Function modulesJohn Hunter
 

Was ist angesagt? (20)

响应式编程及框架
响应式编程及框架响应式编程及框架
响应式编程及框架
 
Coffee Scriptでenchant.js
Coffee Scriptでenchant.jsCoffee Scriptでenchant.js
Coffee Scriptでenchant.js
 
The Ring programming language version 1.7 book - Part 83 of 196
The Ring programming language version 1.7 book - Part 83 of 196The Ring programming language version 1.7 book - Part 83 of 196
The Ring programming language version 1.7 book - Part 83 of 196
 
Coffee script
Coffee scriptCoffee script
Coffee script
 
Ian 20150116 java script oop
Ian 20150116 java script oopIan 20150116 java script oop
Ian 20150116 java script oop
 
Clojure: The Art of Abstraction
Clojure: The Art of AbstractionClojure: The Art of Abstraction
Clojure: The Art of Abstraction
 
Linguistic Symbiosis between Actors and Threads
Linguistic Symbiosis between Actors and ThreadsLinguistic Symbiosis between Actors and Threads
Linguistic Symbiosis between Actors and Threads
 
Using QString effectively
Using QString effectivelyUsing QString effectively
Using QString effectively
 
Start Wrap Episode 11: A New Rope
Start Wrap Episode 11: A New RopeStart Wrap Episode 11: A New Rope
Start Wrap Episode 11: A New Rope
 
Python-GTK
Python-GTKPython-GTK
Python-GTK
 
Python and GObject Introspection
Python and GObject IntrospectionPython and GObject Introspection
Python and GObject Introspection
 
EMFPath
EMFPathEMFPath
EMFPath
 
Kotlin Advanced - Apalon Kotlin Sprint Part 3
Kotlin Advanced - Apalon Kotlin Sprint Part 3Kotlin Advanced - Apalon Kotlin Sprint Part 3
Kotlin Advanced - Apalon Kotlin Sprint Part 3
 
Something about Golang
Something about GolangSomething about Golang
Something about Golang
 
連邦の白いヤツ 「Objective-C」
連邦の白いヤツ 「Objective-C」連邦の白いヤツ 「Objective-C」
連邦の白いヤツ 「Objective-C」
 
GoLightly: A Go Library For Building Virtual Machines
GoLightly: A Go Library For Building Virtual MachinesGoLightly: A Go Library For Building Virtual Machines
GoLightly: A Go Library For Building Virtual Machines
 
Better Software: introduction to good code
Better Software: introduction to good codeBetter Software: introduction to good code
Better Software: introduction to good code
 
Doc Parsers Api Cheatsheet 1 0
Doc Parsers Api Cheatsheet 1 0Doc Parsers Api Cheatsheet 1 0
Doc Parsers Api Cheatsheet 1 0
 
Virtual machine and javascript engine
Virtual machine and javascript engineVirtual machine and javascript engine
Virtual machine and javascript engine
 
Javascript foundations: Function modules
Javascript foundations: Function modulesJavascript foundations: Function modules
Javascript foundations: Function modules
 

Ähnlich wie front-end dev

Design patterns in javascript
Design patterns in javascriptDesign patterns in javascript
Design patterns in javascriptMiao Siyu
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript IntroductionDmitry Sheiko
 
Engineering JavaScript
Engineering JavaScriptEngineering JavaScript
Engineering JavaScriptJim Purbrick
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScriptJulie Iskander
 
Type script, for dummies
Type script, for dummiesType script, for dummies
Type script, for dummiessantiagoaguiar
 
Joose @jsconf
Joose @jsconfJoose @jsconf
Joose @jsconfmalteubl
 
[2019-07] GraphQL in depth (serverside)
[2019-07] GraphQL in depth (serverside)[2019-07] GraphQL in depth (serverside)
[2019-07] GraphQL in depth (serverside)croquiscom
 
Ast transformations
Ast transformationsAst transformations
Ast transformationsHamletDRC
 
Logic Equations Resolver J Script
Logic Equations Resolver   J ScriptLogic Equations Resolver   J Script
Logic Equations Resolver J ScriptRoman Agaev
 
Scala in practice
Scala in practiceScala in practice
Scala in practicepatforna
 
Java script object model
Java script object modelJava script object model
Java script object modelJames Hsieh
 
Modul Praktek Java OOP
Modul Praktek Java OOP Modul Praktek Java OOP
Modul Praktek Java OOP Zaenal Arifin
 
The Canvas API for Rubyists
The Canvas API for RubyistsThe Canvas API for Rubyists
The Canvas API for Rubyistsdeanhudson
 
Bindings: the zen of montage
Bindings: the zen of montageBindings: the zen of montage
Bindings: the zen of montageKris Kowal
 
Groovy Ast Transformations (greach)
Groovy Ast Transformations (greach)Groovy Ast Transformations (greach)
Groovy Ast Transformations (greach)HamletDRC
 

Ähnlich wie front-end dev (20)

Design patterns in javascript
Design patterns in javascriptDesign patterns in javascript
Design patterns in javascript
 
Scala in practice
Scala in practiceScala in practice
Scala in practice
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
Engineering JavaScript
Engineering JavaScriptEngineering JavaScript
Engineering JavaScript
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
 
Type script, for dummies
Type script, for dummiesType script, for dummies
Type script, for dummies
 
Joose @jsconf
Joose @jsconfJoose @jsconf
Joose @jsconf
 
[2019-07] GraphQL in depth (serverside)
[2019-07] GraphQL in depth (serverside)[2019-07] GraphQL in depth (serverside)
[2019-07] GraphQL in depth (serverside)
 
Javascript
JavascriptJavascript
Javascript
 
Ast transformations
Ast transformationsAst transformations
Ast transformations
 
Scala 2013 review
Scala 2013 reviewScala 2013 review
Scala 2013 review
 
Say It With Javascript
Say It With JavascriptSay It With Javascript
Say It With Javascript
 
Logic Equations Resolver J Script
Logic Equations Resolver   J ScriptLogic Equations Resolver   J Script
Logic Equations Resolver J Script
 
Scala in practice
Scala in practiceScala in practice
Scala in practice
 
Java script object model
Java script object modelJava script object model
Java script object model
 
Modul Praktek Java OOP
Modul Praktek Java OOP Modul Praktek Java OOP
Modul Praktek Java OOP
 
Json.parse() in JavaScript
Json.parse() in JavaScriptJson.parse() in JavaScript
Json.parse() in JavaScript
 
The Canvas API for Rubyists
The Canvas API for RubyistsThe Canvas API for Rubyists
The Canvas API for Rubyists
 
Bindings: the zen of montage
Bindings: the zen of montageBindings: the zen of montage
Bindings: the zen of montage
 
Groovy Ast Transformations (greach)
Groovy Ast Transformations (greach)Groovy Ast Transformations (greach)
Groovy Ast Transformations (greach)
 

Kürzlich hochgeladen

AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandIES VE
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPTiSEO AI
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyUXDXConf
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfFIDO Alliance
 

Kürzlich hochgeladen (20)

AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 

front-end dev

  • 1. Front-end dev by Paul Comanici (darkyndy)
  • 3. JavaScript is fun [] + [] = "" {} + {} = ?
  • 4. JavaScript is fun [] + [] = "" {} + {} = NaN 1 + "-1" = ?
  • 5. JavaScript is fun [] + [] = "" {} + {} = NaN 1 + "-1" = "1-1" NaN + [] = ?
  • 6. JavaScript is fun [] + [] = "" {} + {} = NaN 1 + "-1" = "1-1" NaN + [] = "NaN" 1 + NaN = ?
  • 7. JavaScript is fun [] + [] = "" {} + {} = NaN 1 + "-1" = "1-1" NaN + [] = "NaN" 1 + NaN = NaN
  • 8. JavaScript patterns function () { var x = 0; if (x === 1) { var y = 1; //execute other logic... } else if (x === 2) { var z = 2; //custom logic } }
  • 9. JavaScript patterns function () { Single var pattern var x = 0; Benefits: 1. Provides a single place to look for all the local if (x === 1) { variables needed by the function 2. Prevents logical errors when a variable is used var y = 1; before it's defined //execute other logic... 3. Helps you remember to declare variables and therefore minimize globals 4. Is less code (to type and to transfer over the wire) } else if (x === 2) { var z = 2; //custom logic } }
  • 10. JavaScript patterns var Animal = (function () { "use strict"; var type = "cat", defaultType = "cat"; return { getType: function () { return type; }, setType: function (customType) { customType = customType || defaultType; type = customType; } }; }());
  • 11. JavaScript patterns var Animal = (function () { "use strict"; var type = "cat", defaultType = "cat"; Module pattern return { getType: function () { return type; }, setType: function (customType) { customType = customType || defaultType; type = customType; } }; }());
  • 12. JavaScript patterns var Animal = (function () { "use strict"; var type = "cat", defaultType = "cat", getType = null, setType = null; getType = function () { return type; }; setType = function (customType) { customType = customType || defaultType; type = customType; }; return { getType: getType, setType: setType }; }());
  • 13. JavaScript patterns var Animal = (function () { "use strict"; var type = "cat", defaultType = "cat", Revealing module pattern getType = null, setType = null; getType = function () { return type; }; setType = function (customType) { customType = customType || defaultType; type = customType; }; return { getType: getType, setType: setType }; }());
  • 14. JavaScript patterns JavaScript namespacing and closures combined with module pattern base.js -> namespace creator car.js -> module
  • 15. JavaScript patterns (base.js) (function () { jQuery.each(nsp, function (j, n) { pp = make(n, pp); "use strict"; }); /*global window, jQuery, NK */ pp.__name__ = ns; if (typeof NK !== "undefined") { ret.push(pp); switch (ret.length) { return; case 0: } return null; window.NK = { case 1: return ret[0]; namespace : function (ns) { default: var ret = [], return ret; make = function (n, parent) { } } parent = parent || }; window; }()); if (!parent. hasOwnProperty(n)) { parent[n] = {}; } return parent[n]; }, nsp = ns.split("."), pp = null;
  • 16. JavaScript patterns (car.js) (function () { getPropr: function (p) { "use strict"; if (p in my) { return my[p]; /*global jQuery, NK */ } var my = { return null; type: "", }, color: "", setPropr: function (p, v) { origin: "", if (p in my) { init: function () { my[p] = v; my.type = "audi"; } } }, }, setColor: function (c) { obj = NK.namespace("NK.Car"); c = c || "black"; jQuery.extend(obj, { my.color = c; init: my.init, }, getPropr: my.getPropr, getColor: function () { setPropr: my.setPropr, getColor: my.getColor, return my.color; setColor: my.setColor, }, setFerrari: my.setFerrari setFerrari: function () { }); my.type = "ferrari"; }()); my.color = "red"; },
  • 17. JSLint 1. function test() { 2. a = new Array(); 3. a["d"] = "08"; 4. aa = [1,2,3]; 5. c = parseInt(a["d"]); 6. if (c == 8) { 7. for (var i=0;i<aa.length; i++){ 8. if (aa[i] == 2) console.log("true") 9. console.log("false") 10. } 11. } 12. }
  • 18. Google Developer Tools - console - debugger - JS breakpoints - DOM breakpoints - live JS edit - modify JS in debug - access to private methods in debug
  • 19. Google Developer Tools Suggestions for sites to debug?
  • 20. The end Thanks, Paul Comanici (darkyndy)