GROUP MEMBERS
ARINEITWE INNOCENT 21/U/3854
AMANYA EVIDENCE 21/U/1074
NINSIIMA KENNETH 21/U/0374
NGOBI ABUDALAH 21/U/19871PS
JAVASCRIPT
JavaScript is a client-side scripting language that
enhances the interaction between the user and the
webpage, making it dynamic. Java has many
applications, including software development, mobile
applications, and large systems development.
Why Study JavaScript?
1.HTML to define the content of
web pages
2.CSS to specify the layout of web
pages
3.JavaScript to program the
behavior of web pages
For instance, in-browser JavaScript can:
Add new HTML to the page, change the existing content, and modify styles.
Send requests over the network to remote servers, download and upload files
Get and set cookies, ask questions to the visitor, and show messages.
Remember the data on the client side (“local storage”).
What makes JavaScript unique?
Full integration with HTML/CSS.
Supported by all major browsers and enabled by default
JavaScript Can Change HTML Content
The <script> Tag
JavaScript code is inserted between <script> and </script> tags in HTML.
Example
<script>document.getElementById("demo").innerHTML = "My First JavaScript";</script>
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js. To use an external script, put the name of the script
file in the src (source) attribute of a <script> tag:
<script src="myScript.js"></script>
One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and changes the element
content (innerHTML) to "Hello JavaScript":
For example;
JavaScript is Case Sensitive
All JavaScript identifiers are case-sensitive. This means that language key
words, variables, function names must always be typed with a consistent
capitalization of letters.
For example lastName and lastname, are two different variables but can be
the same for non case sensitive language:
lastName = "Doe";
lastname = "Peterson";
JavaScript Display Possibilities Forexample
JavaScript can "display" data in different ways:
innerHTML used to get inner html content
document.write() display strings
window.alert() used when information is to come from user
console.log() used for testing purposes
________________________________________
Using innerHTML
To access an HTML element, JavaScript can use the
document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property
specifies the HTML content
JavaScript Variables
Variables are containers for storing data which are declared in 4 ways;
Automatically
Using Var
Using let
Using const
NB. Let cannot be used without declaring it a gain whereas var can be used without
declaring again.
X = 5; Automatically declared
Var X = 5
Let X = 5
Const X= 5
JavaScript comments can be used to explain JavaScript code and to make it
more readable.
JavaScript comments can also be used to prevent execution when testing
alternative code.
Single Line Comments
Single-line comments start with //.
Any text between // and the end of the line will be ignored by JavaScript (will
not be executed).
This example uses a single-line comment at the end of each line to explain the
code:
Example
let x = 5; // Declare x, give it the value of 5
let y = x + 2; // Declare y, give it the value of x + 2
Multi-line Comments
Multi-line comments start with /* and end with */.
Any text between /* and */ will be ignored by JavaScript.
This example uses a multi-line comment (a comment block) to explain
the code:
Example
/*The code below will show group 3 work*/
JavaScript function
A JavaScript function is a block of code designed to perform
a particular task.
A JavaScript function is defined with the function keyword,
followed by a name, followed by parentheses ().
Example
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
Conditional Statements
You can use conditional statements in your code to do this. In JavaScript, we
have the following conditional statements:
Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false
Use switch to specify many alternative blocks of code to be executed
The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
The else Statement
Use the else statement to specify a block of code to be executed if the condition is false.
Use the else if statement to specify a new condition if the first condition is false.
JavaScript Loops
Loops are handy if you want to run the same code over and over again, each time with a different value.
JavaScript supports different kinds of loops:
for - loops through a block of code a number of times
for/in - loops through the properties of an object
for/of - loops through the values of an iterable object
while - loops through a block of code while a specified condition is true
do/while - also loops through a block of code while a specified condition is true
The For Loop
The for statement creates a loop with 3 optional expressions:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}
From the example, you can read:
Expression 1 sets a variable before the loop starts (let i = 0).
Expression 2 defines the condition for the loop to run (i must
be less than 5).
Expression 3 increases a value (i++) each time the code block
in the loop has been executed.
JavaScript operators
JavaScript operators are used to perform
different types of mathematical and logical
computations.
Examples:
The Assignment Operator = assigns values
The Addition Operator + adds values
The Multiplication Operator * multiplies
values
The Comparison Operator > compares
values
References
https://www.w3schools.com/js/
https://www.javascript.com/
https://geobgu.xyz/web-mapping2/javascript-interactivity.html
