SlideShare a Scribd company logo
JavaScript




Lisa Kennelly
COM585
11/2/11
What does Javascript do?
“The idea was to make
something that Web
designers, people who
may or may not have
much programming
training, could use
to add a little bit
of animation or a
little bit of smarts
to their Web forms
and their Web pages.”
What does Javascript look
                like?
<!-- JavaScript examples by Quackit.com -->
<script type="text/javascript">
<!--
// Pre load images for rollover
if (document.images) {
               smile = new Image
               nosmile = new Image

               smile.src =
"http://www.quackit.com/pix/smile.gif"
               nosmile.src =
"http://www.quackit.com/pix/nosmile.gif"
}


function swapImage(thisImage,newImage) {
               if (document.images) {
                              document[thisImage].src =
eval(newImage + ".src")
               }
}
-->
</script>
<a
href="http://www.quackit.com/javascript/image_rollovers.c
fm"
onMouseOver="swapImage('jack','smile')"
onMouseOut="swapImage('jack','nosmile')">
<img src="http://www.quackit.com/pix/nosmile.gif"
               width="100"
               height="100"
               border="0"
               alt="Picture of Jack"
               name="jack">
</a>
The bad…
Credits
Photo Credits
     Another Cute Error Message, http://webinsecurity.blogspot.com/2008/02/another-
     cute-error-message.html
     Brendan Eich of Mozilla, http://www.flickr.com/photos/peterprice/423532024/

Creative Commons License – Attribution, Non-Commercial
Lisa Kennelly, University of Washington
lisajk@uw.edu, @lisakennelly

More Related Content

What's hot (19)

PPTX
Desktop, Web e Mobile
Paulo Moura
 
KEY
ARTDM 170 Week 3: Rollovers
Gilbert Guerrero
 
PDF
Best Practices for Embedded UA - WritersUA 2012, Scott DeLoach, ClickStart
Scott DeLoach
 
PDF
Conditional Love - Using WordPress Conditional Tags to Write More Effective T...
Christian Nolen
 
PPTX
Dynamic documentation - SRECON 2017
Daniel ( Danny ) ☃ Lawrence
 
PDF
The Big Picture: Responsive Images in Action #scd14
Matthias Lau
 
PDF
Vuejs for Angular developers
Mikhail Kuznetcov
 
PDF
The Future of CSS with Web Components
ColdFusionConference
 
KEY
Rapid Testing, Rapid Development
mennovanslooten
 
PDF
3D na Webu
Pavol Hejný
 
PDF
JavaScript & AJAX in WordPress
Igor Benić
 
PDF
Make your Backbone Application dance
Nicholas Valbusa
 
PDF
Flash Widget Tutorial
hussulinux
 
PDF
Introduction to Django CMS
Pim Van Heuven
 
PPT
AngularJS for Legacy Apps
Peter Drinnan
 
TXT
New text documentfsdfs
Ah Lom
 
PPTX
BOOM Performance
dapulse
 
PDF
Child Themes - WordCamp Dublin 2017
Damien Carbery
 
PDF
Vue in Motion
Rachel Nabors
 
Desktop, Web e Mobile
Paulo Moura
 
ARTDM 170 Week 3: Rollovers
Gilbert Guerrero
 
Best Practices for Embedded UA - WritersUA 2012, Scott DeLoach, ClickStart
Scott DeLoach
 
Conditional Love - Using WordPress Conditional Tags to Write More Effective T...
Christian Nolen
 
Dynamic documentation - SRECON 2017
Daniel ( Danny ) ☃ Lawrence
 
The Big Picture: Responsive Images in Action #scd14
Matthias Lau
 
Vuejs for Angular developers
Mikhail Kuznetcov
 
The Future of CSS with Web Components
ColdFusionConference
 
Rapid Testing, Rapid Development
mennovanslooten
 
3D na Webu
Pavol Hejný
 
JavaScript & AJAX in WordPress
Igor Benić
 
