Scribd
Upload
8 views

Lesson 2 JavaScript Basics

Uploaded by

jmwkimani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

Lesson 2 JavaScript Basics

Uploaded by

jmwkimani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

JavaScript Basics

Lecturer: David Marangu


EMAIL:
[email protected]
Topics Covered:
 Introduction to JavaScript
 Inserting Javascript Code (Including

JavaScript in HTML )
 Inserting JavaScript code
 JavaScript Comments

2
Introducing JavaScript
What is JavaScript?
 A client-side scripting language
 Client-side refers to the fact that it is executed in the
client (software) that the viewer is using. In the case
of JavaScript, the client is the browser.
 A server-side language is one that runs on the Web
server. Examples: PHP, Python
 Created by Netscape (American computer services
company). Originally called LiveWire then LiveScript
 Interpreted on-the-fly by the client
 Each line is processed as it loads in the browser

3
JavaScript is not Java
 Javascript is completely different from Java.
They just happen to be similarly named.
 JavaScript - programs are interpreted in the
browser
 Java - programs are compiled and can be run as
stand alone applications
 Javascripteasy to learn than most
programming languages and
 Allows you to make interactive Web pages

4
Application of JavaScript
JavaScript is a widely-used programming language. Given
below are some domains/products that can be built using
JavaScript:
 Websites: JavaScript helps to add behavior in websites.

It helps users to interact with the website. For example


clicking on buttons, saving details, uploading details on
the website, etc.
 Web Servers: Programmers can make robust server

applications using JavaScript. To be precise JavaScript


frameworks like Node.js and Express.js are used to
build these servers.

5
Application of JavaScript
 Game Development & 3D Drawings: With the
addition of HTML5 Canvas, it’s now possible to make
2D and 3D games in JavaScript very efficiently and
three-dimensional graphics.
 Mobile Apps: JavaScript also used to design mobile
applications using many JavaScript frameworks for
android, IOS, and hybrid apps.
 Smartwatch Apps: The popular smartwatch maker
Pebble has created Pebble.js, a small JavaScript
framework that allows a developer to create an
application for the Pebble line of watches in
JavaScript.
6
Inserting JavaScript code
 There are two ways to add JavaScript to
Web pages (Some authors say three ways
as underlined)
1. Use the <script>…</script> tag (within body tag of
html, between head tag of html)
2. Include the script in an external .js file

 JavaScript Syntax:
<script>
// JavaScript Code
</script>
7
Sample Program 1 (Hello World)
<!DOCTYPE html>
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("<h1>Hello, world!</h1>");

//-->
</script>
</body>
</html>

8
In the sample program 1, the script tag specifies
that we are using JavaScript while the
document.write() function is used to display
dynamic content through JavaScript

Sample Program 1 (Hello World) Screenshot

9
The <script>…</script> tag
 Thecode for the script is contained in the
<script>…</script> tag
<script
type="text/javascript">
.
.
.
</script>

10
Hiding JavaScript from Older
Browsers
 Some older browsers do not support JavaScript
 We need to tell those browsers to ignore what is in the
<script> tag
 After the initial script tag, type <! -- ; Write the script as usual;
Right before the final script tag, type your scripting language’s
comments symbol; If desired, comment to remind yourself
about the new characters.

<script type="text/javascript">
<!--
some JavaScript code
//-->
</script>
11
Displaying text
 The document.write() method writes a string of text to
the browser

<script type="text/javascript">
<!--
document.write("<h1>Hello,world!</h1>");
//-->
</script>
12
Comments in JavaScript
 Two types of comments
 Single line
 Uses two forward slashes (i.e. //)
 Multiple line
 Uses /* and */

13
Single Line Comment Example

<script type="text/javascript">
<!--
// This is my JavaScript comment
document.write("<h1>Hello!</h1>");
//-->
</script>

14
Multiple Line Comment
Example
<script type="text/javascript">
<!--
/* This is a multiple line comment.
* The star at the beginning of this line is
optional.
* So is the star at the beginning of this
line.
*/
document.write("<h1>Hello!</h1>");
//-->
</script>

15
Find the Bug!
<script type="text/javascript">
<!--
/* This is my JavaScript comment
* that spans more than 1 line.
*
document.write("<h1>Hello!</h1>");
//-->
</script>

CLASS EXERCISE:
Type Test-Program1 on Notepad, Save As .html
and run the program. Explain each line of code.

16

You might also like