PIET MCA - MCA 4 : 2640002 - Web Technology and Application Development Lecture Notes Unit 1 : Introduction to HTML & JavaScript

WTAD Unit 1 : Introduction to HTML – only basic structure and tags (upto table tag) of HTML, Overview of Java Script, Primitives, Date and Time, Operations and Expressions, Screen Output and Keyboard Input, Control Statement, Object Creation and Modification, Arrays, Functions, Constructors Book 1 : Ivan Bayross, “Web Enabled Commercial Application Development Using HTML, DHTML, Book 1 : Coverage : Ch. 8 to 10 Introduction to HTML – only basic structure and tags 

Concept of WWW, IP Address, Domain, Hosting



Concept of Client Server



Concept of Web Server like IIS, Apache, WAMP, XAMPP



Structure of Internet Address, http://www.google.com



IP V4, V6



FTP



Introduction to Browser



Editors (Notepad, Notepad++,Dreamweaver, Eclipse, TextEdit, etc)



Introduction to HTML



HTML Tag



o

Paired Tags

o

Singular Tags

Most frequently used All HTML Tags: o







<br /> <br /> <body background=”image1.png” backcolor=”#RRGGBB”> <br /> <br /> <b><br /> <br /> <br /> <br /> <i><br /> <br /> <br /> <br /> <u><br /> <br /> <br /> <br /> <p><br /> <br /> <br /> <br /> <center><br /> <br /> <br /> <br /> <font face=”arial” size=”2″ color=”#FF0000″><br /> <br /> <br /> <br /> <br/><br /> <br /> <br /> <br /> <h1><br /> <br /> <br /> <br /> <h2><br /> <br /> Prepared By: Adarsh Patel [http://www.adarshspatel.in]<br /> <br /> 1<br /> <br /> PIET MCA - MCA 4 : 2640002 - Web Technology and Application Development Lecture Notes Unit 1 : Introduction to HTML & JavaScript <br /> <br /> <h3><br /> <br /> <br /> <br /> <h4><br /> <br /> <br /> <br /> <h5><br /> <br /> <br /> <br /> <h6><br /> <br /> <br /> <br /> <div><br /> <br /> <br /> <br /> <hr width=”50%” size=”2″ align=”center”><br /> <br /> Introduction to HTML – only basic structure and tags<br /> <br /> <ul> o <br /> <br /> <ol> o<br /> <br /> <br /> <br /> <li><br /> <br /> <li><br /> <br /> <table border=”1″ cellspacing=”” cellpadding=””> o<br /> <br /> <tr> <br /> <br /> <td><br /> <br /> <br /> <br /> <td colspan=”2″ rowspan=”2″><br /> <br /> <br /> <br /> <th><br /> <br /> <br /> <br /> <a name=”top” rel="nofollow"><br /> <br /> <br /> <br /> <a href=”#top” rel="nofollow"><br /> <br /> <br /> <br /> <a href=”mailto:noreply@adarshspatel.in” rel="nofollow"> Email Me </a><br /> <br /> <br /> <br /> <a href=”page2.html” target=”_blank” rel="nofollow"> Link Name </a><br /> <br /> <br /> <br /> <a href=”page2.html#Bookmark1″ target=”_blank” rel="nofollow"> Link Name </a><br /> <br /> <br /> <br /> <img src=”images/image1.png” alt=”Image1 small desc”> </img><br /> <br /> <br /> <br /> <form><br /> <br /> <br /> <br /> o<br /> <br /> <input type=”text”><br /> <br /> o<br /> <br /> <input type=”password”><br /> <br /> o<br /> <br /> <input type=”button”><br /> <br /> <frameset rows=”30%,*”> o<br /> <br /> <frame src=”page1.html”><br /> <br />  <br /> <br /> How to Print Special Character in HTML o<br /> <br /> Space :  <br /> <br /> o<br /> <br /> < : <<br /> <br /> o<br /> <br /> > : ><br /> <br /> Prepared By: Adarsh Patel [http://www.adarshspatel.in]<br /> <br /> 2<br /> <br /> PIET MCA - MCA 4 : 2640002 - Web Technology and Application Development Lecture Notes Unit 1 : Introduction to HTML & JavaScript o<br /> <br /> & : &<br /> <br /> o<br /> <br /> “ : "e; Overview of Java Script<br /> <br /> JavaScript is object oriented language that allows creation of interactive Web Pages. Advantages of JavaScript:        <br /> <br />  <br /> <br /> An Interpreted Language Embedded within HTML Minimal Syntax – Easy to Learn Quick Development Designed for Simple, Small Program Performance Procedural Capabilities Designed for Programming user events o Button Event o Mouse Over Easy Debugging and Testing Platform Independence / Architecture Neutral<br /> <br /> Sample Example 1 <script language=”JavaScript”> //JavaScript code can be added here.... </script> Data Types and Literal    <br /> <br /> Number Boolean String Null<br /> <br /> Type Casting Creating Variable var <variable_name> = value; Get Input from User var myname = prompt(“Enter Your Name”,”Name”); JavaScript Array <script language="JavaScript"> subjectarray = new Array(); subjectarray[0]="c"; subjectarray[1]="cpp"; subjectarray[2]="java"; Prepared By: Adarsh Patel [http://www.adarshspatel.in]<br /> <br /> 3<br /> <br /> PIET MCA - MCA 4 : 2640002 - Web Technology and Application Development Lecture Notes Unit 1 : Introduction to HTML & JavaScript alert(subjectarray[0]); </script><br /> <br /> JavaScript Array find Length <script language="JavaScript"> subjectarray = new Array(); subjectarray[0]="c"; subjectarray[1]="java"; subjectarray[2]="java"; alert(subjectarray.length); //3 </script> Operators and Expressions in JavaScript Arithmetic Operator Operator + * / % -++<br /> <br /> Description Operator Subtraction Multiplication Division Modulus Decrement Increment<br /> <br /> Logical Operator Operator && || !<br /> <br /> Description Logical AND Logical OR Logical NOT<br /> <br /> Comparison Operator Operator == != < > <= >= === !==<br /> <br /> Operator +<br /> <br /> Description Equal Not Equal Less Than Greater Than Less Than Equal to Greater Than Equal to Strictly Equal Strictly Not Equal String Operator Description Concatenation<br /> <br /> Prepared By: Adarsh Patel [http://www.adarshspatel.in]<br /> <br /> 4<br /> <br /> PIET MCA - MCA 4 : 2640002 - Web Technology and Application Development Lecture Notes Unit 1 : Introduction to HTML & JavaScript Assignment Operator Operator = += -= *= /= %=<br /> <br /> Description Assign Increment + Assign Decrement + Assign Multiply + Assign Divide + Assign Modulus + Assign<br /> <br /> Conditional Operators condition ? value1 : value2 Special Operator delete mysubjectarray[3]; new Array() Conditional & Looping Structure       <br /> <br /> if for while break continue do...while switch<br /> <br /> Explicit Conversion   <br /> <br /> parseInt() : var a =parseInt(form1.text1.value); parseFloat() : var a =parseFloat(form1.text1.value); eval() : var ans = eval(“5+5”);<br /> <br /> User defined Function <script language="javascript"> function fun_to_find_max(a,b) { if(a>b) return a; else return b; } function fun1() { var ans = fun_to_find_max(10,20); alert(ans + "");<br /> <br /> Prepared By: Adarsh Patel [http://www.adarshspatel.in]<br /> <br /> 5<br /> <br /> PIET MCA - MCA 4 : 2640002 - Web Technology and Application Development Lecture Notes Unit 1 : Introduction to HTML & JavaScript } </script> Put your string to html page  document.write(“This is sample Text”); Alert Dialog alert(“Good Morning”); Prompt Dialog var myname = prompt("Enter Your Name","Name"); Confirm Dialog var myname = confirm("Are you Sure ?","Confirm"); if(myname==true) alert("OK Selected"); else alert("Cancel Selected"); Document Object Model Code : <html> <head> <script language="javascript"> function fun_to_find_max(a,b) { if(a>b) return a; else return b; } function fun1() { var ans = fun_to_find_max(f1.t1.value,f1.t2.value); alert(ans + ""); } </script> </head> <body> <form name="f1"> No 1 : <input type="text" name="t1"> No 2 : <input type="text" name="t2"> <input type="button" value="find" onclick="fun1()"> </form> </body> </html><br /> <br /> DOM<br /> <br /> Prepared By: Adarsh Patel [http://www.adarshspatel.in]<br /> <br /> 6<br /> <br /> PIET MCA - MCA 4 : 2640002 - Web Technology and Application Development Lecture Notes Unit 1 : Introduction to HTML & JavaScript<br /> <br /> Output:<br /> <br /> JavaScript Event Handler Mouse Related Events<br /> <br /> Event Description onclick The event occurs when the user clicks on an element oncontextmenu The event occurs when the user right-clicks on an element to open a context menu ondblclick The event occurs when the user double-clicks on an element onmousedown The event occurs when the user presses a mouse button over an element onmouseenter The event occurs when the pointer is moved onto an element onmouseleave The event occurs when the pointer is moved out of an element onmousemove The event occurs when the pointer is moving while it is over an element The event occurs when the pointer is moved onto an element, or onto one of its onmouseover children The event occurs when a user moves the mouse pointer out of an element, or out onmouseout of one of its children onmouseup The event occurs when a user releases a mouse button over an element Keyboard Related Events<br /> <br /> Event onkeydown onkeypress onkeyup<br /> <br /> Description The event occurs when the user is pressing a key The event occurs when the user presses a key The event occurs when the user releases a key Form Related Events<br /> <br /> Event onblur onchange onfocus<br /> <br /> Description The event occurs when an element loses focus The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <keygen>, <select>, and <textarea>) The event occurs when an element gets focus<br /> <br /> Prepared By: Adarsh Patel [http://www.adarshspatel.in]<br /> <br /> 7<br /> <br /> PIET MCA - MCA 4 : 2640002 - Web Technology and Application Development Lecture Notes Unit 1 : Introduction to HTML & JavaScript<br /> <br /> onfocusin onfocusout oninput oninvalid onreset onsearch onselect onsubmit<br /> <br /> The event occurs when an element is about to get focus The event occurs when an element is about to lose focus The event occurs when an element gets user input The event occurs when an element is invalid The event occurs when a form is reset The event occurs when the user writes something in a search field (for <input="search">) The event occurs after the user selects some text (for <input> and <textarea>) The event occurs when a form is submitted Frame or Object Related Events<br /> <br /> Event Description onabort The event occurs when the loading of a resource has been aborted onbeforeunload The event occurs before the document is about to be unloaded The event occurs when an error occurs while loading an external onerror file The event occurs when there has been changes to the anchor part onhashchange of a URL onload The event occurs when an object has loaded onpageshow The event occurs when the user navigates to a webpage onpagehide The event occurs when the user navigates away from a webpage onresize The event occurs when the document view is resized onscroll The event occurs when an element's scrollbar is being scrolled onunload The event occurs once a page has unloaded (for <body>)<br /> <br /> Prepared By: Adarsh Patel [http://www.adarshspatel.in]<br /> <br /> 8<br /> <br /> PIET MCA - MCA 4 : 2640002 - Web Technology and Application Development Lecture Notes Unit 1 : Introduction to HTML & JavaScript The Form Object HTML Form is used to gather data from the user. Some of the commonly used form:  Registration Form  Login Form  Change Password Form  Update Profile Form  Compose Email Form  Etc JavaScript is used for:  Validate form  Check for empty value  Validate range. JavaScript Validation Example <html> <head> <title> JavaScript Validation Example
Name :

