3.4.1 Let's Meet JavaScript

This topic introduces JavaScript, explaining how to embed it in HTML, how it displays output, and how events and alerts make webpages interactive.

Definition

JavaScript: JavaScript is an exciting language primarily used in development of web pages and scripts. It does not consume much of memory and that is why it is used at the client-end in developing websites, for making pages dynamic. It easily works with programming languages like Java and HTML, on any operating system.

Core Concept

JavaScript is the language that brings a webpage to life. If HTML is the structure of a house and CSS is the paint and furniture, JavaScript is the electricity—it makes things happen. It allows the page to respond to what you do: clicking a button, filling a form, or moving your mouse. JavaScript runs in the browser (client-side), so it doesn't need to send every action back to the server, making webpages feel fast and interactive.

Detailed Explanation

Embedding JavaScript in HTML

JavaScript code can be embedded in HTML with the starting and ending tag of `<script>`, in a webpage. There is no limitation of where to place the code inside a HTML file.

Example: The following JavaScript code embedded in the body displays a sentence (string) using `document.write()` function.

```html <html> <body> <script language="javascript" type="text/javascript"> document.write("Let's Meet Javascript!") // document.write(" Let's Meet Javascript | ") </script> </body> </html> ```

Output: Let's Meet Javascript!

• JavaScript is embedded using `<script>` tags.
• `document.write()` displays text directly on the page.
• Extra spaces and tabs are discarded by JavaScript.
• Comments can be added using `//` for single-line comments.
• JavaScript can be placed in the `<head>` or `<body>` section.

What is an Event?

In programming, everything that a user or another program does with your program that can be sensed and triggers some task to be done is called an 'event'. Events are important and critical in the functioning and flow-control of your program.

Similarly, in website development, the easiest way to introduce dynamicity is to allow some event to occur and respond accordingly.

• Clicking a button
• Moving the mouse over an element
• Pressing a key on the keyboard
• Submitting a form
• Loading a page

The Alert Function

Alert is a commonly used functionality that pops up a message window.

Example: ```html <html> <head> <script type="text/javascript"> function msgSure() { alert("Are You Sure???") } </script> </head> <body> Do You Mind, CLICKING on the Button - <input type="button" onclick="msgSure()" value="Be Sure"> </body> </html> ```

Output: When the "Be Sure" button is clicked, an alert box appears saying "Are You Sure???".

• A function `msgSure()` is defined in the `<head>` section.
• The function uses `alert()` to pop up a message.
• The button has an `onclick` event that calls `msgSure()` when clicked.
• The `value` attribute sets the text on the button.

Try It Yourself

You can try different messages and even arithmetic operations like: ```javascript alert(2+2) ``` This results in an alert box showing: ``` 4 ```

Why Use JavaScript?

• Interactivity: Responds to user actions.
• Dynamicity: Changes content without reloading.
• Client-Side: Runs in the browser, saving server resources.
• Versatility: Works with HTML, CSS, and other languages.
• Cross-Platform: Works on any operating system.

Intermediate Level

JavaScript is a client-side scripting language used to make webpages dynamic. It is embedded with `<script>` tags, either in the `<head>` or `<body>` section. `document.write()` displays text on the page. An event is any action that triggers a response—like clicking a button (`onclick`), moving the mouse, or pressing a key. The `alert()` function pops up a message box. Functions like `msgSure()` can be defined and called by events. JavaScript enables interactivity, dynamic content, and user input handling without reloading the page.

Important Points

• - JavaScript = client-side scripting language for dynamic webpages.
• - Embedded with `<script>` tags.
• - `document.write()` displays text on the page.
• - Event: Any action that triggers a response (click, hover, keypress).
• - `alert()` pops up a message box.
• - `onclick` is a common event handler.
• - Functions can be defined and called by events.
• - JavaScript can be placed in `<head>` or `<body>`.
• - Comments: `//` for single-line.

Remember

• - JavaScript: Dynamic webpages.
• - Script Tag: `<script>...</script>`.
• - Output: `document.write()`.
• - Event: User action (click, hover).
• - Alert: `alert("message")`.
• - Event Handler: `onclick="function()"`.
• - Function: `function name() { ... }`.
• - Comment: `//`.

Common Mistakes

• - Forgetting `<script>` tags: JavaScript must be inside `<script>` or an external `.js` file.
• - Case sensitivity: `msgSure` and `msgsure` are different.
• - Forgetting to call the function: `onclick="msgSure()"` needs parentheses.
• - Using `document.write()` after page load: It overwrites the entire page.
• - Confusing `alert()` with `console.log()`: `alert()` shows a popup; `console.log()` writes to the browser console.

Quick Revision

JavaScript is a client-side scripting language used to make webpages dynamic. It is embedded with `<script>` tags. `document.write()` displays text on the page. An event is any action that triggers a response—like clicking a button (`onclick`), moving the mouse, or pressing a key. The `alert()` function pops up a message box. Functions can be defined and called by events. JavaScript enables interactivity, dynamic content, and user input handling.

60-Second Revision

• JavaScript: Client-side scripting for dynamic webpages.
• Embedded: `<script>...</script>`.
• Output: `document.write()`.
• Event: User action (click, hover, keypress).
• Alert: `alert("message")`.
• Event Handler: `onclick="function()"`.
• Function: `function name() { ... }`.
• Comment: `//`.
• Key Point: JavaScript makes webpages interactive by responding to events and manipulating content dynamically.