Module 1 - Introduction to JavaScript PDF

MODULE 1 ADVANCE WEB DESIGN  MODULE 1 Introduction to JavaScript  HTML CSS You don’t need to be a programmer Though it’s a great help if you are.  JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightwei...

MODULE 1 ADVANCE WEB DESIGN  MODULE 1 Introduction to JavaScript  HTML CSS You don’t need to be a programmer Though it’s a great help if you are.  JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language Developed by Brendan Eich You need text editor  NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.  JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages.  JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element.  JavaScript can be used to validate data JavaScript can be used to detect the visitor's browser  JavaScript can be put in the body and in the head sections of an HTML page. JavaScript in a page will be executed immediately while the page loads into the browser.  Javascript is the most popular programming language in the world and that makes it a programmer’s great choice. Once you learnt Javascript, it helps you developing great front-end as well as back-end softwares using different Javascript based frameworks like jQuery, Node.JS etc. Javascript is everywhere, it comes installed on every modern web browser and so to learn Javascript you really do not need any special environment setup. For example Chrome, Mozilla Firefox , Safari and every browser you know as of today, supports Javascript.  Javascript helps you create really beautiful and crazy fast websites. You can develop your website with a console like look and feel and give your users the best Graphical User Experience. JavaScript usage has now extended to mobile app development, desktop app development, and game development. This opens many opportunities for you as Javascript Programmer..  Due to high demand, there is tons of job growth and high pay for those who know JavaScript. You can navigate over to different job sites to see what having JavaScript skills looks like in the job market. Great thing about Javascript is that you will find tons of frameworks and Libraries already developed which can be used directly in your software development to reduce your time to market. There is a flexibility given to include JavaScript code anywhere in an HTML document. However the most preferred ways to include JavaScript in an HTML file are as follows − Script in... section. Script in... section. Script in... and... sections. Script in an external file and then include in... section. In the following section, we will see how we can place JavaScript in an HTML file in different ways. 1. Internet Explorer 2. Firefox 3. Chrome 4. Opera 5. NON JavaScript Browsers An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag. For example, is starting tag of a paragraph and is closing tag of the same paragraph but This is paragraph is a paragraph element. An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts − a name and a value The name is the property you want to set. For example, the paragraph element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page. The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right. The four core attributes that can be used on the majority of HTML elements (although not all) are: 1. ID 2. TITLE 3. CLASS 4. STYLE 1. dir - The dir attribute allows you to indicate to the browser about the direction in which the text should flow 2. Lang - The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents 3. xml:lang - The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code as mentioned in previous section. 1.) Embedding script in HTML 2.) Script Positioning