JavascriptDefinitiveGuideStudy - chapter1_2

865 views

Published on

FrontEnd클럽 http://www.facebook.com/groups/412532052102779

스터디 발표자료

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
865
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • modern websites, modern web browsers\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • http://www.ecma-international.org/publications/standards/Ecma-262.htm\nhttp://en.wikipedia.org/wiki/ECMAScript\n\n
  • input & output - networking, storage, graphics\nusually, web browser - “client-side javascript”, “dom script”\npart1-core, part2-host environment (web browser)\n
  • \n
  • 빠르게 훓어보겠다.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • climax of part1\n
  • 10. explains the regular expression grammar and demonstrates\nhow to use these “regexps” for textual pattern matching\n12. introduces two ways to use JavaScript outside of web browsers\n
  • \n
  • \n
  • climax of part1\n
  • climax of part1\n
  • climax of part1\n
  • climax of part1\n
  • climax of part1\n
  • 18. explains how to make scripted HTTP requests with JavaScript—a kind of networking API\n19. \n20. describes mechanisms for storing data on the client side for use in future browsing sessions.\n21. covers a clientside API for drawing arbitrary graphics in an HTML <canvas> tag\n
  • \n
  • http://c9.io/luicidfall/jsdefinitivestudy\n
  • \n
  • \n
  • 2byte\n2의16승가지\n2bit로 표현가능한건 몇가지 일까, 3bit로 표현가능한건 몇가지 일까\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • JavascriptDefinitiveGuideStudy - chapter1_2

    1. 1. JavascriptThe Definitive Guide
    2. 2. Agenda1. Introduction to javascript 1.1 Core Javascript 1.2 Client-Side Javascript Example - A Javascript Loan Calculator2. Lexical Structure
    3. 3. 1. Introduction to javascript 3
    4. 4. programming language of the web 4
    5. 5. most ubiquitous programming language in history 5
    6. 6. web development technologies HTML CSS Javascript 6
    7. 7. web development technologies HTML CSS Javascript (Content) 6
    8. 8. web development technologies HTML CSS (Content) (Presentation) Javascript 6
    9. 9. web development technologies HTML CSS Javascript (Content) (Presentation) (Behavior) 6
    10. 10. Introduction• high-level• dynamic• untyped• interpreted• well-suited to object-oriented• well-suited to functional programming style 7
    11. 11. history 8
    12. 12. APIHost Environment Core Javascript (text, array, dates, regx,,,) 9
    13. 13. Agenda1. Introduction to javascript 1.1 Core Javascript 1.2 Client-Side Javascript Example - A Javascript Loan Calculator2. Lexical Structure
    14. 14. 1.1 Core Javascriptchapter2. Lexical Structurechapter3. Types, Values, and Variableschapter4. Expressions and Operatorschapter5. Statementschapter6. Objectschapter7. Arrayschapter8. Functionschapter9. Classes and Modules 11
    15. 15. chapter2 . Lexical Structure// Anything following double slashes is an// English-language comment.// Read the comments carefully: they explain the// JavaScript code.var x; // Declare a variable named x.x = 0; // Now the variable x has the value 0x; // => 0: A variable evaluates to its value. 12
    16. 16. chapter3. Types,Values, and Variables// JavaScript supports several types of valuesx = 1; // Numbers.x = 0.01; // Just one Number type for integersx = "hello world"; // Strings of text in quotationx = JavaScript; // Single quote alsox = true; // Boolean values.x = false; // The other Boolean value.x = null;// Null is a special value means"no value"x = undefined; // Undefined is like null. 13
    17. 17. chapter4. Expressions and Operators 3 + 2; 3 - 2; 3 * 2; 3 / 2; points[1].x - points[0].x; "3" + "2"; count++; count--; count += 2; 14
    18. 18. chapter5. Statementsif (x >= 0) { return x;}else { return -x;}while(n > 1) { product *= n; n--;} 15
    19. 19. chapter6. Objectsvar book = { topic: "JavaScript", fat: true};book.topic;book["fat"];book.author = "Flanagan";book.contents = {}; 16
    20. 20. chapter7. Arraysvar primes = [2, 3, 5, 7];primes[0];primes.length;primes[primes.length-1];primes[4] = 9;var data = { trial1: [[1,2], [3,4]], trial2: [[2,3], [4,5]]}; 17
    21. 21. chapter8. Functionsfunction plus1(x) { return x+1;}plus1(y); 18
    22. 22. chapter9. Classes and Modulesfunction Point(x,y) { this.x = x; this.y = y;}var p = new Point(1, 1);p.x; 19
    23. 23. 1.1 Core Javascriptchapter10. PatternMatching with RegularExpressionschapter11. Javascript Subsets and Extensionschapter12. Server-Side Javascript 20
    24. 24. Agenda1. Introduction to javascript 1.1 Core Javascript 1.2 Client-Side Javascript Example - A Javascript Loan Calculator2. Lexical Structure
    25. 25. 1.2 Client-Side Javascriptchapter13. Javascript in Web Browserschapter14. The Window Objectchapter15. Scripting Documentschapter16. Scripting CSSchapter17. Handling Events 22
    26. 26. chapter13. Javascript in Web Browsers<html><head><script src="library.js"></script> </head><body><p>This is a paragraph of HTML</p><script>// And this is some client-side JavaScript code// literally embedded within the HTML file</script><p>Here is more HTML.</p></body></html> 23
    27. 27. chapter14. The Window Object<script>function moveon() { var answer = confirm("Ready to move on?"); if (answer) { window.location = "http://google.com"; }}setTimeout(moveon, 60000);</script> 24
    28. 28. chapter15. Scripting Documentsvar log = document.getElementById("debuglog");if (!log) { log = document.createElement("div"); log.id = "debuglog"; log.innerHTML = "<h1>Debug Log</h1>"; document.body.appendChild(log);}var pre = document.createElement("pre");var text = document.createTextNode(msg);pre.appendChild(text);log.appendChild(pre); 25
    29. 29. chapter16. Scripting CSSfunction hide(e, reflow) { if (reflow) { e.style.display = "none"; } else { e.style.visibility = "hidden"; }} 26
    30. 30. chapter17. Handling Events<script src="debug.js"></script><script src="hide.js"></script>Hello<button onclick="hide(this,true);debug(hide button 1);">Hide1</button><button onclick="hide(this);debug(hide button 2);">Hide2</button>World 27
    31. 31. 1.2 Client-Side Javascript• 18. Scripted HTTP• 20. Client-Side Storage• 21. Scripted Media and Graphics• 22. HTML5 APIs 28
    32. 32. Agenda1. Introduction to javascript 1.1 Core Javascript 1.2 Client-Side Javascript Example - A Javascript Loan Calculator2. Lexical Structure
    33. 33. Example - A Javascript Loan Calculator 30
    34. 34. Agenda1. Introduction to javascript 1.1 Core Javascript 1.2 Client-Side Javascript2. Lexical Structure
    35. 35. 2. Lexical Structure 32
    36. 36. 2.1 Charactor Set• Unicode character set • ECMAScript 3 - Unicode Version 2.1 or later • ECMAScript 5 - Unicode Version 3 or later• Case Sensitivity• "caf." === "cafu00e9" // => true 33
    37. 37. 2.2 Comments// This is a single-line comment./* This is also a comment */ // and here is another comment./** This is yet another comment.* It has multiple lines.*/ 34
    38. 38. 2.3 Literals12 // The number twelve1.2 // The number one point two"hello world" // A string of textHi // Another stringtrue // A Boolean valuefalse // The other Boolean value/javascript/gi // A "regular expression"null // Absence of an object{ x:1, y:2 } // An object initializer 35
    39. 39. 2.4 Identifiers and Reserved Wordsimy_variable_namev13_dummy.name$str 36
    40. 40. break delete function return typeofcase do if switch varcatch else in this voidcontinue false instanceof throw whiledebugger finally new true withdefault for null tryclass const enum export extends importsuperimplements let private public yieldinterface package protected staticarguments eval
    41. 41. 2.5 Optional Semicolonsvar y = x + f(a+b).toString()//JavaScript interprets the code like this:var y = x + f(a+b).toString(); 38
    42. 42. reference• ECMA-262 • http://www.ecma-international.org/publications/standards/ Ecma-262.htm) • http://en.wikipedia.org/wiki/ECMAScript 39

    ×