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 - 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. •

. •

.


513KB Sizes 4 Downloads 198 Views

Recommend Documents

adarsh raj.pdf
... contends that once the mandatory. percentage of attendance has been prescribed by the statutory Rules,. Page 3 of 6. Main menu. Displaying adarsh raj.pdf.

SARDAR PATEL UNIVERSITY VALLABH ... - Rojgarlive.com
Sep 23, 2015 - www.spuvvn.edu/careers. ... (6) The Deputy Chief, University Employment Information and ... Ph.D. Degree in library science/ information.

Untitled - Sardar Patel University
Nov 20, 2013 - College of Sardar Patel University has revised the schedule for UGC Approved ... Management as under. 3. | Sr. Course Name - Duration.

GS Patel Secondary Evidence II.pdf
1 day ago - CIVIL APPELLATE JURISDICTION ... her ejectment action against the Bank. 5. Thus, when ... Displaying GS Patel Secondary Evidence II.pdf.

SARDAR PATEL UNIVERSITY VALLABH ... - Rojgarlive.com
Sep 23, 2015 - www.spuvvn.edu/careers. ... (6) The Deputy Chief, University Employment Information and ... Ph.D. Degree in library science/ information.

Justice Patel Wit.pdf
Interglobe Aviation Limited (IndiGo) & Anr. ...Defendants. Mr. Amit Jamsandekar, with Mr. Rohan Wagh & Ms. Arya Bile, i/b. Solomon & Co., for the Plaintiffs.

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.

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.

ON-Sardar Vallabhbhai Patel National Police Academy ...
ON-Sardar Vallabhbhai Patel National Police Academy - Stenographer-1521.pdf. ON-Sardar Vallabhbhai Patel National Police Academy - Stenographer-1521.

Virtual reality for training medical skills Piet Kommers ...
(3D) Medical Images) aims at conceptualising, implementing and ..... The 'cognitive apprenticeship model' [11] is another illustration of the shift from .... should allow for both a tutorial situation, where the experienced surgeon explains.

PIET - EOA Report 2017-18.pdf
Whoops! There was a problem loading more pages. PIET - EOA Report 2017-18.pdf. PIET - EOA Report 2017-18.pdf. Open. Extract. Open with. Sign In. Details.