Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

2023 JavaScript 111 555

The document explains the Document Object Model (DOM) and Browser Object Model (BOM) in relation to JavaScript, highlighting the differences between client-side and server-side JavaScript. It provides an overview of JavaScript syntax, including variable declaration, function creation, condition statements, and array manipulation, as well as methods for embedding JavaScript in HTML pages. Additionally, it discusses best practices for including multiple JavaScript files and the use of async and defer attributes.

Uploaded by

balasuk
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

2023 JavaScript 111 555

The document explains the Document Object Model (DOM) and Browser Object Model (BOM) in relation to JavaScript, highlighting the differences between client-side and server-side JavaScript. It provides an overview of JavaScript syntax, including variable declaration, function creation, condition statements, and array manipulation, as well as methods for embedding JavaScript in HTML pages. Additionally, it discusses best practices for including multiple JavaScript files and the use of async and defer attributes.

Uploaded by

balasuk
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

1

The Document Object Model (DOM) provides interfaces for interacting with elements on web pages
The Browser Object Model (BOM) provides the browser API for interacting with the web browser.
The JavaScript engine in the web browser executes the JavaScript code.
JavaScript engines were implemented as interpreters.
New JavaScript engines are typically implemented as just-in-time compilers that compile JavaScript code to bytecode for
improved performance.
Client-side vs. Server-side JavaScript
JavaScript can run on both web browsers and servers
When JavaScript is used on a web page, it is executed in web browsers, herw JavaScript works as a client-side language.
Server-side JavaScript executes on the server that allows you to access databases, file systems, etc. A popular JavaScript
server-side environment is Node.js.
JavaScript overview
To define a variable in JavaScript, you use var keyword. For example:
var x = 10;
var y = 20;
ES6 added a new way to declare a variable with the let keyword:
let x = 10;
let y = 20;
There are differences between var and let.
It’s a good practice to use the let keyword to declare variables.

To declare a function, you use the function keyword.


Example defines a function that calculates the sum of two arguments:
function add( a, b ) {
return a + b;
}
To call function, add() function, syntax is:
let result = add(x, y);
To log the result into the console window of the web browser, you use the console.log()
console.log(result); //you should see 30 in the console window
Condition Statements
if-else and switch statements.
In the divide() function, we check whether the de-numerator (b) is zero.
If yes, we throw an exception. Otherwise, we return the result of a / b.
let a = 20,
b = 30;

function divide(a, b) {
if(b == 0) {
throw 'Division by zero';
}
return a / b;
}
Array
To declare an array, syntax:
let items = [];
To declare an array with some initial elements,
let items = [1, 2, 3];
To access the number of elements in the items array using length property
console.log(items.length); // 3

1
2

To iterate over the elements of the items array, you use the for loop statement
for(let i = 0; i < items.length; i++) {
console.log(items[i]);
}
Or use the for...of loop in ES6:
for(let item of items) {
console.log(item);
}
How to embed JavaScript code into an HTML page.
To insert JavaScript into an HTML page, you use the <script> element.
There are two ways to use the <script> element in an HTML page:
 Embed JavaScript code directly into the HTML page. (or)
 Reference an external JavaScript code file.
Embed JavaScript code in an HTML page
Placing JavaScript code inside the <script> element directly
This is not recommended and should be used only for proof of concept or testing purposes.
The JavaScript code in the <script> element is interpreted from top to bottom.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
<script>
alert('Hello, World!'); // alert() function to display the Hello, World! message.
</script>
</head>
<body>
</body>
</html>
Include an external JavaScript file
First, create a file whose extension is .js e.g., app.js and place it in the js subfolder.
Note that placing the JavaScript file in the js folder is not required however it is a good practice.
Then, use the URL to the JavasScript source code file in the src attribute of the <script> element.
Example
The contents of the app.js file
alert('Hello, World!');
And the following shows the helloworld.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
<script src="js/app.js"></script>
</head>
<body>

</body>
</html>

2
3

When you have multiple JavaScript files on a page,


the JavaScript engine interprets the files in the order that they appear.
For example:
<script src="js/service.js"></script>
<script src="js/app.js"></script>
in this example, JavaScript engine will interpret he service.js file first before interpreting the app.js file.
For the page that includes many external JavaScript files, the blank page is shown during
the page rendering phase.
To avoid this, you include the JavaScript file just before the </body> tag as shown in this example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
</head>
<body>

<!-- end of page content here-->


<script src="js/service.js"></script>
<script src="js/app.js"></script>
</body>
</html>
https://www.javascripttutorial.net/javascript-hello-world/

THE ASYNC AND DEFER ATTRIBUTES

You might also like