Programming Club IIT Kanpur
Work environment Before you begin coding,always set up your work environment to your needs IDE Notepad++ Sublime Text 2
Introduction HTML (HyperTextMarkupLanguage) Displays server response to the client “markup”=>No logical evaluations, just structuring Browser reads it and displays the content Open your favorite text editor and start coding 3
HTML Tags HTML Program - Bold - now use Italic - now use Head - Body - Paragraph - 4
How it looks like <html> My First HTML Page My First HTML Page This is some text... This is some text... </html> 5 HTML body
Some More Tags Image tag <img src=“image-url” alt=“message” width=“12” height=“13”/> Hyperlink tag Click Me Click Me 6
Some More Tags Heading tag Heading 1 Heading 1 Sub heading 2 Sub heading 2 Sub heading 3 Sub heading 3 div tag Content</div> 7
Table Tag <tr><th>Name</th><th>Age</th></tr><tr> Tom 12 Tom 12 </tr><tr> Dick 12 Dick 12 </tr></table> 8
List Tag <ul><li>Item1</li><li>Item2</li><li>Item3</li></ul> 9
Name: Name: Password: Password: Gender: Male Gender: Male Female Female Agree to terms: Yes Agree to terms: Yes Date: Date: </form> Forms 10
Rest of the Tags Complete Specs : 11
But looks ugly CSS(Cascading Style Sheet) Separation of Style and Structure Cleaner code Better designing Define in or as a separate file 12
Style tag <style>body{ background-color: red; }p{ text-align: center; font-size: 14px; }</style> 13
Selecting HTML elements by id#name{padding:10px;} by class.pets{margin:10px;} 14
Type of Positions Relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position Fixed The element is positioned relative to the browser window Absolute The element is positioned relative to its first positioned (not static) ancestor element. 15
Shorthand For margins/paddings margin-right/margin-top etc or margin: ; Top-Right-Bottom-Left 16
Some more useful attributes border div { border:2px solid; border-radius:25px; } z-index div div { z-index:10; z-index:10; } 17
Some more useful attributes float div { float: left; } transform(rotate) div { transform:rotate(7deg); } div { transform:rotate(7deg); } 18
Useful Links Frameworks Bootstrap Foundation Skeleton 19
Bootstrap CSS framework by Twitter Sleek, intuitive, and powerful front-end framework for faster and easier web development. Responsive layouts Great-looking typography 20
How do you add logic to your page? How do make your page respond to user actions We need a programmable interface JavaScript Its NOT Java Introduced first by Netscape in
Syntax similar to C and JAVA include within tags var for variables of ALL data types for(var i=1;i<10;i++){ if(i%2==1) alert(“I is odd”); else console.log(“I is even”); } 22
Syntax Functions function sum(num1,num2){ return num1+num2; }; Functions are variables in JavaScript var sum=function(num1,num2){ return num1+num2; }; 23
Syntax Objects and arrays var obj={name:”Tom”, age:17, friends:[“Dick”,“Harry”]} getElementByIdgetElementById(“name”).onclick(function(){alert(‘clicked!’);}); 24
DOM Document Object Model Structured way to represent HTML Helps Javascript to change all HTML elements change all HTML attributes change all CSS styles react to all events 25
Events in JavaScript ondblclick onmousedown onmouseup onmouseover onmouseout onkeyup onkeypress onload onresize onscroll onfocus 26
Example <html><head><script> function displayDate() {document.getElementById("demo").innerHTML=Date();}</script></head><body> My First JavaScript My First JavaScript This is a paragraph. This is a paragraph. Display Date Display Date </body></html> 27
Example <head><script> function FormValidate() alert(' invalid'); event.preventDefault(); return false; }if(document.getElementById("passwd").value!=document.getElementById("cpasswd").value){ alert('passwords dont match'); event.preventDefault(); return false; } return true; }</script></head> 28
Example(contd) <body> My First JavaScript My First JavaScript password: password: Confirm password: Confirm password: </form></body> 29
AJAX Asynchronous requests to server Asynchronous => Works in background Example: Google Instant Search search.junta.iitk.ac.in 30
JQuery Easier to manipulate DOM Less effort More work Example getElementById(“abc”) reduces to $(‘#abc’) AJAX queries $.ajax({url:’your-url’,data:{param1:”dummy”,param2:”dummy”} }) }).success(function(response){.success(function(response){ alert(‘got data’+response) alert(‘got data’+response) }); }); 31
Jquery Selectors #id$(‘#your-id’).class$(‘.your-class’) element$(‘p’)//all p elements :first-child$(‘p:first-child’) :parent$(‘#abc:parent’) [attribute=value]$(‘[href=“abc.php”]’) :even$(‘tr:even’) :odd$(‘tr:odd’) 32
Useful functions of Jquery.css().addclass().animate().append() /.prepend().data().click().setInterval().ajax() 33