Make your Backbone Application dance
Nicholas Valbusa
 
Flash Widget Tutorial
hussulinux
 
Introduction to Django CMS
Pim Van Heuven
 
AngularJS for Legacy Apps
Peter Drinnan
 
New text documentfsdfs
Ah Lom
 
BOOM Performance
dapulse
 
Child Themes - WordCamp Dublin 2017
Damien Carbery
 
Vue in Motion
Rachel Nabors
 

Viewers also liked (9)

PPTX
Traveler's APPetite
lisakennelly
 
PDF
Sports Fans and Media: An Evolution
lisakennelly
 
PPT
The Age Of Egocasting
guest173ce2
 
PPT
The Evolution of Machine Translation
guest39e3f
 
PPT
Com546 Final Pres
deanhudson
 
PPTX
MCDM Dec 2009 Info Meeting
uwmediaspace
 
PDF
Lisa Kennelly resume
lisakennelly
 
PPS
Evolution of Internal Communication
Celuther
 
PPTX
Fashion diffusion and the role of media
jekyllisa
 
Traveler's APPetite
lisakennelly
 
Sports Fans and Media: An Evolution
lisakennelly
 
The Age Of Egocasting
guest173ce2
 
The Evolution of Machine Translation
guest39e3f
 
Com546 Final Pres
deanhudson
 
MCDM Dec 2009 Info Meeting
uwmediaspace
 
Lisa Kennelly resume
lisakennelly
 
Evolution of Internal Communication
Celuther
 
Fashion diffusion and the role of media
jekyllisa
 
Ad

Similar to Geekspeak: Javascript (20)

PPT
javascript examples
Egerton University
 
PDF
POLITEKNIK MALAYSIA
Aiman Hud
 
PPS
CS101- Introduction to Computing- Lecture 41
Bilal Ahmed
 
PDF
Assignment D
Songyo
 
PDF
Build a game with javascript (may 21 atlanta)
Thinkful
 
PPTX
Javascript
Mozxai
 
PDF
jQuery Introduction
Arwid Bancewicz
 
PDF
Railsbridge javascript
p4geoff
 
KEY
ARTDM 170, Week 3: Rollovers
Gilbert Guerrero
 
KEY
ARTDM 170, Week 3: Rollovers
Gilbert Guerrero
 
PPT
POLITEKNIK MALAYSIA
Aiman Hud
 
PDF
JavaScript isn't evil.
Christian Heilmann
 
PPTX
Web Technology Part 2
Thapar Institute
 
PPTX
MTA animations graphics_accessing data
Dhairya Joshi
 
PDF
Training javascript 2012 hcmut
University of Technology
 
PPTX
Cross site scripting
Dilan Warnakulasooriya
 
KEY
AJAX & jQuery - City University WAD Module
Charlie Perrins
 
PPT
Easy javascript
Bui Kiet
 
PPT
How to get a Job as a Front End Developer
Mike Wilcox
 
KEY
JavaScript For People Who Don't Code
Christopher Schmitt
 
javascript examples
Egerton University
 
POLITEKNIK MALAYSIA
Aiman Hud
 
CS101- Introduction to Computing- Lecture 41
Bilal Ahmed
 
Assignment D
Songyo
 
Build a game with javascript (may 21 atlanta)
Thinkful
 
Javascript
Mozxai
 
jQuery Introduction
Arwid Bancewicz
 
Railsbridge javascript
p4geoff
 
ARTDM 170, Week 3: Rollovers
Gilbert Guerrero
 
ARTDM 170, Week 3: Rollovers
Gilbert Guerrero
 
POLITEKNIK MALAYSIA
Aiman Hud
 
JavaScript isn't evil.
Christian Heilmann
 
Web Technology Part 2
Thapar Institute
 
MTA animations graphics_accessing data
Dhairya Joshi
 
Training javascript 2012 hcmut
University of Technology
 
Cross site scripting
Dilan Warnakulasooriya
 
