JavaScript on the client side || Js || Pt

It is feasible to learn how to use JavaScript in web browsers in a reasonably linear fashion since client-side JavaScript does not display the nonlinear cross-reference problem to the same degree as the core language. However, because Part II is still a long way off and you're presumably reading this book to learn client-side JavaScript, this part is more of a brief overview of the fundamentals of client-side programming than anything else.

The first chapter of Part II, JavaScript in Web Browsers, goes into great depth about how to use JavaScript in web browsers. The most crucial item you'll need to

Learn in that chapter that HTML pages can contain JavaScript code by utilising

the <script> tag:

<html>
<head>
<script src="library.js"></script> 
</head>
<body>
<p>This is a paragraph of HTML</p>
<script>
</script>
<p>Here is more HTML.</p>
</body>
</html>

The Window Object describes methods for scripting the web browser and goes through various significant client-side JavaScript global functions. For instance:

In contrast to the examples for the core language earlier in the chapter, the client-side example code in this part is presented in lengthier snippets. These illustrations are not intended for insertion into a Firebug (or comparable) terminal window. Instead, you may load them in your web browser to test them out by embedding them in an HTML document. For instance, the code above functions as a standalone HTML file.

In Scripting Documents, the client-side Java Script used to script HTML page content is discussed in detail. It demonstrates how to choose certain HTML components from inside a document, how to modify the HTML properties of those elements, how to add new elements to the page, and how to change their contents. Several of these fundamental document searching and modification techniques are demonstrated by this function:

demonstrates how the HTML components that make up web content may be scripted by JavaScript. The usage of JavaScript in conjunction with the CSS styles that specify how that content is presented is demonstrated in Chapter 16, Scripting CSS. The style or class property of HTML elements is frequently used for this:

JavaScript enables us to create behaviour for those documents using event handlers in addition to scripting their HTML content and CSS appearance in web browsers. A JavaScript function called an event handler is one that is registered with the browser and is called when a certain kind of event takes place. The event of interest might be a keystroke or mouse click (or on a smart phone, it might be a two-finger gesture of some sort).Or, a user might resize the browser window, the browser finishes loading a document, or an HTML form element could be filled out by the user before an event handler is called. In Handling Events, it is explained how event handlers may be created, registered, and called when events happen.

The HTML attributes that start with "on" are the easiest to use for defining event handlers. When developing straightforward test scripts, the "onclick" handler is a very helpful one. Let's say you entered in the debug() and hide() methods from the previous section and saved them as debug.js and hide.js, respectively. A straightforward HTML test file employing button> elements with onclick event handler attributes might be created as follows:

Here is some additional event-using client-side JavaScript code. Additionally, it exemplifies a more sophisticated method of registering event handler functions for "click" events while registering an event handler for the crucial "load" event:

Describe how JavaScript may be used to script the HTML text, CSS display, and event handling of web pages. The APIs covered in those chapters are a little complicated and, until recently, had a lot of browser compatibility issues. Due to these factors, many or perhaps the majority of client-side JavaScript programmers opt to utilise a client-side library or framework to make simple activities involving programming. The jQuery Library is the most well-known example of this type of library. A sophisticated and user-friendly API for scripting document content, display, and behaviour is defined by jQuery. It has undergone extensive testing and is compatible with all modern browsers, even older ones like IE6.

jQuery code frequently uses a function called $, which makes it simple to spot (). Here is how the debug() method, which was previously utilised, appears after being modified to make use of jQuery:

function debug(msg) {
var log = $("#debuglog");
if (log.length == 0) {
log = $("<div id='debuglog'><h1>Debug Log</h1></div>");
log.appendTo(document.body);
}
log.append($("<pre/>").text(msg));
}