SlideShare a Scribd company logo
1 of 11
Download to read offline
Hello World!

Traditional programming tutorial
Copy the following code and save it in
     a text editor as hello.html
<html>
<head> <title></title>
</head>
<body>
</body>
</html>
Add script tags within head section
 The scripts tags tell the   <html>
                             <head>
 browser that there is       <title></title>
 scripting contained
                             <script
 between (in this case
                               type="text/javascript">
 “javaScript”).
                             </script>
                             </head>
                             <body>
                             </body>
                             </html>
Remember
Script tags are within the head section, not the
  body section.
Let’s make a function
• A function executes a     <html>
  series of instructions.   <head> <title></title>
• We will start with an     <script
  empty shell                 type="text/javascript">
                              function () { } </script>
                              </head> <body>
                              </body> </html>
Function name
We will name our           <html> <head>
function Helloworld.       <title></title> <script
We will add an alert box   type="text/javascript">
that say’s “Hello          function HelloWorld() {
World!”                    alert ("Hello World!"); }
                           </script> </head>
                           <body> </body>
                           </html>
Function Structure
• The word function declares that there is a
  function.
• The function name is HelloWorld.
• Parentheses () (has use we will get to later in
  the course)
• {} curly brackets contain the set of instructions
Execute Function
Now that we have           <html> <head>
covered the function       <title></title> <script
head tags, let’s make it   type="text/javascript">
execute when we click      function HelloWorld() {
on a link. Here is a       alert ("Hello World!"); }
generic link that point    </script> </head>
nowhere:                   <body> <a
                           href="">Hello</a>
                           </body> </html>
Execute Function
This will make it point   <html> <head>
to our function             <title></title> <script
                            type="text/javascript">
                            function HelloWorld() {
                            alert ("Hello World!"); }
                            </script> </head>
                            <body> <a
                            href="javascript:HelloW
                            orld()">Hello</a>
                            </body> </html>
Your turn
After saving your
work, try opening
your webpage.

It should look like
this
Your first JavaScript
Congratulations, you just made your first
javaScript!

There are two things I would like you to
remember:

1. JavaScript and Java are not the same thing.
2. JavaScript is case-sensitive!

More Related Content

What's hot

Understanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scopeUnderstanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scopeBrajesh Yadav
 
Meta Programming with JavaScript
Meta Programming with JavaScriptMeta Programming with JavaScript
Meta Programming with JavaScriptjeresig
 
Filters in AngularJS
Filters in AngularJSFilters in AngularJS
Filters in AngularJSBrajesh Yadav
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS IntroductionBrajesh Yadav
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenerytoddbr
 
Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework Sakthi Bro
 
Shaping up with angular JS
Shaping up with angular JSShaping up with angular JS
Shaping up with angular JSBrajesh Yadav
 
Python for AngularJS
Python for AngularJSPython for AngularJS
Python for AngularJSJeff Schenck
 
When all you have is a hammer, everything looks like Javascript - ebookcraft ...
When all you have is a hammer, everything looks like Javascript - ebookcraft ...When all you have is a hammer, everything looks like Javascript - ebookcraft ...
When all you have is a hammer, everything looks like Javascript - ebookcraft ...BookNet Canada
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentationMevin Mohan
 
Using schemas in parsing xml part 2
Using schemas in parsing xml part 2Using schemas in parsing xml part 2
Using schemas in parsing xml part 2Alex Fernandez
 
Simple Web Apps With Sinatra
Simple Web Apps With SinatraSimple Web Apps With Sinatra
Simple Web Apps With Sinatraa_l
 
Introduction to AJAX In WordPress
Introduction to AJAX In WordPressIntroduction to AJAX In WordPress
Introduction to AJAX In WordPressCaldera Labs
 
AngularJS Directives
AngularJS DirectivesAngularJS Directives
AngularJS DirectivesEyal Vardi
 
Webpack packing it all
Webpack packing it allWebpack packing it all
Webpack packing it allCriciúma Dev
 

What's hot (20)

Understanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scopeUnderstanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scope
 
Meta Programming with JavaScript
Meta Programming with JavaScriptMeta Programming with JavaScript
Meta Programming with JavaScript
 
Filters in AngularJS
Filters in AngularJSFilters in AngularJS
Filters in AngularJS
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS Introduction
 
Angular Classy
Angular ClassyAngular Classy
Angular Classy
 
AngularJS Basics with Example
AngularJS Basics with ExampleAngularJS Basics with Example
AngularJS Basics with Example
 
Directives
DirectivesDirectives
Directives
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework
 
Shaping up with angular JS
Shaping up with angular JSShaping up with angular JS
Shaping up with angular JS
 
Python for AngularJS
Python for AngularJSPython for AngularJS
Python for AngularJS
 
When all you have is a hammer, everything looks like Javascript - ebookcraft ...
When all you have is a hammer, everything looks like Javascript - ebookcraft ...When all you have is a hammer, everything looks like Javascript - ebookcraft ...
When all you have is a hammer, everything looks like Javascript - ebookcraft ...
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentation
 
Using schemas in parsing xml part 2
Using schemas in parsing xml part 2Using schemas in parsing xml part 2
Using schemas in parsing xml part 2
 
Simple Web Apps With Sinatra
Simple Web Apps With SinatraSimple Web Apps With Sinatra
Simple Web Apps With Sinatra
 
Introduction to AJAX In WordPress
Introduction to AJAX In WordPressIntroduction to AJAX In WordPress
Introduction to AJAX In WordPress
 
