JavaScript – Introduction
Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
Client-side validation,
Dynamic drop-down menus,
Displaying date and time,
Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and prompt
dialog box),
Displaying clocks etc.
Source: [Link]
JavaScript is easy to code.
JavaScript can be implemented using JavaScript statements that are placed within
the <script>... </script> HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within you web page, but it is
recommended that you should keep it within the <head> tags.
The <script> tag alerts the browser program to start interpreting all the text between these tags as a
script. A simple syntax of your JavaScript will appear as follows.
<script>
JavaScript code
</script>
First Javascript Code-Example
Example:
<script>
[Link]("Hello JavaScript!");
</script>
Comments and New line
Comments
JavaScript Single line Comment
Single line comments start with //. Any text written between // and the end of line will be ignored by
JavaScript (will not be executed).
Example:
<script>
// It is single line comment
[Link]("Hello JavaScript!");
</script>
JavaScript Multi line Comment
It can be used to add single as well as multi line comments. It is represented by /* and */.
Example:
/* your code here */
It can be used before, after and middle of the statement.
<script>
/* It is multi line comment.
It will not be displayed */
[Link]("Hello JavaScript!");
</script>
New line
<script>
[Link]("Hello");
[Link]("<br>");
[Link]("JavaScript!");
</script>
JavaScript Variables
Variables are used to store data values.
JavaScript uses the keywords var and let to declare variables.
An equal sign is used to assign values to variables.
Storing a value in a variable is called variable initialization. You can do variable initialization at the
time of variable creation or at a later point in time when you need that variable.
Variable naming
There are two limitations on variable names in JavaScript:
The name must contain only letters, digits, or the symbols $ and _.
The first character must not be a digit.
Examples of valid names:
let userName;
let test123;
let $ = 1; // declared a variable with the name "$"
let _ = 2; // and now a variable with the name "_"
Examples of incorrect variable names:
let 1a; // cannot start with a digit
let my-name; // hyphens '-' aren't allowed in the name
JavaScript variable names are case-sensitive: SCHOOL and school are two different variables.
Also, when we have an variable made out more than one word, use Camel case (every next word of
the name of the variable, its first letter is capital- e.g. getElementById
Reserved names
There is a list of reserved keywords, which cannot be used as variable names because they are used
by the language itself. For example: let, class, return, …
Constants
To declare a constant (unchanging) variable, use const: const myBirthday = '8.08.1988';
JavaScript Operators
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations on the operands.
JavaScript Assignment Operator
JavaScript Logical Operators
JavaScript Comparison Operators
The JavaScript comparison operator compares the two operands
*Identical (example 10===20) – mistake in the table
The [Link]() static method always rounds down and returns the largest integer less than or
equal to a given number.
Interaction: alert, prompt,
confirm
alert
Example:
<script>
alert( 'Hello, world!' );
</script>
prompt
The function prompt accepts two arguments:
result = prompt(title, [default]);
It shows a modal window with a text message, an input field for the visitor, and the buttons
OK/Cancel.
Title: The text to show the visitor.
Default: An optional second parameter, the initial value for the input field.
The square brackets in syntax [...] - The square brackets around default in the syntax above denote
that the parameter is optional, not required.
Example:
<script>
let age = prompt('How old are you?', 100);
</script>
The visitor can type something in the prompt input field and press OK. Then we get that text in the
result. Or they can cancel the input by pressing Cancel or hitting the Esc key, then we get null as the
result. The call to prompt returns the text from the input field or null if the input was canceled.
confirm
result = confirm(question);
The function confirm shows a modal window with a question and two buttons: OK and Cancel.
The result is true if OK is pressed and false otherwise.
Example:
<script>
let age = confirm("Are you 18?");
</script>
JavaScript Arrays
An array is a special variable, which can hold more than one value (list of items).
The JavaScript Array has the following syntax: (It is a common practice)
const array_name = [item1, item2, ...];
Example: const fruits = ["banana", "apple", "mango"];
An array can hold many values under a single name, and you can access the values by
referring to an index number.
It is possible to first create an array, and then write the items.
Example:
const fruits = [ ];
fruits [0]= "banana";
fruits [1]= "apple";
fruits [2]= "mango";
The push() method - allows us to add items to the end of an array.
The pop() method - removes the last item of an array.
Example:
<script>
const fruits = ["banana", "apple", "mango"];
[Link](fruits[0]);
[Link]("<br>", fruits);
[Link]("orange");
[Link]("<br>", fruits);
[Link]();
[Link]("<br>", fruits);
</script>
Output:
banana
banana,apple,mango
banana,apple,mango,orange
banana,apple,mango
The join() method - also joins all array elements into a string.
The shift() method - removes the first array element and "shifts" all other elements to a lower
index.
The unshift() method - adds a new element to an array (at the beginning), and "unshifts" older
elements
Example:
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let f=[Link]();
[Link] (f, "<br>");
[Link]();
[Link] (fruits);
[Link]("Strawberry");
[Link] ("<br>", fruits);
[Link] ("<br>", [Link](" and "));
</script>
Output:
Banana
Apple,Mango
Strawberry,Apple,Mango
Strawberry and Apple and Mango
Examples of questions:
These are just couple of examples; questions on the B-test can be from entire part of JavaScript.
1. JavaScript is used to create interactive websites (circle the correct answer):
True False
2. Write the correct logical operators:
a. Logic OR _____________
b. Logic NOT ____________
3. Circle all the correct variable name/s:
a. 123test
b. Test123
c. $test
d. Test-123
4. Explain the keyword let in JavaScript:
______________________________________________________________
5. Write the code for a new line: ____________________________________
6. Which method allows us to add items to the end of an array? ____________
7. Correct four mistakes in the next program: Program displays only odd numbers
from 22 to 4 (in the same row, separated by space). (3)
<script>
while (let i=22; i<=4;i--)
{
if(i/2!=0)
[Link](i, " ")
}
<script>
SOLUTION:
1. True, 2. a. II b. !, 3. b. and c., 4. Keyword let is used for declaring the variables
5. [Link]("<br>"); 6. push() method
7. Correct code:
<script>
for (let i=22; i>=4;i--)
{
if(i%2!=0) [Link](i, " ")
}
</script>
