SlideShare ist ein Scribd-Unternehmen logo
1 von 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]

Weitere Àhnliche Inhalte

Was ist angesagt?

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
 

Was ist angesagt? (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
 

Andere mochten auch

Andere mochten auch (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Mehr von Pamela Fox

Engineering culture
Engineering cultureEngineering culture
Engineering culture
Pamela Fox
 

Mehr von 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
 

KĂŒrzlich hochgeladen

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
 
Law of Demand.pptxnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
Law of Demand.pptxnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnLaw of Demand.pptxnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
Law of Demand.pptxnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
TintoTom3
 
Economics Presentation-2.pdf xxjshshsjsjsjwjw
Economics Presentation-2.pdf xxjshshsjsjsjwjwEconomics Presentation-2.pdf xxjshshsjsjsjwjw
Economics Presentation-2.pdf xxjshshsjsjsjwjw
mordockmatt25
 
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.
hyt3577
 
+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
 
+971565801893>>SAFE ORIGINAL ABORTION PILLS FOR SALE IN DUBAI,RAK CITY,ABUDHA...
+971565801893>>SAFE ORIGINAL ABORTION PILLS FOR SALE IN DUBAI,RAK CITY,ABUDHA...+971565801893>>SAFE ORIGINAL ABORTION PILLS FOR SALE IN DUBAI,RAK CITY,ABUDHA...
+971565801893>>SAFE ORIGINAL ABORTION PILLS FOR SALE IN DUBAI,RAK CITY,ABUDHA...
Health
 

KĂŒrzlich hochgeladen (20)

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
 
Technology industry / Finnish economic outlook
Technology industry / Finnish economic outlookTechnology industry / Finnish economic outlook
Technology industry / Finnish economic outlook
 
Seeman_Fiintouch_LLP_Newsletter_May-2024.pdf
Seeman_Fiintouch_LLP_Newsletter_May-2024.pdfSeeman_Fiintouch_LLP_Newsletter_May-2024.pdf
Seeman_Fiintouch_LLP_Newsletter_May-2024.pdf
 
Law of Demand.pptxnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
Law of Demand.pptxnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnLaw of Demand.pptxnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
Law of Demand.pptxnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
 
Economics Presentation-2.pdf xxjshshsjsjsjwjw
Economics Presentation-2.pdf xxjshshsjsjsjwjwEconomics Presentation-2.pdf xxjshshsjsjsjwjw
Economics Presentation-2.pdf xxjshshsjsjsjwjw
 
Certified Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil ba...
Certified Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil ba...Certified Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil ba...
Certified Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil ba...
 
Stock Market Brief Deck (Under Pressure).pdf
Stock Market Brief Deck (Under Pressure).pdfStock Market Brief Deck (Under Pressure).pdf
Stock Market Brief Deck (Under Pressure).pdf
 
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
 
Mahendragarh Escorts đŸ„° 8617370543 Call Girls Offer VIP Hot Girls
Mahendragarh Escorts đŸ„° 8617370543 Call Girls Offer VIP Hot GirlsMahendragarh Escorts đŸ„° 8617370543 Call Girls Offer VIP Hot Girls
Mahendragarh Escorts đŸ„° 8617370543 Call Girls Offer VIP Hot Girls
 
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.
 
Business Principles, Tools, and Techniques in Participating in Various Types...
Business Principles, Tools, and Techniques  in Participating in Various Types...Business Principles, Tools, and Techniques  in Participating in Various Types...
Business Principles, Tools, and Techniques in Participating in Various Types...
 
Explore Dual Citizenship in Africa | Citizenship Benefits & Requirements
Explore Dual Citizenship in Africa | Citizenship Benefits & RequirementsExplore Dual Citizenship in Africa | Citizenship Benefits & Requirements
Explore Dual Citizenship in Africa | Citizenship Benefits & Requirements
 
+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...
 
Call Girls Howrah ( 8250092165 ) Cheap rates call girls | Get low budget
Call Girls Howrah ( 8250092165 ) Cheap rates call girls | Get low budgetCall Girls Howrah ( 8250092165 ) Cheap rates call girls | Get low budget
Call Girls Howrah ( 8250092165 ) Cheap rates call girls | Get low budget
 
+971565801893>>SAFE ORIGINAL ABORTION PILLS FOR SALE IN DUBAI,RAK CITY,ABUDHA...
+971565801893>>SAFE ORIGINAL ABORTION PILLS FOR SALE IN DUBAI,RAK CITY,ABUDHA...+971565801893>>SAFE ORIGINAL ABORTION PILLS FOR SALE IN DUBAI,RAK CITY,ABUDHA...
+971565801893>>SAFE ORIGINAL ABORTION PILLS FOR SALE IN DUBAI,RAK CITY,ABUDHA...
 
Pension dashboards forum 1 May 2024 (1).pdf
Pension dashboards forum 1 May 2024 (1).pdfPension dashboards forum 1 May 2024 (1).pdf
Pension dashboards forum 1 May 2024 (1).pdf
 
Famous Kala Jadu, Kala ilam specialist in USA and Bangali Amil baba in Saudi ...
Famous Kala Jadu, Kala ilam specialist in USA and Bangali Amil baba in Saudi ...Famous Kala Jadu, Kala ilam specialist in USA and Bangali Amil baba in Saudi ...
Famous Kala Jadu, Kala ilam specialist in USA and Bangali Amil baba in Saudi ...
 

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.