Javascript


The Nature of JavaScript
Dynamic Many things can be changed. For example, you can freely add and remove properties (fields) of objects after they have been created. And you can directly create objects, without creating an object factory (e.g., a class) first. Dynamically typed Variables and object properties can always hold values of any type. Functional and object-oriented JavaScript supports two programming language paradigms: functional programming (first-class functions, closures, partial application via bind(), built-in map() and reduce() for arrays, etc.) and object-oriented programming (mutable state, objects, inheritance, etc.). It fails silently JavaScript did not have exception handling until ECMAScript 3. That explains why the language so often fails silently and automatically converts the values of arguments and operands: it initially couldn't throw exceptions. Deployed as source code JavaScript is always deployed as source code and compiled by JavaScript engines. Source code has the benefits of being a flexible delivery format and of abstracting the differences between the engines. Two techniques are used to keep file sizes small: compression (mainly gzip) and minification (making source code smaller by renaming variables, removing comments, etc.; see Chapter 32 for details). Part of the web platform JavaScript is such an essential part of the web platform (HTML5 APIs, DOM, etc.) that it is easy to forget that the former can also be used without the latter. However, the more JavaScript is used in nonbrowser settings (such as Node.js), the more obvious it becomes. Specification-wise, JavaScript does not have integers, only floating-point numbers. pageX and pageY: Relative to the top left of the fully rendered content area in the browser. This reference point is below the url bar and back button in the upper left. This point could be anywhere in the browser window and can actually change location if there are embedded scrollable pages embedded within pages and the user moves a scrollbar. screenX and screenY: Relative to the top left of the physical screen/monitor, this reference point only moves if you increase or decrease the number of monitors or the monitor resolution. clientX and clientY: Relative to the upper left edge of the content area (the viewport) of the browser window. This point does not move even if the user moves a scrollbar from within the browser.
Events
JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc. onclick Event Type This is the most frequently used event type which occurs when a user clicks the left button of his mouse. You can put your validation, warning etc., against this event type.
Cookies
Your server sends some data to the visitor's browser in the form of a cookie. The browser may accept the cookie. If it does, it is stored as a plain text record on the visitor's hard drive. Now, when the visitor arrives at another page on your site, the browser sends the same cookie to the server for retrieval. Once retrieved, your server knows/remembers what was stored earlier. Cookies are a plain text data record of 5 variable-length fields: Expires: The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser. Domain: The domain name of your site. Path: The path to the directory or web page that set the cookie. This may be blank if you want to retrieve the cookie from any directory or page. Secure: If this field contains the word "secure", then the cookie may only be retrieved with a secure server. If this field is blank, no such restriction exists. Name=Value: Cookies are set and retrieved in the form of key-value pairs. JavaScript can manipulate cookies using the cookie property of the Document object. JavaScript can read, create, modify, and delete the cookies that apply to the current web page. The simplest way to create a cookie is to assign a string value to the document.cookie object, which looks like this. document.cookie = "key1=value1;key2=value2;expires=date";
Page Redirection
You can refresh a web page using JavaScript location.reload method. This code can be called automatically upon an event or simply when the user clicks on a link. If you want to refresh a web page using a mouse click, then you can use the following code: < a href="javascript:location.reload(true)" >Refresh Page < /a
Dialog box
Alert Dialog Box An alert dialog box is mostly used to give a warning message to the users Confirmation Dialog Box A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog box with two buttons: OK and Cancel. Prompt Dialog Box The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK.
Void
Void is an important keyword in JavaScript which can be used as a unary operator that appears before its single operand, which may be of any type. This operator specifies an expression to be evaluated without returning a value.
Page printing
Many times you would like to place a button on your webpage to print the content of that web page via an actual printer. JavaScript helps you to implement this functionality using the print function of window object. < input type="button" value="Print" onclick="window.print()" / >
Objects
Objects are composed of attributes. If an attribute contains a function, it is considered to be a method of the object, otherwise the attribute is considered a property.
Number
The Number object represents numerical date, either integers or floating-point numbers. In general, you do not need to worry about Number objects because the browser automatically converts number literals to instances of the number class.
Boolean
The Boolean object represents two values, either "true" or "false".
String
The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.
Array
The Array object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.
Date
The Date object is a datatype built into the JavaScript language. Date objects are created with the new Date().
Math
The math object provides you properties and methods for mathematical constants and functions. Unlike other global objects, Math is not a constructor. All the properties and methods of Math are static and can be called by using Math as an object without creating it. Thus, you refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method's argument.
Regular expression
A regular expression is an object that describes a pattern of characters. The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods that use regular expressions to perform powerful pattern-matching and search-and-replace functions on text.
Document object
Every web page resides inside a browser window which can be considered as an object. A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.
Browser environment
The browser provides access to a large hierarchy of objects for developers to manipulate. Document Object Model (DOM) document and related objects allow to access contents of the page, modify elements etc. Most interaction with HTML is handled here. Browser Object Model (BOM) BOM is a pack of objects that allow to control the browser, e.g change current URL, access frames, do background requests to server with XMLHttpRequest etc. Functions like alert,confirm,prompt also belong BOM, they are provided by the browser. JavaScript objects and functions JavaScript itself is a language which gives us access to DOM, BOM and provides objects and functions of its own. JavaScript follows the ECMA-262 standard. The global window object mixes browser window functionality (methods focus(),open() etc) with being a JavaScript global object. ThatÓł why it is both green and red. The Browser Object Model All browsers are split into different parts (objects) that can be accessed using Javascript. Collectively, these parts are known as the Browser Object Model, or the BOM. At the very top of this browser hierarchy is the Window object. This represents the entire browser, with its toolbars, menus, status bar, the page itself, and a whole lot more besides. Effectively, the Window IS the browser. window.document Allows you to access all your HTML elements. We'll go into more detail about the document object later. window.history Access information about browsing history. This object is of limited use since you can't get at which pages a user has visited, just how many pages are in the browsing history. You can also access the methods history.back, history.forward and history.go. There's not many situations where you want to, though. window.innerHeight and window.innerWidth Gets the height and width of the available space on the page window.screen Gets information about the browser screen. You may think that screen is the same as innerHeight and innerWidth but they are not. As an example, create a new HTML page from your template with SCRIPT tags in the HEAD section. window.navigator Used to gets information about the browser Window Methods and Events The Window object also has something called Methods. A method is a chunk of code that does a particular job. window.open window.open("popup.html", "PopUp", "toolbar=no,width=500,height=300"); Here are some more configuration options you can have: left - the left position of the window in pixels top - the top position of the window in pixels height - height of the window's viewing area. Minimun height is 100 pixels width - width of the window viewing area. Minimun width is 100 pixels menubar - gets you the File, Edit, View, etc, menus at the top. toolbar - gets you the standard toolbar: back, forward arrows, etc location - gets you the Address bar, to type web address in scrollbars - gets you scroll horizontal and vertical scroll bars < a href="#" onClick="eAdd()">Link Text Here< /A> The onClick part is something called an event. onChange onClose onKeydown onKeypress onKeyup onLoad onMousedown onMousemove onMouseout onMouseover onMouseup onScroll onSelect onSubmit onUnload The Document is another Window object you can manipulate. It's quite a powerful object as it refers to just about all the elements you can have on a web page (forms, links, images, text, HTML code, etc). This means that you can use Javascript to get at HTML elements, amend them, and add new ones. The Document Object Model The Document Object Model is a tree structure of various elements of HTML The <html> is the ancestor of all the other elements; in other words, all the other elements are descendants of <html>. The <head> and <body> elements are not only descendants, but children of <html>, as well. Likewise, in addition to being the ancestor of <head> and <body>, <html> is also their parent. The <p> elements are children (and descendants) of <div>, descendants of <body> and <html>, and siblings of each other <p> element