Download as PDF, PPTX
![Operator precedence
Character Meaning
. [] () field access, array indexing, function calls
++ — - ~ delete new typeof unary operators, return, object creation
* / % multiplication, division, modulo
+ - + addition, subtraction, concatenation
<< >> bit shifting
< <= > >= instanceof comparison
!= === !== equality, inequality
& bitwise AND
^ bitwise XOR](https://image.slidesharecdn.com/javascriptfoundationsday1-160319150710/75/JavaScript-Foundations-Day1-42-2048.jpg)
Uploaded byTroy Miles
JavaScript Foundations Day1
This document provides an agenda and overview for a two-day JavaScript foundations training course taught by Troy Miles. Day one covers JavaScript fundamentals like variables, data types, operators, and functions. It also covers controlling program flow and object-oriented programming. Day two covers working with objects and JSON, functional programming, good coding practices, and an overview of ECMAScript 2015 features. The document provides tips for participants to follow along, do exercises, and ask questions. It also includes summaries of key JavaScript concepts to be covered each day like the global object, equality operators, and string and date object methods.
More Related Content
Similar to JavaScript Foundations Day1
JavaScript Foundations Day1
- 1.
- 2. JavaScript Foundations Troy Miles 19& 20 March 2016
- 3. Hi, I’m TroyMiles @therockncoder Over 36 years of programming experience Book and video author Speaker and writer on all things web & mobile rockncoder@gmail.com https://www.youtube.com/user/rockncoder/
- 4. Agenda Day One Introductionto JavaScript JavaScript Fundamentals Using Functions Controlling Program Flow Object-Oriented Program
- 5. Agenda Day Two Workingwith Objects and JSON Functional Programing in JavaScript Good Coding Practices ES2015 Overview (formerly known as ES6) Summary
- 6. Tips Follow along Do theexercises Help each other ASK QUESTIONS
- 7.
- 8. Introduction to JavaScript WhereJavaScript came from? JavaScript in a nutshell Web scripting fundamentals JavaScript vs. the browser
- 9. Where JavaScript came from? Createdby Brendan Eich at Netscape in 1995 Initial version developed in about 10 days Previously named Mocha and LiveScript "JavaScript" is a trademark of Oracle Corporation. Standardized by the ECMA first in 1997 as ECMA-262
- 10. ECMAScript Versions Version Date ES1June 1997 ES2 June 1998 ES3 December 1999 ES4 DOA 2006 ES5 December 2009 ES6/ES2015 June 2015 ES2016 2016
- 11. Where is itused? Web browsers Servers Mobile Databases Computer Games PDF files via Adobe's Acrobat & Reader
- 12. Rankings of JSpopularity 8th according to TIOBE 7th according to IEEE 7th according to the PYPL 2nd according to Mashable 1st according to RedMonk
- 13. –Wikipedia “JavaScript is ahigh-level, dynamic, untyped, and interpreted programming language.”
- 14. JavaScript in anutshell high-level - can used to build any kind of app dynamic - data can be changed on the fly untyped - variables can be use interpreted - isn’t compiled, executed on the fly
- 15. Web scripting fundamentals JavaScriptis place on a web page one of two ways: inline external file
- 16. More on scripting Bestpractice is to place JS near the end of the body tag The “Language” attribute is not needed
- 17. JavaScript vs. thebrowser Many properties and methods are not part of the JavaScript language They are associated with one of five browser objects: History, Location, Navigator, Screen, and Window No standard for any of these objects They might not be present in other environments Example: no alert() in Node.js
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. Lab #1 Write asmall program that: using alerts displays the current browser language then displays the user agent then then loads http://www.amazon.com/
- 24. The fundamentals The globalobject Declaring variables JavaScript types Type conversion Equality operators Strict mode Operators Operator precedence Number object Math object Date object String object RegEx object
- 25. Comments Same as C++,C#, and Java // single line comment /* multi-line comment */
- 26. The global object Thereis no standard for the “global” object All browsers implement it as the “window” Avoid using the global object! In non-strict mode, global this points to window
- 27. Declaring variables Variables canbe declared explicitly or implicitly Explicitly uses var keyword Implicitly omits var var <name> <optional assignment> Always declare using the var keyword
- 28. Variable names Start witha letter, underscore, or dollar sign Followed by letters, underscores, dollar signs or numbers Used for statements, variables, parameters, property names, operators, and labels A name can't be a reserved words
- 29. Variables var - declaresa variable with optional initialization An uninitialized variable’s value is undefined undefined is both a type and a value var a; // type is undefined, value is undefined var b = “Happy"; // type is string, value is “Happy”
- 30. JavaScript data types boolean- true or false number - 64 bit floating point string - “butter monkey” or ‘butter monkey’ object array - a mix collection of any of the above undefined - both a type and a value null - both a type and a value
- 31. Type constructors DON’T USETHESE! Array() Object() Number(object) String(object) Boolean()
- 32. NaN, Not anumber When there is an error while operating with numbers, NaN is generated It is toxic NaN != NaN To detect: IsNaN(value)
- 33. Type conversion To String,use toString() String to number: To integer - parseInt(<string>, radix) To float - parseFloat(<string>)
- 34. Quick and dirtyconversion convert to string: number + “” convert to number: +”123” (string must be all digits) convert to binary: !!<expression>
- 35. Equality operators JavaScript hastwo equality operators The first is == The second is === Always test equality with the triple equal
- 36. if statement Changes theflow of execution based of the value of an expression If the expression is “truthy”, the then block is executed The else block is optional and executed when the expression is “falsy”
- 37. Falsy values false null undefined The emptystring ‘’ The number 0 The number NaN
- 38. Truthy values All othervalues are truthy, including: true the string ‘false’ all objects, including empty ones
- 39. Strict mode 'use strict’;or "use strict;" First line of file or function Can break working code!! More stringent checking Enables ES5 features
- 40. Strict mode Variables mustbe declared Functions defined only at the top scope level “this” is undefined at the global level Throws error when you forget the 'new' keyword in constructor Can't use the same function parameter twice
- 41. Falsey Type Results null FALSE undefinedFALSE Number if 0 or NaN, FALSE String if length = 0, FALSE Object TRUE
- 42. Operator precedence Character Meaning .[] () field access, array indexing, function calls ++ — - ~ delete new typeof unary operators, return, object creation * / % multiplication, division, modulo + - + addition, subtraction, concatenation << >> bit shifting < <= > >= instanceof comparison != === !== equality, inequality & bitwise AND ^ bitwise XOR
- 43. Operator precedence (cont) CharacterMeaning | bitwise OR && logical AND || logical OR ?: conditional = assignment , multiple evaluation
- 44.
- 45.
- 46.
- 47. Lab #2 Using somemath object methods, write a function that returns a random integer from 1 to 6 inclusive Think like a dice
- 48.
- 49.
- 50. Why does getTimezoneOffset()return minutes, not hours?
- 51. Lab #3 Determine thenumber of days since January 1, 1970? Please give an integer result
- 52.
- 53.
- 54.
- 55. RegEx meta characters .- any character w - word character W - not a word character d - a digit D - a non-digit s - a white space S - a non white space b - at the beginning of a word B - not at the beginning of a word 0 - NUL character n - new line f - form feed r - carriage return t - tab v - vertical tab
- 56. Functions Syntax Variable scoping Passing arguments Returninga value 4 ways to call a function Named functions Anonymous functions Callbacks Recursion Closure
- 57. Object-oriented Programming What is object-orientedprogramming? Class inheritance vs prototypal inheritance Object creation in JavaScript Extending and inheriting objects Encapsulation