AJAX & jQuery - City University WAD Module
Charlie Perrins
 
Easy javascript
Bui Kiet
 
How to get a Job as a Front End Developer
Mike Wilcox
 
JavaScript For People Who Don't Code
Christopher Schmitt
 
Ad

Recently uploaded (20)

PPTX
Unit 2 COMMERCIAL BANKING, Corporate banking.pptx
AnubalaSuresh1
 
PPTX
2025 Winter SWAYAM NPTEL & A Student.pptx
Utsav Yagnik
 
PDF
DIGESTION OF CARBOHYDRATES,PROTEINS,LIPIDS
raviralanaresh2
 
PPSX
HEALTH ASSESSMENT (Community Health Nursing) - GNM 1st Year
Priyanshu Anand
 
PPTX
SPINA BIFIDA: NURSING MANAGEMENT .pptx
PRADEEP ABOTHU
 
PDF
Generative AI: it's STILL not a robot (CIJ Summer 2025)
Paul Bradshaw
 
PDF
People & Earth's Ecosystem -Lesson 2: People & Population
marvinnbustamante1
 
PPTX
Growth and development and milestones, factors
BHUVANESHWARI BADIGER
 
PPSX
Health Planning in india - Unit 03 - CHN 2 - GNM 3RD YEAR.ppsx
Priyanshu Anand
 
PPTX
Views on Education of Indian Thinkers Mahatma Gandhi.pptx
ShrutiMahanta1
 
PPTX
Cultivation practice of Litchi in Nepal.pptx
UmeshTimilsina1
 
PPTX
Quarter1-English3-W4-Identifying Elements of the Story
FLORRACHELSANTOS
 
PPTX
grade 5 lesson matatag ENGLISH 5_Q1_PPT_WEEK4.pptx
SireQuinn
 
PDF
LAW OF CONTRACT (5 YEAR LLB & UNITARY LLB )- MODULE - 1.& 2 - LEARN THROUGH P...
APARNA T SHAIL KUMAR
 
PPTX
How to Manage Large Scrollbar in Odoo 18 POS
Celine George
 
PDF
The Constitution Review Committee (CRC) has released an updated schedule for ...
nservice241
 
PPTX
Soil and agriculture microbiology .pptx
Keerthana Ramesh
 
PPTX
How to Create a PDF Report in Odoo 18 - Odoo Slides
Celine George
 
PDF
Dimensions of Societal Planning in Commonism
StefanMz
 
PDF
community health nursing question paper 2.pdf
Prince kumar
 
Unit 2 COMMERCIAL BANKING, Corporate banking.pptx
AnubalaSuresh1
 
2025 Winter SWAYAM NPTEL & A Student.pptx
Utsav Yagnik
 
DIGESTION OF CARBOHYDRATES,PROTEINS,LIPIDS
raviralanaresh2
 
HEALTH ASSESSMENT (Community Health Nursing) - GNM 1st Year
Priyanshu Anand
 
SPINA BIFIDA: NURSING MANAGEMENT .pptx
PRADEEP ABOTHU
 
Generative AI: it's STILL not a robot (CIJ Summer 2025)
Paul Bradshaw
 
People & Earth's Ecosystem -Lesson 2: People & Population
marvinnbustamante1
 
Growth and development and milestones, factors
BHUVANESHWARI BADIGER
 
Health Planning in india - Unit 03 - CHN 2 - GNM 3RD YEAR.ppsx
Priyanshu Anand
 
Views on Education of Indian Thinkers Mahatma Gandhi.pptx
ShrutiMahanta1
 
Cultivation practice of Litchi in Nepal.pptx
UmeshTimilsina1
 
Quarter1-English3-W4-Identifying Elements of the Story
FLORRACHELSANTOS
 
grade 5 lesson matatag ENGLISH 5_Q1_PPT_WEEK4.pptx
SireQuinn
 
LAW OF CONTRACT (5 YEAR LLB & UNITARY LLB )- MODULE - 1.& 2 - LEARN THROUGH P...
APARNA T SHAIL KUMAR
 
