Scribd
Upload
16 views16 pages

JavaScript Basics for Beginners

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
16 views16 pages

JavaScript Basics for Beginners

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

JavaScript Basics

Lecturer: David Marangu


EMAIL:
dmarangu@[Link]
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 [Link] and [Link] 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 [Link], 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">
<!--
[Link]("<h1>Hello, world!</h1>");

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

8
In the sample program 1, the script tag specifies
that we are using JavaScript while the
[Link]() 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 [Link]() method writes a string of text to
the browser

<script type="text/javascript">
<!--
[Link]("<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
[Link]("<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.
*/
[Link]("<h1>Hello!</h1>");
//-->
</script>

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

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

16

Common questions

Powered by AI

Developers can ensure older browsers ignore JavaScript code by using HTML comments around the JavaScript code. The method involves typing '<!--' after the initial <script> tag and using JavaScript comments '//' or '/*...*/' to comment out the script before closing the <script> tag. This tells browsers that do not support JavaScript to ignore the script code .

JavaScript is a client-side scripting language, meaning it is executed in the web browser as the page loads, whereas Java is a compiled programming language that can run standalone applications. JavaScript is interpreted on-the-fly by the client, while Java requires compilation before it is executed. JavaScript is mainly used for adding interactive features to web pages, whereas Java is often used for developing standalone applications .

Common debugging practices in JavaScript include using built-in browser developer tools to inspect elements and console logs to monitor code execution and track variable states. Breakpoints and step execution provide detailed tracebacks of where issues occur. Writing unit tests for JavaScript code helps catch errors early. These practices ensure code correctness and maintainability, facilitating efficient development and reducing bug-related delays .

Inline JavaScript scripts are beneficial for smaller projects due to ease of access and quick implementation, but they can make the HTML file clunky and difficult to maintain. External JavaScript allows for better code organization, reusability across pages, and reduced HTML file size, which enhances site performance through caching. However, it may introduce additional HTTP requests if not optimized. The choice depends on the project scale and need for maintainability .

JavaScript enhances the interactivity of web pages by allowing dynamic content updates and user interaction. It enables functionalities such as clickable buttons, form validation, animations, and asynchronous data updates without needing to reload the page. This makes web pages more interactive and user-friendly .

Beyond web page interactivity, JavaScript is used in various domains including web servers and mobile app development. JavaScript frameworks like Node.js are used to build robust server applications, while libraries and frameworks such as React Native aid in developing mobile apps for Android, iOS, and hybrids. It's also used in game development with HTML5 Canvas enabling 2D and 3D games, and frameworks such as Pebble.js for smartwatch apps .

JavaScript can be inserted into an HTML file in two primary ways: embedding JavaScript code directly in the HTML file using the <script> tag within the <body> or <head> tags, and linking to an external JavaScript file using the <script src="filename.js"></script> tag. Embedding is useful for small scripts that don't need to be reused, while external files are better for scripts shared across multiple pages or projects, enhancing code organization and reusability .

Comments in JavaScript are essential for making code more readable and maintainable by providing documentation and explanations. Two types are implemented: single-line comments using '//' and multi-line comments using '/*...*/'. These are not executed by the interpreter and can be placed in the code to describe functionality or leave notes .

JavaScript enables the creation of server-side applications primarily through Node.js, which provides an event-driven, non-blocking I/O model suitable for building scalable network applications. This is often combined with frameworks like Express.js to facilitate server development, providing tools for routing, middleware, and handling HTTP protocols efficiently .

JavaScript has played a pivotal role in mobile app development through frameworks such as React Native, which enable the use of JavaScript to write apps for both Android and iOS. These frameworks allow for a single codebase to be shared across platforms, providing efficiency in development and maintenance. They leverage JavaScript's ubiquity and extensive ecosystem to streamline cross-platform app development .

You might also like