SlideShare a Scribd company logo
1 of 3
Download to read offline
What is JavaScript?
JavaScript is a scripting or programming language that allows you to
implement complex features on web pages — every time a web page does
more than just sit there and display static information for you to look at —
displaying timely content updates, interactive maps, animated 2D/3D graphics,
scrolling video jukeboxes, etc. — you can bet that JavaScript is probably
involved. It is the third layer of the layer cake of standard web technologies,
two of which (HTML and CSS) we have covered in much more detail in other
parts of the Learning Area.
 HTML is the markup language that we use to structure and give
meaning to our web content, for example defining paragraphs,
headings, and data tables, or embedding images and videos in the
page.
 CSS is a language of style rules that we use to apply styling to our
HTML content, for example setting background colors and fonts, and
laying out our content in multiple columns.
 JavaScript is a scripting language that enables you to create
dynamically updating content, control multimedia, animate images, and
pretty much everything else. (Okay, not everything, but it is amazing
what you can achieve with a few lines of JavaScript code.)
So what can it really do?
The core client-side JavaScript language consists of some common
programming features that allow you to do things like:
 Store useful values inside variables. In the above example for instance,
we ask for a new name to be entered then store that name in a variable
called name.
 Operations on pieces of text (known as "strings" in programming). In
the above example we take the string "Player 1: " and join it to
the name variable to create the complete text label, e.g. "Player 1:
Chris".
 Running code in response to certain events occurring on a web page.
We used a click event in our example above to detect when the label is
clicked and then run the code that updates the text label. And much more!
What is even more exciting however is the functionality built on top of the
client-side JavaScript language. So-called n ProgrammApplicatioing
Interfaces (APIs) provide you with extra superpowers to use in your JavaScript
code.
APIs are ready-made sets of code building blocks that allow a developer to
implement programs that would otherwise be hard or impossible to
implement. They do the same thing for programming that ready-made
furniture kits do for home building — it is much easier to take ready-cut
panels and screw them together to make a bookshelf than it is to work out the
design yourself, go and find the correct wood, cut all the panels to the right
size and shape, find the correct-sized screws, and then put them together to
make a bookshelf.
They generally fall into two categories.
Browser APIs are built into your web browser, and are able to expose data
from the surrounding computer environment, or do useful complex things. For
example: The DOM (Document Object Model) API allows you to manipulate
HTML and CSS, creating, removing and changing HTML, dynamically
applying new styles to your page, etc. Every time you see a popup
window appear on a page, or some new content displayed (as we saw
above in our simple demo) for example, that's the DOM in action.
 The Geolocation API retrieves geographical information. This is
how Google Maps is able to find your location and plot it on a map.
 The Canvas and WebGL APIs allow you to create animated 2D and 3D
graphics. People are doing some amazing things using these web
technologies — see Chrome Experiments and webglsamples.
 Audio and Video APIs like HTMLMediaElement and WebRTC allow
you to do really interesting things with multimedia, such as play audio
and video right in a web page, or grab video from your web camera
and display it on someone else's computer (try our simple Snapshot
demo to get the idea).
Third party APIs are not built into the browser by default, and you generally
have to grab their code and information from somewhere on the Web. For
example:
 The Twitter API allows you to do things like displaying your latest
tweets on your website.
 The Google Maps API and OpenStreetMap API allows you to embed
custom maps into your website, and other such functionality.
What is JavaScript doing on your page?
Here we'll actually start looking at some code, and while doing so, explore
what actually happens when you run some JavaScript in your page.
Let's briefly recap the story of what happens when you load a web page in a
browser (first talked about in our How CSS works article). When you load a
web page in your browser, you are running your code (the HTML, CSS, and
JavaScript) inside an execution environment (the browser tab). This is like a
factory that takes in raw materials (the code) and outputs a product (the web
page).A very common use of JavaScript is to dynamically modify HTML and
CSS to update a user interface, via the Document Object Model API (as
mentioned
above). Note that the code in your web documents is generally loaded and
executed in the order it appears on the page. Errors may occur if JavaScript is
loaded and run before the HTML and CSS that it is intended to modify. You
will learn ways around this later in the article, in the Script loading
strategies section.

