JavascriptDefinitiveGuideStudy - chapter1_2
Upcoming SlideShare
Loading in...5
×
 

JavascriptDefinitiveGuideStudy - chapter1_2

on

  • 647 views

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

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

스터디 발표자료

Statistics

Views

Total Views
647
Views on SlideShare
646
Embed Views
1

Actions

Likes
1
Downloads
7
Comments
0

1 Embed 1

http://nodeslide.herokuapp.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 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 JavascriptDefinitiveGuideStudy - chapter1_2 Presentation Transcript

  • JavascriptThe Definitive Guide
  • Agenda1. Introduction to javascript 1.1 Core Javascript 1.2 Client-Side Javascript Example - A Javascript Loan Calculator2. Lexical Structure
  • 1. Introduction to javascript 3
  • programming language of the web 4
  • most ubiquitous programming language in history 5
  • web development technologies HTML CSS Javascript 6
  • web development technologies HTML CSS Javascript (Content) 6
  • web development technologies HTML CSS (Content) (Presentation) Javascript 6
  • web development technologies HTML CSS Javascript (Content) (Presentation) (Behavior) 6
  • Introduction• high-level• dynamic• untyped• interpreted• well-suited to object-oriented• well-suited to functional programming style 7
  • history 8
  • APIHost Environment Core Javascript (text, array, dates, regx,,,) 9
  • Agenda1. Introduction to javascript 1.1 Core Javascript 1.2 Client-Side Javascript Example - A Javascript Loan Calculator2. Lexical Structure
  • 1.1 Core Javascriptchapter2. Lexical Structurechapter3. Types, Values, and Variableschapter4. Expressions and Operatorschapter5. Statementschapter6. Objectschapter7. Arrayschapter8. Functionschapter9. Classes and Modules 11
  • 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
  • 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
  • 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
  • chapter5. Statementsif (x >= 0) { return x;}else { return -x;}while(n > 1) { product *= n; n--;} 15
  • chapter6. Objectsvar book = { topic: "JavaScript", fat: true};book.topic;book["fat"];book.author = "Flanagan";book.contents = {}; 16
  • 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
  • chapter8. Functionsfunction plus1(x) { return x+1;}plus1(y); 18
  • chapter9. Classes and Modulesfunction Point(x,y) { this.x = x; this.y = y;}var p = new Point(1, 1);p.x; 19
  • 1.1 Core Javascriptchapter10. PatternMatching with RegularExpressionschapter11. Javascript Subsets and Extensionschapter12. Server-Side Javascript 20
  • Agenda1. Introduction to javascript 1.1 Core Javascript 1.2 Client-Side Javascript Example - A Javascript Loan Calculator2. Lexical Structure
  • 1.2 Client-Side Javascriptchapter13. Javascript in Web Browserschapter14. The Window Objectchapter15. Scripting Documentschapter16. Scripting CSSchapter17. Handling Events 22
  • 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
  • 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
  • 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
  • chapter16. Scripting CSSfunction hide(e, reflow) { if (reflow) { e.style.display = "none"; } else { e.style.visibility = "hidden"; }} 26
  • 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
  • 1.2 Client-Side Javascript• 18. Scripted HTTP• 20. Client-Side Storage• 21. Scripted Media and Graphics• 22. HTML5 APIs 28
  • Agenda1. Introduction to javascript 1.1 Core Javascript 1.2 Client-Side Javascript Example - A Javascript Loan Calculator2. Lexical Structure
  • Example - A Javascript Loan Calculator 30
  • Agenda1. Introduction to javascript 1.1 Core Javascript 1.2 Client-Side Javascript2. Lexical Structure
  • 2. Lexical Structure 32
  • 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
  • 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
  • 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
  • 2.4 Identifiers and Reserved Wordsimy_variable_namev13_dummy.name$str 36
  • 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
  • 2.5 Optional Semicolonsvar y = x + f(a+b).toString()//JavaScript interprets the code like this:var y = x + f(a+b).toString(); 38
  • reference• ECMA-262 • http://www.ecma-international.org/publications/standards/ Ecma-262.htm) • http://en.wikipedia.org/wiki/ECMAScript 39