Scribd
Upload
37 views10 pages

Lecture 3 JS

JavaScript can run in web browsers via browser engines like Chrome's V8 or Firefox's SpiderMonkey. It can also run outside browsers using Node.js. Common JavaScript editors include Atom, VS Code, Sublime Text, and Notepad. JavaScript code is written within <script> tags in HTML. It can output to the page, alerts, or the browser console. Functions allow code to run on events or be called anywhere. JavaScript supports variables, arithmetic, comparisons, conditions, and loops to control program flow.

Uploaded by

Thobius Joseph
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
37 views10 pages

Lecture 3 JS

JavaScript can run in web browsers via browser engines like Chrome's V8 or Firefox's SpiderMonkey. It can also run outside browsers using Node.js. Common JavaScript editors include Atom, VS Code, Sublime Text, and Notepad. JavaScript code is written within <script> tags in HTML. It can output to the page, alerts, or the browser console. Functions allow code to run on events or be called anywhere. JavaScript supports variables, arithmetic, comparisons, conditions, and loops to control program flow.

Uploaded by

Thobius Joseph
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 10

Ardhi University Lecture 3_part_One JavaScript 2023

Where does JS run?

 It was original designed to be used by web browser through JS engine in web browser
 In 2008, Ryan Dahl took open source JS engine of chrome and embedded it in C++ program and
called it Node. Through Node we can run JS code outside a browser

Qn: Provide name of JS Engine for Firefox and Chrome

Editors

 Various Editors but


- Atom
- VS code
- Sublime Text
- Notepad (In our class we will use this one)
- Console browser

HTML Tag used for JS

<script></script>

<script language="javascript" type="text/javascript">

JavaScript code

</script>

Where to write you code (Types of JS)

1. Internal JS
Internal JS are included within the head section of an HTML document or the body section of an
HTML document.
<html>
<script type =”text/javascript”>
Alert(“Mimi”);
Console.log(“wewe”);
</script>
<head>
</head>
</html>
2. External JS
External JS are stored in a separate file and can be linked to multiple HTML documents, allowing
for global access different web html files.
For Css it <link rel="stylesheet" type="text/css" href="mystyle.css">
was
Ardhi University Lecture 3_part_One JavaScript 2023

For Js is <script type="text/javascript" src="myjs.js"><script>


NB: The JS the best Practise should be, place all JS in body element as last line. Question why? Answer is
load time of other elements.

JavaScript Output Display Options

JavaScript can "display" data in different ways:

1. Writing into the HTML output using document.write().


Example document.write(“my name”);
2. Writing into an alert box, using window.alert().
Example alert(2+2);
3. Writing into the browser console, using console.log().
Example console.log(“wewe”);
4. Writing into an HTML element, using innerHTML.
Example
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;

</script>

OR

<script>
const element = document.getElementById("demo");
element.innerHTML = "New Heading";
element.style.color = "red";
</script>

NB: 1, 2 and 3 are used for testing and debugging purpose

NB: You cannot internal use alert () and console.log in html body element, they will be treated as normal
text

NB: To view a console in a browser you must do some settings such that for a Chrome console

1. Open Chrome
2. Go to More tools, Extension then enable developer option
3. Right Click empty are and click inspect from open dialog
4. Click Console
Ardhi University Lecture 3_part_One JavaScript 2023

5. Type console.log(“mii”);
NB: The Console is Case Sensitive

Example

<p>An unordered list:</p>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

<p>The innerHTML of the second li element is:</p>

<p id="demo"></p>

<script>

const collection = document.getElementsByTagName("li");

document.getElementById("demo").innerHTML = collection[1].innerHTML;

OR

document.getElementsByTagName("li")[0].innerHTML = "Hello World!";

OR

document.getElementsByTagName("*")[2].innerHTML = "Hello World!";

</script>

How to Handle Simple Browsers

Browsers that do not support JavaScript will display JavaScript as page content. To prevent them from
doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the
JavaScript. Just add an HTML comment tag <! -- Before the first JavaScript statement, and a --> (end of
comment) after the last JavaScript statement, like this:

<script type="text/javascript">

<!--

document.write("Hello World!");
Ardhi University Lecture 3_part_One JavaScript 2023

//-->

</script>

Systems you can development with JavaScript

 Web/Mobile Apps
 Real-time Networking Apps
 Command line tools
 Games

What can a JavaScript Do ?

 JavaScript can put dynamic text into an HTML page - A JavaScript statement like this:

document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page

 JavaScript can react to events - A JavaScript can be set to execute when something happens, like
when a page has finished loading or when a user clicks on an HTML element
 JavaScript can read and write HTML elements - A JavaScript can read and change the content of
an HTML element
 JavaScript can be used to validate data - A JavaScript can be used to validate form data before it
is submitted to a server. This saves the server from extra processing
 JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the
visitor's browser, and - depending on the browser - load another page specifically designed for
that browser

JavaScript Statements

document.write("Hello Dolly");

It is normal to add a semicolon at the end of each executable statement. Most people think this is a
good programming practice, and most often you will see this in JavaScript examples on the web. The
semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret
the end of the line as the end of the statement. Because of this you will often see examples without the
semicolon at the end. Note: Using semicolons makes it possible to write multiple statements on one
line.

JavaScript Comments

Comments can be added to explain the JavaScript, or to make the code more readable.

1. Single line comments start with //.


2. Multi line comments start with /* and end with */.

JavaScript Variables
Ardhi University Lecture 3_part_One JavaScript 2023

Rules for JavaScript variable names:

 Variable names are case sensitive (y and Y are two different variables)
 Variable names must begin with a letter or the underscore character

You can declare JavaScript variables with the var or let keywords or by using variable name only
and no data type is used:

var name = “john”;

OR

name = “john”; // This method used when you declare variable and initialize it

JavaScript Arithmetic

Same as other programming languages

 Addition operation
 Subtraction operation
 Multiplication operation
 Division operation
If y=5
Ardhi University Lecture 3_part_One JavaScript 2023

JavaScript Comparison and Logical Operators

Conditional Operator
Ardhi University Lecture 3_part_One JavaScript 2023

JavaScript Condition Statements

 if statement - use this statement to execute some code only if a specified condition is true
 if...else statement - use this statement to execute some code if the condition is true and
another code if the condition is false
 if...else if....else statement - use this statement to select one of many blocks of code to be
executed
 switch statement - use this statement to select one of many blocks of code to be executed
Example of switch statements

Confirm Box

A confirm box is often used if you want the user to verify or accept something. When a confirm box pops
up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns
true. If the user clicks "Cancel", the box returns false.
Ardhi University Lecture 3_part_One JavaScript 2023

Prompt Box

A prompt box is often used if you want the user to input a value before entering a page. When a prompt
box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

JavaScript Functions

To keep the browser from executing a script when the page loads, you can put your script into a
function. A function contains code that will be executed by an event or by a call to the function. You may
call a function from anywhere within a page (or even from other pages if the function is embedded in an
external .js file).

NB: Functions can be defined both in the and in the section of a document. However, to
assure that a function is read/loaded by the browser before it is called, it could be wise to
put functions in the section.

NB: We do not specify return type to function in JS but return keyword is still used to
return value within a function
Ardhi University Lecture 3_part_One JavaScript 2023

JavaScript Looping Statements

1. For loop

2. While loop

3. Do … while loop
Ardhi University Lecture 3_part_One JavaScript 2023

4. For … In

JavaScript Events

You might also like