More Related Content

Similar to JAVA SCRIPT.pdf

Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptxmalise2997
 
Ultimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer JobUltimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer JobBrenna Van Norman
 
Introjs10.5.17SD
Introjs10.5.17SDIntrojs10.5.17SD
Introjs10.5.17SDThinkful
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web ApplicationSachin Walvekar
 
Microservices in Golang
Microservices in GolangMicroservices in Golang
Microservices in GolangMo'ath Qasim
 
introduction to html
introduction to htmlintroduction to html
introduction to htmlcodetech2
 
Introduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in RIntroduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in RPaul Richards
 
HTML & JAVA Script
HTML & JAVA ScriptHTML & JAVA Script
HTML & JAVA ScriptNitesh Gupta
 
JavaScript - Getting Started.pptx
JavaScript - Getting Started.pptxJavaScript - Getting Started.pptx
JavaScript - Getting Started.pptxJonnJorellPunto
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Aspnet2.0 Introduction
Aspnet2.0 IntroductionAspnet2.0 Introduction
Aspnet2.0 IntroductionChanHan Hy
 

Similar to JAVA SCRIPT.pdf (20)

Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptx
 
Ultimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer JobUltimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer Job
 
It ppt.pptx
It ppt.pptxIt ppt.pptx
It ppt.pptx
 
Introjs10.5.17SD
Introjs10.5.17SDIntrojs10.5.17SD
Introjs10.5.17SD
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Html5
Html5Html5
Html5
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web Application
 
Microservices in Golang
Microservices in GolangMicroservices in Golang
Microservices in Golang
 
introduction to html
introduction to htmlintroduction to html
introduction to html
 
Introduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in RIntroduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in R
 
HTML & JAVA Script
HTML & JAVA ScriptHTML & JAVA Script
HTML & JAVA Script
 
JavaScript - Getting Started.pptx
JavaScript - Getting Started.pptxJavaScript - Getting Started.pptx
JavaScript - Getting Started.pptx
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
INTRODUCTIONS OF HTML
INTRODUCTIONS OF HTMLINTRODUCTIONS OF HTML
INTRODUCTIONS OF HTML
 
Web 2 0 Tools
Web 2 0 ToolsWeb 2 0 Tools
Web 2 0 Tools
 
emerging
emergingemerging
emerging
 
emerging
emergingemerging
emerging
 
Aspnet2.0 Introduction
Aspnet2.0 IntroductionAspnet2.0 Introduction
Aspnet2.0 Introduction
 

More from Satishkumar722293

More from Satishkumar722293 (20)

What is artificial intelligence.pdf
What is artificial intelligence.pdfWhat is artificial intelligence.pdf
What is artificial intelligence.pdf
 
CAREER DEVELOPMENT.pdf
CAREER DEVELOPMENT.pdfCAREER DEVELOPMENT.pdf
CAREER DEVELOPMENT.pdf
 
What Is Business Plan.pdf
What Is Business Plan.pdfWhat Is Business Plan.pdf
What Is Business Plan.pdf
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
 
What is artificial intelligence.pdf
What is artificial intelligence.pdfWhat is artificial intelligence.pdf
What is artificial intelligence.pdf
 
Contingent Staffing.pdf
Contingent Staffing.pdfContingent Staffing.pdf
Contingent Staffing.pdf
 
Digital Marketing.pdf
Digital Marketing.pdfDigital Marketing.pdf
Digital Marketing.pdf
 
Employment Relationship.pdf
Employment Relationship.pdfEmployment Relationship.pdf
Employment Relationship.pdf
 
programming testing.pdf
programming testing.pdfprogramming testing.pdf
programming testing.pdf
 
TRAINING & PLACEMENT CELL.pdf
TRAINING & PLACEMENT CELL.pdfTRAINING & PLACEMENT CELL.pdf
TRAINING & PLACEMENT CELL.pdf
 
