SlideShare une entreprise Scribd logo
1  sur  26
Sponsored by Upsilon Pi Epsilon The Computer Science Honors Society Javascript
JavaScript : a  brief  history ,[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript : the basics <script> …  JavaScript code goes here…  </script> ,[object Object],[object Object],[object Object],[object Object],<script  src=”someJSFile.js” ></script>
JavaScript : the basics <html>  <head> <title>… the title of the document… </title>  <script type=&quot;text/Javascript&quot;> …  JavaScript code…  </script>  </head>  <body> …  HTML Code/Tags/Content whatever…  </body>  </html>
JavaScript : the basics ,[object Object],[object Object],[object Object],[object Object]
JavaScript : Hello World <html>  <head> <title>JavaScript-Hello-World</title>  <script type=&quot;text/Javascript&quot;>  function greetings(sender) { alert (“Hello World!”);  }  </script>  </head> <body  onLoad=&quot;greetings();“ >  <h1>Javascript Hello World!</h1>  </body>  </html>
JavaScript : Challenge! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript : Types ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript : Numbers ,[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript : Strings ,[object Object],[object Object],[object Object],[object Object]
JavaScript : Other Types ,[object Object],[object Object],[object Object],[object Object]
JavaScript : Operators ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript : Objects ,[object Object],[object Object],[object Object],[object Object]
JavaScript : Objects var obj= new Object(); var Obj { }; Create obj.name= “John”; obj[“name”]= “John”; Add Properties Object Literal Syntax var email { message: “Hi Pamela!”, details: { to: “Pamela”, from: “Ross” } }
JavaScript : Arrays var a= new Array(); a[0]= “red”; a[1]= “blue; var a= {“red”, “blue”}; Create ,[object Object],[object Object],[object Object],[object Object]
JavaScript : Functions ,[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript : Functions function add(x, y) { var total = x + y; return total; } > add() NaN > add(2, 3) 5
JavaScript : Functions function avg() { var sum = 0; for (var i=0, j=arguments.length; i<j; i++)  { sum += arguments[i]; } return sum/arguments.length; } > avg(2, 3, 4, 5) 3.5 > avg.apply(null, [2, 3, 4, 5]) 3.5
JavaScript : Functions ,[object Object],[object Object],[object Object],[object Object]
JavaScript : Classes ,[object Object],[object Object],[object Object],function Person(first, last) { this.first = first; this.last = last; this.fullName = function() { return this.first + ' ' + this.last; } this.fullNameReversed = function() { return this.last + ', ' + this.first; } } var ross = new Person(&quot;Ross&quot;, &quot;Boucher&quot;);
JavaScript : Classes ,[object Object],[object Object],function personFullName() { return this.first + ' ' + this.last; } function personFullNameReversed() { return this.last + ', ' + this.first; } function Person(first, last) { this.first = first; this.last = last; this.fullName = personFullName; this.fullNameReversed = personFullNameReversed; }
JavaScript : Classes ,[object Object],function Person(first, last) { this.first = first; this.last = last; } Person.prototype.fullName = function() { return this.first + ' ' + this.last; } Person.prototype.fullNameReversed = function() { return this.last + ', ' + this.first; } var ross= new Person(“Ross”, “Boucher”);
JavaScript : Prototype ,[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript : DOM ,[object Object],[object Object],[object Object],[object Object]
JavaScript : DOM ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript : Challenge 2! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Contenu connexe

Tendances

JavaScript and jQuery Fundamentals
JavaScript and jQuery FundamentalsJavaScript and jQuery Fundamentals
JavaScript and jQuery Fundamentals
BG Java EE Course
 
JavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQueryJavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQuery
Jamshid Hashimi
 
Javascript - Tutorial
Javascript - TutorialJavascript - Tutorial
Javascript - Tutorial
adelaticleanu
 
Java script final presentation
Java script final presentationJava script final presentation
Java script final presentation
Adhoura Academy
 

Tendances (20)

Java script basics
Java script basicsJava script basics
Java script basics
 
Java script
Java scriptJava script
Java script
 
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
 
Java script
Java scriptJava script
Java script
 
Java script
Java scriptJava script
Java script
 
Javascript
JavascriptJavascript
Javascript
 
Java script
Java scriptJava script
Java script
 
JavaScript and jQuery Fundamentals
JavaScript and jQuery FundamentalsJavaScript and jQuery Fundamentals
JavaScript and jQuery Fundamentals
 
DIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web DesigningDIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web Designing
 
Javascript
JavascriptJavascript
Javascript
 
JavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQueryJavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQuery
 
Lab#1 - Front End Development
Lab#1 - Front End DevelopmentLab#1 - Front End Development
Lab#1 - Front End Development
 
Javascript - Tutorial
Javascript - TutorialJavascript - Tutorial
Javascript - Tutorial
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Java script basics
Java script basicsJava script basics
Java script basics
 
JavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM ManipulationJavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM Manipulation
 
Java script
Java scriptJava script
Java script
 
Java script final presentation
Java script final presentationJava script final presentation
Java script final presentation
 
Html,javascript & css
Html,javascript & cssHtml,javascript & css
Html,javascript & css
 
Java script -23jan2015
Java script -23jan2015Java script -23jan2015
Java script -23jan2015
 

En vedette (7)

El periodico
El periodicoEl periodico
El periodico
 
Periodicos
PeriodicosPeriodicos
Periodicos
 
Hole in Russia
Hole in RussiaHole in Russia
Hole in Russia
 
El periódico
El periódicoEl periódico
El periódico
 
El Periódico
El PeriódicoEl Periódico
El Periódico
 
Presentación periódico
Presentación periódicoPresentación periódico
Presentación periódico
 
diapositivas sobre internet
diapositivas sobre internetdiapositivas sobre internet
diapositivas sobre internet
 

Similaire à JavaScript Workshop

Java script
 Java script Java script
Java script
bosybosy
 
Rich Internet Applications con JavaFX e NetBeans
Rich Internet Applications  con JavaFX e NetBeans Rich Internet Applications  con JavaFX e NetBeans
Rich Internet Applications con JavaFX e NetBeans
Fabrizio Giudici
 

Similaire à JavaScript Workshop (20)

Javascript analysis
Javascript analysisJavascript analysis
Javascript analysis
 
"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues
 
Java script
 Java script Java script
Java script
 
JavaScript Basics - GameCraft Training
JavaScript Basics - GameCraft TrainingJavaScript Basics - GameCraft Training
JavaScript Basics - GameCraft Training
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
Javascript Templating
Javascript TemplatingJavascript Templating
Javascript Templating
 
Week3
Week3Week3
Week3
 
Ajax and JavaScript Bootcamp
Ajax and JavaScript BootcampAjax and JavaScript Bootcamp
Ajax and JavaScript Bootcamp
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
 
Javascript
JavascriptJavascript
Javascript
 
Reversing JavaScript
Reversing JavaScriptReversing JavaScript
Reversing JavaScript
 
Java scriptforjavadev part2a
Java scriptforjavadev part2aJava scriptforjavadev part2a
Java scriptforjavadev part2a
 
OO in JavaScript
OO in JavaScriptOO in JavaScript
OO in JavaScript
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Rich Internet Applications con JavaFX e NetBeans
Rich Internet Applications  con JavaFX e NetBeans Rich Internet Applications  con JavaFX e NetBeans
Rich Internet Applications con JavaFX e NetBeans
 
jQuery Presentation - Refresh Events
jQuery Presentation - Refresh EventsjQuery Presentation - Refresh Events
jQuery Presentation - Refresh Events
 
Eugene Andruszczenko: jQuery
Eugene Andruszczenko: jQueryEugene Andruszczenko: jQuery
Eugene Andruszczenko: jQuery
 
descriptive programming
descriptive programmingdescriptive programming
descriptive programming
 
Svcc Building Rich Applications with Groovy's SwingBuilder
Svcc Building Rich Applications with Groovy's SwingBuilderSvcc Building Rich Applications with Groovy's SwingBuilder
Svcc Building Rich Applications with Groovy's SwingBuilder
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 

Plus de Pamela Fox

Engineering culture
Engineering cultureEngineering culture
Engineering culture
Pamela Fox
 

Plus de Pamela Fox (20)

Teaching Programming Online
Teaching Programming OnlineTeaching Programming Online
Teaching Programming Online
 
Engineering culture
Engineering cultureEngineering culture
Engineering culture
 
Django Admin: Widgetry & Witchery
Django Admin: Widgetry & WitcheryDjango Admin: Widgetry & Witchery
Django Admin: Widgetry & Witchery
 
A Year of Hermit Hacking
A Year of Hermit HackingA Year of Hermit Hacking
A Year of Hermit Hacking
 
The Developer Experience
The Developer Experience The Developer Experience
The Developer Experience
 
Making JavaScript Libraries More Approachable
Making JavaScript Libraries More ApproachableMaking JavaScript Libraries More Approachable
Making JavaScript Libraries More Approachable
 
How I became a born again vegetable-tarian
How I became a born again vegetable-tarianHow I became a born again vegetable-tarian
How I became a born again vegetable-tarian
 
The Developer Experience
The Developer ExperienceThe Developer Experience
The Developer Experience
 
No, Really, I'm Shy
No, Really, I'm ShyNo, Really, I'm Shy
No, Really, I'm Shy
 
Writing Apps the Google-y Way (Brisbane)
Writing Apps the Google-y Way (Brisbane)Writing Apps the Google-y Way (Brisbane)
Writing Apps the Google-y Way (Brisbane)
 
Writing Apps the Google-y Way
Writing Apps the Google-y WayWriting Apps the Google-y Way
Writing Apps the Google-y Way
 
The Wonders of the "Onesie"
The Wonders of the "Onesie"The Wonders of the "Onesie"
The Wonders of the "Onesie"
 
I’M A Barbie Girl In A CS World
I’M A Barbie Girl In A CS WorldI’M A Barbie Girl In A CS World
I’M A Barbie Girl In A CS World
 
Google Wave 20/20: Product, Protocol, Platform
Google Wave 20/20: Product, Protocol, PlatformGoogle Wave 20/20: Product, Protocol, Platform
Google Wave 20/20: Product, Protocol, Platform
 
Collaborative Mapping with Google Wave
Collaborative Mapping with Google WaveCollaborative Mapping with Google Wave
Collaborative Mapping with Google Wave
 
Google Products: Deep Dive on Google Maps
Google Products: Deep Dive on Google MapsGoogle Products: Deep Dive on Google Maps
Google Products: Deep Dive on Google Maps
 
Google Products & Google Maps
Google Products & Google MapsGoogle Products & Google Maps
Google Products & Google Maps
 
Mashups & APIs
Mashups & APIsMashups & APIs
Mashups & APIs
 
A World of Words
A World of WordsA World of Words
A World of Words
 
Web APIs & Google APIs
Web APIs & Google APIsWeb APIs & Google APIs
Web APIs & Google APIs
 

Dernier

abortion pills in Riyadh Saudi Arabia (+919707899604)cytotec pills in dammam
abortion pills in Riyadh Saudi Arabia (+919707899604)cytotec pills in dammamabortion pills in Riyadh Saudi Arabia (+919707899604)cytotec pills in dammam
abortion pills in Riyadh Saudi Arabia (+919707899604)cytotec pills in dammam
samsungultra782445
 
Abortion pills in Saudi Arabia (+919707899604)cytotec pills in dammam
Abortion pills in Saudi Arabia (+919707899604)cytotec pills in dammamAbortion pills in Saudi Arabia (+919707899604)cytotec pills in dammam
Abortion pills in Saudi Arabia (+919707899604)cytotec pills in dammam
samsungultra782445
 
MASTERING FOREX: STRATEGIES FOR SUCCESS.pdf
MASTERING FOREX: STRATEGIES FOR SUCCESS.pdfMASTERING FOREX: STRATEGIES FOR SUCCESS.pdf
MASTERING FOREX: STRATEGIES FOR SUCCESS.pdf
Cocity Enterprises
 
abortion pills in Jeddah Saudi Arabia (+919707899604)cytotec pills in Riyadh
abortion pills in Jeddah Saudi Arabia (+919707899604)cytotec pills in Riyadhabortion pills in Jeddah Saudi Arabia (+919707899604)cytotec pills in Riyadh
abortion pills in Jeddah Saudi Arabia (+919707899604)cytotec pills in Riyadh
samsungultra782445
 
QATAR Pills for Abortion -+971*55*85*39*980-in Dubai. Abu Dhabi.
QATAR Pills for Abortion -+971*55*85*39*980-in Dubai. Abu Dhabi.QATAR Pills for Abortion -+971*55*85*39*980-in Dubai. Abu Dhabi.
QATAR Pills for Abortion -+971*55*85*39*980-in Dubai. Abu Dhabi.
hyt3577
 
Economics Presentation-2.pdf xxjshshsjsjsjwjw
Economics Presentation-2.pdf xxjshshsjsjsjwjwEconomics Presentation-2.pdf xxjshshsjsjsjwjw
Economics Presentation-2.pdf xxjshshsjsjsjwjw
mordockmatt25
 
+97470301568>>buy weed in qatar,buy thc oil in qatar doha>>buy cannabis oil i...
+97470301568>>buy weed in qatar,buy thc oil in qatar doha>>buy cannabis oil i...+97470301568>>buy weed in qatar,buy thc oil in qatar doha>>buy cannabis oil i...
+97470301568>>buy weed in qatar,buy thc oil in qatar doha>>buy cannabis oil i...
Health
 

Dernier (20)

abortion pills in Riyadh Saudi Arabia (+919707899604)cytotec pills in dammam
abortion pills in Riyadh Saudi Arabia (+919707899604)cytotec pills in dammamabortion pills in Riyadh Saudi Arabia (+919707899604)cytotec pills in dammam
abortion pills in Riyadh Saudi Arabia (+919707899604)cytotec pills in dammam
 
Significant AI Trends for the Financial Industry in 2024 and How to Utilize Them
Significant AI Trends for the Financial Industry in 2024 and How to Utilize ThemSignificant AI Trends for the Financial Industry in 2024 and How to Utilize Them
Significant AI Trends for the Financial Industry in 2024 and How to Utilize Them
 
Abortion pills in Saudi Arabia (+919707899604)cytotec pills in dammam
Abortion pills in Saudi Arabia (+919707899604)cytotec pills in dammamAbortion pills in Saudi Arabia (+919707899604)cytotec pills in dammam
Abortion pills in Saudi Arabia (+919707899604)cytotec pills in dammam
 
MASTERING FOREX: STRATEGIES FOR SUCCESS.pdf
MASTERING FOREX: STRATEGIES FOR SUCCESS.pdfMASTERING FOREX: STRATEGIES FOR SUCCESS.pdf
MASTERING FOREX: STRATEGIES FOR SUCCESS.pdf
 
abortion pills in Jeddah Saudi Arabia (+919707899604)cytotec pills in Riyadh
abortion pills in Jeddah Saudi Arabia (+919707899604)cytotec pills in Riyadhabortion pills in Jeddah Saudi Arabia (+919707899604)cytotec pills in Riyadh
abortion pills in Jeddah Saudi Arabia (+919707899604)cytotec pills in Riyadh
 
Toronto dominion bank investor presentation.pdf
Toronto dominion bank investor presentation.pdfToronto dominion bank investor presentation.pdf
Toronto dominion bank investor presentation.pdf
 
QATAR Pills for Abortion -+971*55*85*39*980-in Dubai. Abu Dhabi.
QATAR Pills for Abortion -+971*55*85*39*980-in Dubai. Abu Dhabi.QATAR Pills for Abortion -+971*55*85*39*980-in Dubai. Abu Dhabi.
QATAR Pills for Abortion -+971*55*85*39*980-in Dubai. Abu Dhabi.
 
Economics Presentation-2.pdf xxjshshsjsjsjwjw
Economics Presentation-2.pdf xxjshshsjsjsjwjwEconomics Presentation-2.pdf xxjshshsjsjsjwjw
Economics Presentation-2.pdf xxjshshsjsjsjwjw
 
NO1 Verified Online Love Vashikaran Specialist Kala Jadu Expert Specialist In...
NO1 Verified Online Love Vashikaran Specialist Kala Jadu Expert Specialist In...NO1 Verified Online Love Vashikaran Specialist Kala Jadu Expert Specialist In...
NO1 Verified Online Love Vashikaran Specialist Kala Jadu Expert Specialist In...
 
Group 8 - Goldman Sachs & 1MDB Case Studies
Group 8 - Goldman Sachs & 1MDB Case StudiesGroup 8 - Goldman Sachs & 1MDB Case Studies
Group 8 - Goldman Sachs & 1MDB Case Studies
 
Lion One Corporate Presentation May 2024
Lion One Corporate Presentation May 2024Lion One Corporate Presentation May 2024
Lion One Corporate Presentation May 2024
 
Strategic Resources May 2024 Corporate Presentation
Strategic Resources May 2024 Corporate PresentationStrategic Resources May 2024 Corporate Presentation
Strategic Resources May 2024 Corporate Presentation
 
In Sharjah ௵(+971)558539980 *_௵abortion pills now available.
In Sharjah ௵(+971)558539980 *_௵abortion pills now available.In Sharjah ௵(+971)558539980 *_௵abortion pills now available.
In Sharjah ௵(+971)558539980 *_௵abortion pills now available.
 
FE Credit and SMBC Acquisition Case Studies
FE Credit and SMBC Acquisition Case StudiesFE Credit and SMBC Acquisition Case Studies
FE Credit and SMBC Acquisition Case Studies
 
Collecting banker, Capacity of collecting Banker, conditions under section 13...
Collecting banker, Capacity of collecting Banker, conditions under section 13...Collecting banker, Capacity of collecting Banker, conditions under section 13...
Collecting banker, Capacity of collecting Banker, conditions under section 13...
 
Responsible Finance Principles and Implication
Responsible Finance Principles and ImplicationResponsible Finance Principles and Implication
Responsible Finance Principles and Implication
 
+97470301568>>buy weed in qatar,buy thc oil in qatar doha>>buy cannabis oil i...
+97470301568>>buy weed in qatar,buy thc oil in qatar doha>>buy cannabis oil i...+97470301568>>buy weed in qatar,buy thc oil in qatar doha>>buy cannabis oil i...
+97470301568>>buy weed in qatar,buy thc oil in qatar doha>>buy cannabis oil i...
 
Webinar on E-Invoicing for Fintech Belgium
Webinar on E-Invoicing for Fintech BelgiumWebinar on E-Invoicing for Fintech Belgium
Webinar on E-Invoicing for Fintech Belgium
 
Test bank for advanced assessment interpreting findings and formulating diffe...
Test bank for advanced assessment interpreting findings and formulating diffe...Test bank for advanced assessment interpreting findings and formulating diffe...
Test bank for advanced assessment interpreting findings and formulating diffe...
 
Black magic specialist in Canada (Kala ilam specialist in UK) Bangali Amil ba...
Black magic specialist in Canada (Kala ilam specialist in UK) Bangali Amil ba...Black magic specialist in Canada (Kala ilam specialist in UK) Bangali Amil ba...
Black magic specialist in Canada (Kala ilam specialist in UK) Bangali Amil ba...
 

JavaScript Workshop

  • 1. Sponsored by Upsilon Pi Epsilon The Computer Science Honors Society Javascript
  • 2.
  • 3.
  • 4. JavaScript : the basics <html> <head> <title>… the title of the document… </title> <script type=&quot;text/Javascript&quot;> … JavaScript code… </script> </head> <body> … HTML Code/Tags/Content whatever… </body> </html>
  • 5.
  • 6. JavaScript : Hello World <html> <head> <title>JavaScript-Hello-World</title> <script type=&quot;text/Javascript&quot;> function greetings(sender) { alert (“Hello World!”); } </script> </head> <body onLoad=&quot;greetings();“ > <h1>Javascript Hello World!</h1> </body> </html>
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. JavaScript : Objects var obj= new Object(); var Obj { }; Create obj.name= “John”; obj[“name”]= “John”; Add Properties Object Literal Syntax var email { message: “Hi Pamela!”, details: { to: “Pamela”, from: “Ross” } }
  • 15.
  • 16.
  • 17. JavaScript : Functions function add(x, y) { var total = x + y; return total; } > add() NaN > add(2, 3) 5
  • 18. JavaScript : Functions function avg() { var sum = 0; for (var i=0, j=arguments.length; i<j; i++) { sum += arguments[i]; } return sum/arguments.length; } > avg(2, 3, 4, 5) 3.5 > avg.apply(null, [2, 3, 4, 5]) 3.5
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.