Downloaded 27 times
![Server
DOM
<html>
<head>
<script type='text/javascript'>
"<html>n<head><script … "
JS
Tokenize: alert, (, "hello world", ), ;
Parse:
[{ "value": "(", "arity": "binary",
"first": {"value": "alert"},
"second": [{ "value": "hello world"}]
}]
Run:
- lookup alert
- call with "hello world"
DOM
</script></head>
<body><h1>Hello World</h1></body>
</html>
GET http://helloworld.com/index.html
documentElement
script
documentElement
head
script
head
body
h1
Hello World](https://image.slidesharecdn.com/01basicjs-150507024403-lva1-app6891/75/Basic-JS-8-2048.jpg)
![JS is Dynamic
Compilation and execution happen together.
var propMap = {
val: "value", html: "innerHTML"
};
for(var fnName in propMap){
$.prototype[fnName] = (function(prop){
return function(){
return this[prop];
}
})(propMap[fnName]);
}](https://image.slidesharecdn.com/01basicjs-150507024403-lva1-app6891/75/Basic-JS-10-2048.jpg)
![Type associated with value, not variable.
var a = 1;
a = "one";
a = [1];
a = {one: 1};
JS is Weakly Typed](https://image.slidesharecdn.com/01basicjs-150507024403-lva1-app6891/75/Basic-JS-11-2048.jpg)
More Related Content
![[WEB UI BASIC] JavaScript 1탄](https://cdn.slidesharecdn.com/ss_thumbnails/javascript1-150426071310-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[WEB UI BASIC] CSS_1](https://cdn.slidesharecdn.com/ss_thumbnails/webuibasicweek2css-150419055801-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
Basic JS
- 1. JavaScript Training Goal TrainersFormat • Lecture • Exercises • Ask Questions! • bitovi/js-training
- 3.
- 4. JavaScript and theDOM var, primitives, and objects functions and closures this, and prototypes
- 5.
- 6. A dynamic, weaklytyped, prototype- based language with first-class functions. A language-neutral interface that allows programs to dynamically access and update the content, structure and style of documents. A document format based on SGML used to describe the elements of a hypertext document.
- 7. What Happens? GET http://helloworld.com/index.html <html> <head> <scripttype='text/javascript'> alert('hello world'); </script> </head> <body> <h1>Hello World</h1> </body> </html>
- 8. Server DOM <html> <head> <script type='text/javascript'> "<html>n<head><script …" JS Tokenize: alert, (, "hello world", ), ; Parse: [{ "value": "(", "arity": "binary", "first": {"value": "alert"}, "second": [{ "value": "hello world"}] }] Run: - lookup alert - call with "hello world" DOM </script></head> <body><h1>Hello World</h1></body> </html> GET http://helloworld.com/index.html documentElement script documentElement head script head body h1 Hello World
- 9. JavaScript is ... adynamic, weakly typed, prototype-based language with first-class functions. JavaScript != Java JavaScript == A real programming language JavaScript == ECMAScript == JScript JavaScript != Document Object Model
- 10. JS is Dynamic Compilationand execution happen together. var propMap = { val: "value", html: "innerHTML" }; for(var fnName in propMap){ $.prototype[fnName] = (function(prop){ return function(){ return this[prop]; } })(propMap[fnName]); }
- 11. Type associated withvalue, not variable. var a = 1; a = "one"; a = [1]; a = {one: 1}; JS is Weakly Typed
- 12. Treat like anyobject var square = function(x){ return x*x }, mult = function(f1, f2){ return function(n){ return f1(n)*f2(n); } }, bigF = mult(square, square), value = bigF(2); // 16 JS has 1st Class Functions CREATE RETURN ARG
- 13. Prototype looks upinherited and shared properties. has_hair JS is Prototype Based Mammal Chordate Animal Chordate Object Animal Object Animal p prototype proto proto has_spine toString prototype prototype
- 14. Summary JS Representation ofHTML and browser. Dynamic, weakly typed, prototype- based language with first-class functions and some data types. next week: Types Operators And Primitives
- 15. Questions? https://gitter.im/bitovi/js-training What’s your experiencelevel? What do you want to learn?
Editor's Notes
- #3 In the last 7 years, I’ve either worked on directly or overseen 30 different JavaScript projects for about 7 companies: - big companies and small companies - teams of 2 and teams of 30 - for apps that target IE6 to mobile, phonegap and node webkit - I’ve even used other open source projects
- #4 I think the key to JavaScript is really understanding what’s going on in memory. And the key to understanding what’s going on in memory is understanding what JS’s basic data types look like in memory and how JS’s operators are used to manipulate those data structures.
- #5 feel / hood / sausage abstraction to diagram what’s going on, something you can use to teach new JS developers. Fortunately there’s just a few things to get right. Before we begin … this is a training! None of Us / All of us Level of skill
- #7 a set of standards, a variety of SGML, used to tag the elements of ahypertext document
- #9 Request is made Response is HTML DOM is built Immediately starts parsing response Finds Script Tag, stop parsing, hand over to JS JS tokenizes JS Runs statement by statement Calls alert Alert waits until ‘OK’ is clicked JS finishes Parsing continues H1 is parsed, and displayed Douglas crockford