How to Manage Large Scrollbar in Odoo 18 POS
Celine George
 
The Constitution Review Committee (CRC) has released an updated schedule for ...
nservice241
 
Soil and agriculture microbiology .pptx
Keerthana Ramesh
 
How to Create a PDF Report in Odoo 18 - Odoo Slides
Celine George
 
Dimensions of Societal Planning in Commonism
StefanMz
 
community health nursing question paper 2.pdf
Prince kumar
 

Geekspeak: Javascript

  • 3. “The idea was to make something that Web designers, people who may or may not have much programming training, could use to add a little bit of animation or a little bit of smarts to their Web forms and their Web pages.”
  • 4. What does Javascript look like? <!-- JavaScript examples by Quackit.com --> <script type="text/javascript"> <!-- // Pre load images for rollover if (document.images) { smile = new Image nosmile = new Image smile.src = "http://www.quackit.com/pix/smile.gif" nosmile.src = "http://www.quackit.com/pix/nosmile.gif" } function swapImage(thisImage,newImage) { if (document.images) { document[thisImage].src = eval(newImage + ".src") } } --> </script> <a href="http://www.quackit.com/javascript/image_rollovers.c fm" onMouseOver="swapImage('jack','smile')" onMouseOut="swapImage('jack','nosmile')"> <img src="http://www.quackit.com/pix/nosmile.gif" width="100" height="100" border="0" alt="Picture of Jack" name="jack"> </a>
  • 6. Credits Photo Credits Another Cute Error Message, http://webinsecurity.blogspot.com/2008/02/another- cute-error-message.html Brendan Eich of Mozilla, http://www.flickr.com/photos/peterprice/423532024/ Creative Commons License – Attribution, Non-Commercial Lisa Kennelly, University of Washington [email protected], @lisakennelly

Editor's Notes

  • #2: Deletem3http://www.flickr.com/photos/mattgarrett/2257345980/
  • #3: http://webinsecurity.blogspot.com/2008/02/another-cute-error-message.htmlHTML tags and CSS create static web pages using building blocks called “objects”. WhatJavaScript does is it lets you create functions that can manipulate and enhance those objects to make web pages more dynamic, interactive and accessible. You can add JS to a page by embedding it in the HTML file. All of the things that make up a website are known as the document object model (DOM). This includes the HTML objects, browser- and platform-related objects, and special objects built right into the JavaScript language.You’ve probably encountered this on some pages where it says “you have Javascript turned off” and then half the page doesn’t display.Javascript is also used in PDF documents, site-specific browsers, and desktop widgets
  • #4: http://www.flickr.com/photos/peterprice/423532024/Javascript was created by Brendan Eich of Netscape in 1995. He is now the chief technology officer at Mozilla.JS was first known as “Mocha” then LiveScript then named Javascript. It was created for the Netscape Navigator browser.It really has nothing to do with “Java” which is another programming language that was more complicated and only really programmers could use it. Javascript was influenced by it, however.Javascript was easier to use and you could use it piecemeal and didn’t have to learn the whole thing. He called it the “little brother to Java”
  • #5: Javascript makes a page easier to navigate. You can also customize it. Some examples of Javascript are:-pop up boxes-drop down menus/roll overs-displaying the current date and time to various users depending on where they are and what browser they are using.When you write a JavaScript function, you have to determine when it will run – such as, when a user clicks or double-clicks on a link, submits a form or hovers over an image. These are called “events” and you can respond to them using “event handlers.” You can attach an event handler to the HTML element for which you want to respond to when a specific event occurs.So, for example, when someone mouses over a section of your page, you can write the javascript so that it produces a dropdown menu.
  • #6: Those spam popup boxes that you get browsing the internet or from poorly designed websites? That is javascript.You can also:-make the browser always fullscreen-disable people from being able to copy or right click-open links in a new window-prevent user from using the back button