Training & Development.pdf
Training & Development.pdfTraining & Development.pdf
Training & Development.pdf
 
What is artificial intelligence.pdf
What is artificial intelligence.pdfWhat is artificial intelligence.pdf
What is artificial intelligence.pdf
 
HUMAN RESOURCE MANAGEMENT.pdf
HUMAN RESOURCE MANAGEMENT.pdfHUMAN RESOURCE MANAGEMENT.pdf
HUMAN RESOURCE MANAGEMENT.pdf
 
CAREER DEVELOPMENT.pdf
CAREER DEVELOPMENT.pdfCAREER DEVELOPMENT.pdf
CAREER DEVELOPMENT.pdf
 
programming testing.pdf
programming testing.pdfprogramming testing.pdf
programming testing.pdf
 
DATA WAREHOUSE CONCEPT.pdf
DATA WAREHOUSE CONCEPT.pdfDATA WAREHOUSE CONCEPT.pdf
DATA WAREHOUSE CONCEPT.pdf
 
DATA WAREHOUSE CONCEPT.pdf
DATA WAREHOUSE CONCEPT.pdfDATA WAREHOUSE CONCEPT.pdf
DATA WAREHOUSE CONCEPT.pdf
 
MANAGEMENT SYSTEM.pdf
MANAGEMENT SYSTEM.pdfMANAGEMENT SYSTEM.pdf
MANAGEMENT SYSTEM.pdf
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
 
MANAGEMENT SYSTEM.pdf
MANAGEMENT SYSTEM.pdfMANAGEMENT SYSTEM.pdf
MANAGEMENT SYSTEM.pdf
 

Recently uploaded

B.tech Civil Engineering Major Project by Deepak Kumar ppt.pdf
B.tech Civil Engineering Major Project by Deepak Kumar ppt.pdfB.tech Civil Engineering Major Project by Deepak Kumar ppt.pdf
B.tech Civil Engineering Major Project by Deepak Kumar ppt.pdfDeepak15CivilEngg
 
DMER-AYUSH-MIMS-Staff-Nurse-_Selection-List-04-05-2024.pdf
DMER-AYUSH-MIMS-Staff-Nurse-_Selection-List-04-05-2024.pdfDMER-AYUSH-MIMS-Staff-Nurse-_Selection-List-04-05-2024.pdf
DMER-AYUSH-MIMS-Staff-Nurse-_Selection-List-04-05-2024.pdfReemaKhan31
 
UXPA Boston 2024 Maximize the Client Consultant Relationship.pdf
UXPA Boston 2024 Maximize the Client Consultant Relationship.pdfUXPA Boston 2024 Maximize the Client Consultant Relationship.pdf
UXPA Boston 2024 Maximize the Client Consultant Relationship.pdfDan Berlin
 
UIowa Application Instructions - 2024 Update
UIowa Application Instructions - 2024 UpdateUIowa Application Instructions - 2024 Update
UIowa Application Instructions - 2024 UpdateUniversity of Iowa
 
Jual obat aborsi Jakarta ( 085657271886 )Cytote pil telat bulan penggugur kan...
Jual obat aborsi Jakarta ( 085657271886 )Cytote pil telat bulan penggugur kan...Jual obat aborsi Jakarta ( 085657271886 )Cytote pil telat bulan penggugur kan...
Jual obat aborsi Jakarta ( 085657271886 )Cytote pil telat bulan penggugur kan...ZurliaSoop
 
207095666-Book-Review-on-Ignited-Minds-Final.pptx
207095666-Book-Review-on-Ignited-Minds-Final.pptx207095666-Book-Review-on-Ignited-Minds-Final.pptx
207095666-Book-Review-on-Ignited-Minds-Final.pptxpawangadkhe786
 
