<!DOCTYPE html>
248 | <html lang="en">
249 | <head>
250 | <meta charset="UTF-8">
251 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
252 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
253 | <title>JavaScript</title>
254 | <script>
255 | document.write("Hello World <br><br>");
256 | document.write("<i><b>Hello from Hamza Khan Lodhi<b></i>");
257 | </script>
258 | </head>
259 | <body>
260 | <h1>Hamza Khan Lodhi</h1>
261 | </body>
262 | </html>261 | The alert() method in JavaScript is used to display a virtual alert box. 262 | It is mostly used to give a warning message to the users. It displays an 263 | alert dialog box that consists of some specified message (which is 264 | optional) and an OK button. When the dialog box pops up, we have to click 265 | "OK" to proceed. 266 |
267 |268 | The alert dialog box takes the focus and forces the user to read the 269 | specified message. So, we should avoid overusing this method because it 270 | stops the user from accessing the other parts of the webpage until the box 271 | is closed. 272 |
273 |alert(message)280 | message: It is an optional string that specifies the text to display in 281 | the alert box. It consists of the information that we want to show to the 282 | users. 283 |
284 |<!DOCTYPE html>
288 | <html>
289 | <head>
290 | <title>JavaScript</title>
291 | <script>
292 | var a = 40;
293 | var b = 20;
294 |
295 | if(a > b){
296 | alert(b + a);
297 | }else{
298 | alert("Value of B : " + b);
299 | }
300 | </script>
301 | </head>
302 | <body>
303 | </body>
304 | </html><!DOCTYPE html>
265 | <html>
266 | <head>
267 | <title>JavaScript</title>
268 | <script>
269 | var ages = [10, 12, 19, 20];
270 | document.write(ages + "<br><br>");
271 | var b = ages.filter(checkAdult);
272 | document.write(b + "<br>");
273 |
274 | function checkAdult(age) {
275 | return age >= 18;
276 | }
277 | </script>
278 | </head>
279 | <body>
280 | </body>
281 | </html>
403 | The window object is supported by all browsers. It
404 | represents the browser's window.
405 |
408 | All global JavaScript objects, functions, and variables automatically 409 | become members of the window object. 410 |
411 | 412 |Global variables are properties of the window object.
413 | 414 |Global functions are methods of the window object.
415 | 416 |417 | Even the document object (of the HTML DOM) is a property of the window 418 | object: 419 |
420 | 421 |window.document.getElementById("header");
425 | is the same as:
428 | 429 |document.getElementById("header");261 | The “Question mark” or “conditional” operator in JavaScript is a ternary 262 | operator that has three operands. It is the simplified operator of 263 | if/else. 264 |
265 |
266 | 
268 | Input: let result = (10 > 0) ? true : false; Output: true
271 |Input: let message = (20 > 15) ? "Yes" : "No"; Output: Yes
272 |condition ? value if true : value if false
274 |<!DOCTYPE html>
291 | <html>
292 | <head>
293 | <title>JavaScript</title>
294 | <script>
295 | var a = 100;
296 | var b;
297 | b = "Value is " + (a > 10 ? "True" : "False");
298 |
299 | document.write(b);
300 | </script>
301 | </head>
302 | <body>
303 | </body>
304 | </html>
305 | 261 | JavaScript confirm method invokes a function that asks the user for a 262 | confirmation dialogue on a particular action. The confirm () method uses a 263 | window object to invoke a dialogue with a question and two option buttons, 264 | OK and Cancel. If the user selects the OK option, it will continue to the 265 | function execution; selecting the Cancel option will abort the block 266 | code's execution. 267 |
268 |269 | It returns true if the user selects the OK option; otherwise, it returns 270 | false. 271 |
272 |confirm("Select an Option!");279 | It takes a "message" value in string format to display in the confirmation 280 | dialogue you want to show the user. 281 |
282 |284 | The confirm method returns a Boolean output, either true or false, if the 285 | OK is selected. 286 |
287 |288 | A boolean indicating whether OK (true) or Cancel (false) was selected. If 289 | a browser ignores in-page dialogues, then the returned value is always 290 | false. 291 |
292 |<!DOCTYPE html>
296 | <html>
297 | <head>
298 | <title>JavaScript</title>
299 | <script>
300 | /* Confirm Box*/
301 | var a = confirm ("Do you like our Website?");
302 |
303 | if (a) {
304 | alert("Thanks");
305 | } else {
306 | alert("Sorry");
307 | }
308 | </script>
309 | </head>
310 | <body>
311 | </body>
312 | </html>
266 | The code above has an array variable called numbers holding three values.
267 | Even though the numbers array is a const you’re able to update or change
268 | the variable. For example, you can add another number to the numbers array
269 | by using the push method. Methods are actions you perform on the
270 | array or object.
271 |
272 | const numbers = [1,2,3];
273 | numbers.push(4);
274 | console.log(numbers) // Outpusts [1,2,3,4];
275 |
281 | The modifying principle applies to an object for example.
282 |
283 | const user = {
284 | name: "Gary",
285 | }
286 |
287 | user.age = 29
288 | console.log(user) // {name: "Gary", age: 29
289 |
290 |
293 | The code above creates a user object with a name property then it assigns
294 | a new age property to object. One thing to remember const does not stop
295 | array and objects from being modified it only stops the variable itself
296 | from being reassigned or being overwritten for example.
297 |
298 | const user = {
299 | name: "Gary",
300 | }
301 |
302 | person = { name: "Bob" } // Uncaught TypeError: Assignment to constant
303 | variable.
304 |
305 |
<!DOCTYPE html>
311 | <html>
312 | <head>
313 | <title>JavaScript</title>
314 | <script>
315 | const a = {
316 | name : "Ram",
317 | age : 25
318 | };
319 |
320 | a.name = "Yahoo Baba";
321 | a.age = 55;
322 | console.log(a);
323 | </script>
324 | </head>
325 | <body>
326 | </body>
327 | </html>264 | When a web page is loaded, the browser creates 265 | a Document Object Model 266 | of the page. 267 |
268 | 269 |
270 | The HTML DOM model is constructed as a tree
271 | of Objects:
272 |
273 | With the object model, JavaScript gets all the power it needs to create
274 | dynamic HTML:
275 |
The DOM is a W3C (World Wide Web Consortium) standard.
290 | 291 |The DOM defines a standard for accessing documents:
292 | 293 |294 | "The W3C Document Object Model (DOM) is a platform and language-neutral 296 | interface that allows programs and scripts to dynamically access and 297 | update the content, structure, and style of a document." 299 |
300 | 301 |The W3C DOM standard is separated into 3 different parts:
302 | 303 |312 | The HTML DOM is a standard object model 313 | and programming interface for HTML. It defines: 314 |
315 | 316 |The HTML elements as objects
319 |The properties of all HTML elements
322 |325 | The methods to access all HTML elements 326 |
327 |The events for all HTML elements
330 |262 | A do… while loop in JavaScript is a control statement in which the code is 263 | allowed to execute continuously based on a given boolean condition. It is 264 | like a repeating if statement. 265 |
266 |267 | The do…while loop can be used to execute a specific block of code at least 268 | once. 269 |
270 |do {
275 | // Statements
276 | }
277 | while(conditions)279 | The main difference between do…while and while loop is that it is 280 | guaranteed that do…while loop will run at least once. Whereas, the while 281 | loop will not run even once if the given condition is not satisfied. 282 |
283 |<!DOCTYPE html>
287 | <html>
288 | <head>
289 | <title>JavaScript</title>
290 | <script>
291 | var a = 1;
292 | do{
293 | document.write(a + " Hello Yahoo Baba<br>");
294 | a++;
295 | }while(a <= 10)
296 | </script>
297 | </head>
298 | <body>
299 | </body>
300 | </html>
301 | <!DOCTYPE html>
265 | <html>
266 | <head>
267 | <title>JavaScript</title>
268 | <script>
269 | for(var a = 1; a <= 10; a++){
270 | if(a % 2 == 0){
271 | document.write(a + "<br>");
272 | }
273 | }
274 | </script>
275 | </head>
276 | <body>
277 | </body>
278 | </html>The for statement creates a loop with 3 optional expressions:
262 |for (expression 1; expression 2; expression 3)
266 | {
267 | // code block to be executed
268 | }270 | Expression 1 is executed (one time) before the execution of the code 271 | block. 272 |
273 |Expression 2 defines the condition for executing the code block.
274 |275 | Expression 3 is executed (every time) after the code block has been 276 | executed. 277 |
278 |<!DOCTYPE html>
282 | <html>
283 | <head>
284 | <title>JavaScript</title>
285 | <script>
286 | for(var x = 1; x <= 10; x++){
287 | document.write("Hello Yahoo Baba <br>");
288 | }
289 | </script>
290 | </head>
291 | <body>
292 | </body>
293 | </html> for (key in object) {
277 | // code block to be executed
278 | }<!DOCTYPE html>
284 | <html>
285 | <head>
286 | <title>JavaScript</title>
287 | <script>
288 | var obj = {
289 | firstName : "Yahoo",
290 | lastName : "Baba",
291 | Age : 25,
292 | email : "hello@yahoobaba.net"
293 | };
294 |
295 | for(var key in obj){
296 | document.write(key + " : " + obj[key] + "<br>");
297 | }
298 | </script>
299 | </head>
300 | <body>
301 | </body>
302 | </html>262 | A simple for loop executes a specified number of times depending on the 263 | initialization value and the terminating condition. A nested for loop on 264 | the other hand, resides one or more for loop inside an outer for loop. 265 |
266 |267 | In a nested loop the statement inside the for loop body is again a for 268 | loop. This causes The inside for loop to execute all the way through , for 269 | each iteration of the outer for loop. 270 |
271 |for(let i = 0 ; i < limit; i++)
275 | {
276 | for(let j = 0 ; j < limit; j++)
277 | {
278 | // statement
279 | }
280 | // statement for outer loop
281 | }
282 | 284 | The inside loop in this example runs limit number of times for every 285 | iteration of the outer loop. So, in total, the loop runs limit x limit 286 | number of times. 287 |
288 |<!DOCTYPE html>
292 | <html>
293 | <head>
294 | <title>JavaScript</title>
295 | <script>
296 | for(var a = 1; a <= 5; a++){
297 | for(var b = 1; b <= a ; b++){
298 | document.write(a + " ");
299 | }
300 | document.write("<br>");
301 | }
302 | </script>
303 | </head>
304 | <body>
305 | </body>
306 | </html><!DOCTYPE html>
267 | <html>
268 | <head>
269 | <title>JavaScript</title>
270 | <script>
271 | var person = new Object();
272 |
273 | person.firstname = 'Ram';
274 | person.lastname = 'Kumar';
275 | person.age = 25;
276 |
277 | document.write(person.firstname + "<br>");
278 | document.write(person.lastname + "<br>");
279 | document.write(person['age'] + "<br>");
280 | </script>
281 | </head>
282 | <body>
283 | </body>
284 | </html>261 | The prompt() method in JavaScript is used to display a prompt box that 262 | prompts the user for the input. It is generally used to take the input 263 | from the user before entering the page. It can be written without using 264 | the window prefix. When the prompt box pops up, we have to click "OK" or 265 | "Cancel" to proceed. 266 |
267 |268 | The box is displayed using the prompt() method, which takes two arguments: 269 | The first argument is the label which displays in the text box, and the 270 | second argument is the default string, which displays in the textbox. The 271 | prompt box consists of two buttons, OK and Cancel. It returns null or the 272 | string entered by the user. When the user clicks "OK," the box returns the 273 | input value. Otherwise, it returns null on clicking "Cancel". 274 |
275 |276 | The box is displayed using the prompt() method, which takes two arguments: 277 | The first argument is the label which displays in the text box, and the 278 | second argument is the default string, which displays in the textbox. The 279 | prompt box consists of two buttons, OK and Cancel. It returns null or the 280 | string entered by the user. When the user clicks "OK," the box returns the 281 | input value. Otherwise, it returns null on clicking "Cancel". 282 |
283 |prompt(message, default)The parameter values of this function are defined as follows.
290 |291 | message: It is an optional parameter. It is the text displays to 292 | the user. We can omit this value if we don't require to show anything in 293 | the prompt. 294 |
295 |296 | default: It is also an optional parameter. It is a string that 297 | contains the default value displayed in the textbox. 298 |
299 |<!DOCTYPE html>
303 | <html>
304 | <head>
305 | <title>JavaScript</title>
306 | <script>
307 | var a = prompt("What is your Name ?");
308 |
309 | document.write(a);
310 | </script>
311 | </head>
312 | <body>
313 | </body>
314 | </html>
315 | Variables defined with const cannot be Redeclared
245 |Variables defined with const cannot be Reassigned
246 |Variables defined with const have Block Scope
247 |<!DOCTYPE html>
252 | <html lang="en">
253 | <head>
254 | <meta charset="UTF-8">
255 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
256 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
257 | <title>JavaScript</title>
258 | <script>
259 | let z = "Hello World";
260 | document.write(z);
261 | </script>
262 | </head>
263 | <body>
264 | </body>
265 | </html>Variables defined with const cannot be Redeclared
245 |Variables defined with const cannot be Reassigned
246 |Variables defined with const have Block Scope
247 |<!DOCTYPE html>
253 | <html lang="en">
254 | <head>
255 | <meta charset="UTF-8">
256 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
257 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
258 | <title>JavaScript</title>
259 | <script>
260 | const second = "Hello World";
261 | document.write(second);
262 | </script>
263 | </head>
264 | <body>
265 | </body>
266 | </html>JavaScript Variables can be declared in 4 ways:
245 |The var keyword was used in all JavaScript code from 1995 to 2015.
254 |The let and const keywords were added to JavaScript in 2015.
255 |256 | The var keyword should only be used in code written for older browsers. 257 |
258 |<!DOCTYPE html>
264 | <html lang="en">
265 | <head>
266 | <meta charset="UTF-8">
267 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
268 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
269 | <title>JavaScript</title>
270 | <script>
271 | var x = "Hello";
272 | var y = "World";
273 | document.write(x + y);
274 | </script>
275 | </head>
276 | <body>
277 | </body>
278 | </html>262 | The while loop loops through a block of code as long as a specified 263 | condition is true. 264 |
265 |while (condition)
270 | {
271 | // code block to be executed
272 | }<!DOCTYPE html>
277 | <html>
278 | <head>
279 | <title>JavaScript</title>
280 | <script>
281 | /*Increase While Loop Condition */
282 | var a = 1;
283 |
284 | while (a <= 10) {
285 | document.write(a + ") Hello Yahoo Baba <br>");
286 | a = a + 1;
287 | }
288 |
289 | /* Decrease While Loop Condition */
290 |
291 | var x = 10;
292 |
293 | while (x >= 1) {
294 | document.write(x + ") Hello Yahoo Baba <br>");
295 | x = x - 1;
296 | }
297 | </script>
298 | </head>
299 | <body>
300 | </body>
301 | </html>16 | JavaScript (js) is a light-weight object-oriented programming language 17 | which is used by several websites for scripting the webpages. It is an 18 | interpreted, full-fledged programming language that enables dynamic 19 | interactivity on websites when applied to an HTML document. It was 20 | introduced in the year 1995 for adding programs to the webpages in the 21 | Netscape Navigator browser. Since then, it has been adopted by all other 22 | graphical web browsers. With JavaScript, users can build modern web 23 | applications to interact directly without reloading the page every time. 24 | The traditional website uses js to provide several forms of interactivity 25 | and simplicity. 26 |
27 | 28 |29 | Although, JavaScript has no connectivity with Java programming language. 30 | The name was suggested and provided in the times when Java was gaining 31 | popularity in the market. In addition to web browsers, databases such as 32 | CouchDB and MongoDB uses JavaScript as their scripting and query language. 33 |
34 |There are following features of JavaScript:
37 |