AngularJS Directives
AngularJS DirectivesAngularJS Directives
AngularJS Directives
 
Webpack packing it all
Webpack packing it allWebpack packing it all
Webpack packing it all
 
Jquery image slider
Jquery image slider Jquery image slider
Jquery image slider
 
jQuery Best Practice
jQuery Best Practice jQuery Best Practice
jQuery Best Practice
 

Viewers also liked

Coursebuilder2
Coursebuilder2Coursebuilder2
Coursebuilder2llynn83wou
 
Google Story Builder
Google Story BuilderGoogle Story Builder
Google Story Builderdallesasse
 
Google Course Builder
Google Course BuilderGoogle Course Builder
Google Course Builderllynn83wou
 
Google course builder
Google course builderGoogle course builder
Google course builderllynn83wou
 
Contenuti digitali aperti: tra licenze, inclusione e riuso
Contenuti digitali aperti: tra licenze, inclusione e riusoContenuti digitali aperti: tra licenze, inclusione e riuso
Contenuti digitali aperti: tra licenze, inclusione e riusoAlberto Ardizzone
 

Viewers also liked (6)

Coursebuilder2
Coursebuilder2Coursebuilder2
Coursebuilder2
 
Google Story Builder
Google Story BuilderGoogle Story Builder
Google Story Builder
 
Google Course Builder
Google Course BuilderGoogle Course Builder
Google Course Builder
 
Google course builder
Google course builderGoogle course builder
Google course builder
 
Contenuti digitali aperti: tra licenze, inclusione e riuso
Contenuti digitali aperti: tra licenze, inclusione e riusoContenuti digitali aperti: tra licenze, inclusione e riuso
Contenuti digitali aperti: tra licenze, inclusione e riuso
 
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job? Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
 

Similar to Hello world (20)

Js placement
Js placementJs placement
Js placement
 
JavaServer Pages
JavaServer PagesJavaServer Pages
JavaServer Pages
 
JavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptxJavaScriptL18 [Autosaved].pptx
JavaScriptL18 [Autosaved].pptx
 
Lecture6
Lecture6Lecture6
Lecture6
 
Java script
Java scriptJava script
Java script
 
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and ProfitjQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
 
Web Day-01.pptx
Web Day-01.pptxWeb Day-01.pptx
Web Day-01.pptx
 
Basics
BasicsBasics
Basics
 
JAVASCRIPT 1.pptx.pptx
JAVASCRIPT 1.pptx.pptxJAVASCRIPT 1.pptx.pptx
JAVASCRIPT 1.pptx.pptx
 
TurboGears2 Pluggable Applications
TurboGears2 Pluggable ApplicationsTurboGears2 Pluggable Applications
TurboGears2 Pluggable Applications
 
Java Script (Module 1).pptx
Java Script (Module 1).pptxJava Script (Module 1).pptx
Java Script (Module 1).pptx
 
Java script how to
Java script how toJava script how to
Java script how to
 
Javascript - Beyond-jQuery
Javascript - Beyond-jQueryJavascript - Beyond-jQuery
Javascript - Beyond-jQuery
 
jQuery
jQueryjQuery
jQuery
 
Html, CSS, Javascript, Jquery, Meteor應用
Html, CSS, Javascript, Jquery, Meteor應用Html, CSS, Javascript, Jquery, Meteor應用
Html, CSS, Javascript, Jquery, Meteor應用
 
JavaScript - Part-1
JavaScript - Part-1JavaScript - Part-1
JavaScript - Part-1
 
Introduction to java script
Introduction to java scriptIntroduction to java script
Introduction to java script
 
Wt unit 5
Wt unit 5Wt unit 5
Wt unit 5
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Javascript
JavascriptJavascript
Javascript
 

Hello world

  • 2. Copy the following code and save it in a text editor as hello.html <html> <head> <title></title> </head> <body> </body> </html>
  • 3. Add script tags within head section The scripts tags tell the <html> <head> browser that there is <title></title> scripting contained <script between (in this case type="text/javascript"> “javaScript”). </script> </head> <body> </body> </html>
  • 4. Remember Script tags are within the head section, not the body section.
  • 5. Let’s make a function • A function executes a <html> series of instructions. <head> <title></title> • We will start with an <script empty shell type="text/javascript"> function () { } </script> </head> <body> </body> </html>
  • 6. Function name We will name our <html> <head> function Helloworld. <title></title> <script We will add an alert box type="text/javascript"> that say’s “Hello function HelloWorld() { World!” alert ("Hello World!"); } </script> </head> <body> </body> </html>
  • 7. Function Structure • The word function declares that there is a function. • The function name is HelloWorld. • Parentheses () (has use we will get to later in the course) • {} curly brackets contain the set of instructions
  • 8. Execute Function Now that we have <html> <head> covered the function <title></title> <script head tags, let’s make it type="text/javascript"> execute when we click function HelloWorld() { on a link. Here is a alert ("Hello World!"); } generic link that point </script> </head> nowhere: <body> <a href="">Hello</a> </body> </html>
  • 9. Execute Function This will make it point <html> <head> to our function <title></title> <script type="text/javascript"> function HelloWorld() { alert ("Hello World!"); } </script> </head> <body> <a href="javascript:HelloW orld()">Hello</a> </body> </html>
  • 10. Your turn After saving your work, try opening your webpage. It should look like this
  • 11. Your first JavaScript Congratulations, you just made your first javaScript! There are two things I would like you to remember: 1. JavaScript and Java are not the same thing. 2. JavaScript is case-sensitive!