<DUBAI>Abortion pills IN UAE {{+971561686603*^Mifepristone & Misoprostol in D...
<DUBAI>Abortion pills IN UAE {{+971561686603*^Mifepristone & Misoprostol in D...<DUBAI>Abortion pills IN UAE {{+971561686603*^Mifepristone & Misoprostol in D...
<DUBAI>Abortion pills IN UAE {{+971561686603*^Mifepristone & Misoprostol in D...gynedubai
 
Top profile Call Girls In Rampur [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Rampur [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Rampur [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Rampur [ 7014168258 ] Call Me For Genuine Models We...nirzagarg
 
Top profile Call Girls In Shivamogga [ 7014168258 ] Call Me For Genuine Model...
Top profile Call Girls In Shivamogga [ 7014168258 ] Call Me For Genuine Model...Top profile Call Girls In Shivamogga [ 7014168258 ] Call Me For Genuine Model...
Top profile Call Girls In Shivamogga [ 7014168258 ] Call Me For Genuine Model...nirzagarg
 
Guide to a Winning Interview May 2024 for MCWN
Guide to a Winning Interview May 2024 for MCWNGuide to a Winning Interview May 2024 for MCWN
Guide to a Winning Interview May 2024 for MCWNBruce Bennett
 
Vip Malegaon Escorts Service Girl ^ 9332606886, WhatsApp Anytime Malegaon
Vip Malegaon Escorts Service Girl ^ 9332606886, WhatsApp Anytime MalegaonVip Malegaon Escorts Service Girl ^ 9332606886, WhatsApp Anytime Malegaon
Vip Malegaon Escorts Service Girl ^ 9332606886, WhatsApp Anytime Malegaonmeghakumariji156
 
Personal Brand Exploration - Fernando Negron
Personal Brand Exploration - Fernando NegronPersonal Brand Exploration - Fernando Negron
Personal Brand Exploration - Fernando Negronnegronf24
 
b-sc-agri-course-curriculum.pdf for Karnataka state board
b-sc-agri-course-curriculum.pdf for Karnataka state boardb-sc-agri-course-curriculum.pdf for Karnataka state board
b-sc-agri-course-curriculum.pdf for Karnataka state boardramyaul734
 
Kannada Call Girls Mira Bhayandar WhatsApp +91-9930687706, Best Service
Kannada Call Girls Mira Bhayandar WhatsApp +91-9930687706, Best ServiceKannada Call Girls Mira Bhayandar WhatsApp +91-9930687706, Best Service
Kannada Call Girls Mira Bhayandar WhatsApp +91-9930687706, Best Servicemeghakumariji156
 
Top profile Call Girls In Jabalpur [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Jabalpur [ 7014168258 ] Call Me For Genuine Models ...Top profile Call Girls In Jabalpur [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Jabalpur [ 7014168258 ] Call Me For Genuine Models ...gajnagarg
 
Specialize in a MSc within Biomanufacturing, and work part-time as Process En...
Specialize in a MSc within Biomanufacturing, and work part-time as Process En...Specialize in a MSc within Biomanufacturing, and work part-time as Process En...
Specialize in a MSc within Biomanufacturing, and work part-time as Process En...Juli Boned
 
Simple, 3-Step Strategy to Improve Your Executive Presence (Even if You Don't...
Simple, 3-Step Strategy to Improve Your Executive Presence (Even if You Don't...Simple, 3-Step Strategy to Improve Your Executive Presence (Even if You Don't...
Simple, 3-Step Strategy to Improve Your Executive Presence (Even if You Don't...Angela Justice, PhD
 
一比一定(购)中央昆士兰大学毕业证(CQU毕业证)成绩单学位证
一比一定(购)中央昆士兰大学毕业证(CQU毕业证)成绩单学位证一比一定(购)中央昆士兰大学毕业证(CQU毕业证)成绩单学位证
一比一定(购)中央昆士兰大学毕业证(CQU毕业证)成绩单学位证eqaqen
 
drug book file on obs. and gynae clinical pstings
drug book file on obs. and gynae clinical pstingsdrug book file on obs. and gynae clinical pstings
drug book file on obs. and gynae clinical pstingsKarishma7720
 
Top profile Call Girls In Shillong [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Shillong [ 7014168258 ] Call Me For Genuine Models ...Top profile Call Girls In Shillong [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Shillong [ 7014168258 ] Call Me For Genuine Models ...gajnagarg
 

Recently uploaded (20)

B.tech Civil Engineering Major Project by Deepak Kumar ppt.pdf
B.tech Civil Engineering Major Project by Deepak Kumar ppt.pdfB.tech Civil Engineering Major Project by Deepak Kumar ppt.pdf
B.tech Civil Engineering Major Project by Deepak Kumar ppt.pdf
 
DMER-AYUSH-MIMS-Staff-Nurse-_Selection-List-04-05-2024.pdf
DMER-AYUSH-MIMS-Staff-Nurse-_Selection-List-04-05-2024.pdfDMER-AYUSH-MIMS-Staff-Nurse-_Selection-List-04-05-2024.pdf
DMER-AYUSH-MIMS-Staff-Nurse-_Selection-List-04-05-2024.pdf
 
UXPA Boston 2024 Maximize the Client Consultant Relationship.pdf
UXPA Boston 2024 Maximize the Client Consultant Relationship.pdfUXPA Boston 2024 Maximize the Client Consultant Relationship.pdf
UXPA Boston 2024 Maximize the Client Consultant Relationship.pdf
 
UIowa Application Instructions - 2024 Update
UIowa Application Instructions - 2024 UpdateUIowa Application Instructions - 2024 Update
UIowa Application Instructions - 2024 Update
 
Jual obat aborsi Jakarta ( 085657271886 )Cytote pil telat bulan penggugur kan...
Jual obat aborsi Jakarta ( 085657271886 )Cytote pil telat bulan penggugur kan...Jual obat aborsi Jakarta ( 085657271886 )Cytote pil telat bulan penggugur kan...
Jual obat aborsi Jakarta ( 085657271886 )Cytote pil telat bulan penggugur kan...
 
207095666-Book-Review-on-Ignited-Minds-Final.pptx
207095666-Book-Review-on-Ignited-Minds-Final.pptx207095666-Book-Review-on-Ignited-Minds-Final.pptx
207095666-Book-Review-on-Ignited-Minds-Final.pptx
 
<DUBAI>Abortion pills IN UAE {{+971561686603*^Mifepristone & Misoprostol in D...
<DUBAI>Abortion pills IN UAE {{+971561686603*^Mifepristone & Misoprostol in D...<DUBAI>Abortion pills IN UAE {{+971561686603*^Mifepristone & Misoprostol in D...
<DUBAI>Abortion pills IN UAE {{+971561686603*^Mifepristone & Misoprostol in D...
 
Top profile Call Girls In Rampur [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Rampur [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Rampur [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Rampur [ 7014168258 ] Call Me For Genuine Models We...
 
Top profile Call Girls In Shivamogga [ 7014168258 ] Call Me For Genuine Model...
Top profile Call Girls In Shivamogga [ 7014168258 ] Call Me For Genuine Model...Top profile Call Girls In Shivamogga [ 7014168258 ] Call Me For Genuine Model...
Top profile Call Girls In Shivamogga [ 7014168258 ] Call Me For Genuine Model...
 
Guide to a Winning Interview May 2024 for MCWN
Guide to a Winning Interview May 2024 for MCWNGuide to a Winning Interview May 2024 for MCWN
Guide to a Winning Interview May 2024 for MCWN
 
Vip Malegaon Escorts Service Girl ^ 9332606886, WhatsApp Anytime Malegaon
Vip Malegaon Escorts Service Girl ^ 9332606886, WhatsApp Anytime MalegaonVip Malegaon Escorts Service Girl ^ 9332606886, WhatsApp Anytime Malegaon
Vip Malegaon Escorts Service Girl ^ 9332606886, WhatsApp Anytime Malegaon
 
Personal Brand Exploration - Fernando Negron
Personal Brand Exploration - Fernando NegronPersonal Brand Exploration - Fernando Negron
Personal Brand Exploration - Fernando Negron
 
b-sc-agri-course-curriculum.pdf for Karnataka state board
b-sc-agri-course-curriculum.pdf for Karnataka state boardb-sc-agri-course-curriculum.pdf for Karnataka state board
b-sc-agri-course-curriculum.pdf for Karnataka state board
 
Kannada Call Girls Mira Bhayandar WhatsApp +91-9930687706, Best Service
Kannada Call Girls Mira Bhayandar WhatsApp +91-9930687706, Best ServiceKannada Call Girls Mira Bhayandar WhatsApp +91-9930687706, Best Service
Kannada Call Girls Mira Bhayandar WhatsApp +91-9930687706, Best Service
 
Top profile Call Girls In Jabalpur [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Jabalpur [ 7014168258 ] Call Me For Genuine Models ...Top profile Call Girls In Jabalpur [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Jabalpur [ 7014168258 ] Call Me For Genuine Models ...
 
Specialize in a MSc within Biomanufacturing, and work part-time as Process En...
Specialize in a MSc within Biomanufacturing, and work part-time as Process En...Specialize in a MSc within Biomanufacturing, and work part-time as Process En...
Specialize in a MSc within Biomanufacturing, and work part-time as Process En...
 
Simple, 3-Step Strategy to Improve Your Executive Presence (Even if You Don't...
Simple, 3-Step Strategy to Improve Your Executive Presence (Even if You Don't...Simple, 3-Step Strategy to Improve Your Executive Presence (Even if You Don't...
Simple, 3-Step Strategy to Improve Your Executive Presence (Even if You Don't...
 
一比一定(购)中央昆士兰大学毕业证(CQU毕业证)成绩单学位证
一比一定(购)中央昆士兰大学毕业证(CQU毕业证)成绩单学位证一比一定(购)中央昆士兰大学毕业证(CQU毕业证)成绩单学位证
一比一定(购)中央昆士兰大学毕业证(CQU毕业证)成绩单学位证
 
drug book file on obs. and gynae clinical pstings
drug book file on obs. and gynae clinical pstingsdrug book file on obs. and gynae clinical pstings
drug book file on obs. and gynae clinical pstings
 
Top profile Call Girls In Shillong [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Shillong [ 7014168258 ] Call Me For Genuine Models ...Top profile Call Girls In Shillong [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Shillong [ 7014168258 ] Call Me For Genuine Models ...
 

JAVA SCRIPT.pdf

  • 1. What is JavaScript? JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.  HTML is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.  CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.  JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.) So what can it really do? The core client-side JavaScript language consists of some common programming features that allow you to do things like:  Store useful values inside variables. In the above example for instance, we ask for a new name to be entered then store that name in a variable called name.  Operations on pieces of text (known as "strings" in programming). In the above example we take the string "Player 1: " and join it to the name variable to create the complete text label, e.g. "Player 1: Chris".  Running code in response to certain events occurring on a web page. We used a click event in our example above to detect when the label is clicked and then run the code that updates the text label. And much more! What is even more exciting however is the functionality built on top of the
  • 2. client-side JavaScript language. So-called n ProgrammApplicatioing Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code. APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf. They generally fall into two categories. Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example: The DOM (Document Object Model) API allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the DOM in action.  The Geolocation API retrieves geographical information. This is how Google Maps is able to find your location and plot it on a map.  The Canvas and WebGL APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies — see Chrome Experiments and webglsamples.  Audio and Video APIs like HTMLMediaElement and WebRTC allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple Snapshot demo to get the idea). Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:  The Twitter API allows you to do things like displaying your latest tweets on your website.
  • 3.  The Google Maps API and OpenStreetMap API allows you to embed custom maps into your website, and other such functionality. What is JavaScript doing on your page? Here we'll actually start looking at some code, and while doing so, explore what actually happens when you run some JavaScript in your page. Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).A very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). Note that the code in your web documents is generally loaded and executed in the order it appears on the page. Errors may occur if JavaScript is loaded and run before the HTML and CSS that it is intended to modify. You will learn ways around this later in the article, in the Script loading strategies section.