Scribd
Upload
7 views

Lesson 2 JavaScript Basics

Uploaded by

jmwkimani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

Lesson 2 JavaScript Basics

Uploaded by

jmwkimani
Copyright
© © All Rights Reserved
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