Gender:
Male
Female

Agree



Prepared By: Adarsh Patel [http://www.adarshspatel.in]

9

PIET MCA - MCA 4 : 2640002 - Web Technology and Application Development Lecture Notes Unit 1 : Introduction to HTML & JavaScript

Mathematical Operation Mathematical Operation
Write down your Expression :

Output:



Prepared By: Adarsh Patel [http://www.adarshspatel.in]

10

PIET MCA - MCA 4 : 2640002 - Web Technology and Application ...

PIET MCA - MCA 4 : 2640002 - Web Technology and Application Development Lecture Notes. Unit 1 : Introduction to HTML & JavaScript. Prepared By: Adarsh ...

513KB Sizes 9 Downloads 263 Views

Recommend Documents

PIET MCA - Adarsh Patel
WTAD Unit 1 : Introduction to HTML – only basic structure and tags (upto table tag) of ... Prepared By: Adarsh Patel [http://www.adarshspatel.in]. 2. • . • .

MCA BANKING TECHNOLOGY AND Integrated MCA PhD.pdf
MCA BANKING TECHNOLOGY AND Integrated MCA PhD.pdf. MCA BANKING TECHNOLOGY AND Integrated MCA PhD.pdf. Open. Extract. Open with. Sign In.

Information Technology KSKuppusamy MCA Pondicherry University ...
Information Technology KSKuppusamy MCA Pondicherry University.pdf. Information Technology KSKuppusamy MCA Pondicherry University.pdf. Open. Extract.

MCA-AMC.pdf
1Simon Fraser University, 2National Autonomous University of Mexico. [email protected]. 1st Mathematical Congress of the Americas ...

MCA 3rd.pdf
Introduction; Mathematical formulation of transportation model; Transportation problem. as a linear programming problem; Finding initial basic feasible solutions: North-West. corner, Least-cost method, and Vogel's approximation methods; Moving toward

MCA Calendar.pdf
Page 1 of 1. MCA Testing Schedule Spring 2017 Apr 2017 (Central Time). 2 6 2 7 2 8 2 9 3 0 3 1 1. 2 3 4 5 6 7 8. 9 1 0 1 1 1 2 1 3 1 4 1 5. 1 6 1 7 1 8 1 9 2 0 2 1 ...

MCA #1.pdf
There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. MCA #1.pdf.

MCA 2011.pdf
Page 1 of 16. SAKTHI. E/TANCET-MBA-MCAT-2005-08/MCA-2008/TS 1. 1 MCA – 2011. 1. A sequence of odd numbers is formed as follows: 1, 3, 3, 3, 5, 5, 5, 5, ...

MCA Supplementary Exam, Semester – 4, Summer 2016-17.pdf ...
Page 1 of 1. MCA Supplementary Exam, Semester – 4, Summer 2016-17.pdf. MCA Supplementary Exam, Semester – 4, Summer 2016-17.pdf. Open. Extract.

MOBILE-COMPUTING-MCA-V-SEM.pdf
University Anantapur.Worked as a Sr. Software Engineer in Hi-Tech City for the company FortunaPix ... determined via the global positioning system (GPS). ... logistic information to their home base, which helps to improve organization (fleet.

NIMCET MCA Entrance 2012 Solutions.pdf
35. Given that a + b + c = 0. Squaring both the sides .2 .2 .2 0. 2 2 2. a + b + c + ba + cb + ca = ⇒ .ba + .cb + .ac = 2. 3. − Choice (D). 36. Vectors are no coplanar if.

Noorul Islam MCA Protocol Suite.pdf
The session, presentation, and application layers are the user support layers. ... is responsible for the source-to-destination delivery of the entire message. .... Asynchronous Transfer Mode (ATM) is the cell relay protocol designed to support the.

Scheme-SVICA-MCA PhD-IIIrd.pdf
Page 1 of 2. End. Sem. Universi. ty Exam. Two. Term. Exam. Teach. ers. Assess. ment*. End. Sem. Universi. ty Exam. Teacher. s. Assessm. ent*. 1 MCCA-301 ...

Scheme-SVICA-MCA PhD-IInd.pdf
Page 1 of 1. End Sem. Universit. y Exam. Two. Term. Exam. Teache. rs. Assess. ment*. End. Sem. Universi. ty Exam. Teachers. Assessme. nt*. MCCA-201 Digital Computer Fundamentals and Assembly. Language Programming 60 20 20 30 20 4 1 2 6. MCCA-202 Comp

National Conf MCA Reg Form.pdf
There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. National Conf ...

MCA Saskatchewan Courses_Layout 1
Course Description: Great project management, by both the foreman and project manager, is primarily responsible for creating excellent productivity on every project. Due to the endless number of variables, which negatively affect worker efficiency, e

MCA review questions Weather
Which can hold more water vapor, 35o F air or 90o F air? ______. 32. The temperature at which water vapor starts condensing into liquid is called the ______ ______. 33. Which is more likely to cause clouds and precipitation to form? Rising air or Sin

Syllabus-SVICA-MCA PhD-Ist.pdf
Page 1 of 11. Shri VaishnavVidhyapeethVishvavidhyalaya, Indore. Institute of Computer Applications. Name of Program : MCA + Ph.D. SUBJE. CT. CODE. Category SUBJECT NAME. TEACHING & EVALUATION SCHEME. THEORY PRACTICAL. T. h. T P. CREDITS. End Sem. Uni

BBDU MCA Advanced Database Management Systems.pdf
Page 3 of 11. BBDU MCA Advanced Database Management Systems.pdf. BBDU MCA Advanced Database Management Systems.pdf. Open. Extract. Open with.

BBDU MCA Operating System.pdf
3. FCFS is. a) Preemptive. b) Non Preemptive. Page 3 of 18. BBDU MCA Operating System.pdf. BBDU MCA Operating System.pdf. Open. Extract. Open with.

Velagapudi Ramakrishna Siddhartha Engineering College MCA ...
Page 2 of 2. Main menu. Displaying Velagapudi Ramakrishna Siddhartha Engineering College MCA Sem 1 2010 Introduction Programming.pdf. Page 1 of 2.

TANCET-Syllabus-for-MCA-Entrance.pdf
knowledge and protocols, Number System, History of Computer, Network basics (LAN ... Security Tools , Virus , Hacking, Software names and usages (Microsoft.