HTML CSS and JavaScript

HTML CSS and JavaScript Programming Club IIT Kanpur

Work environment • Before you begin coding ,always set up your work environment to your needs • IDE • Notepad++ • Sublime Text

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

HTML Tags HTML Program - <html> </html> Bold - <B> </b> now use <strong> </strong> Italic - <i> </i> now use <em> </em> Head - <head> </head> Body - <body> </body> Paragraph - <p> </p>

How it looks like <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> HTML body

Some More Tags • Image tag <imgsrc=“image-url” alt=“message” width=“12” height=“13”/> • Hyperlink tag <a href=“example-url.com” >Click Me</a>

Some More Tags • Heading tag <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> • div tag <div id=“id1” class=“class2”> Content </div>

Table Tag <table border=“1”> <tr> <th>Name</th><th>Age</th> </tr> <tr> <td>Tom</td> <td>12</td> </tr> <tr> <td>Dick</td> <td>12</td> </tr> </table>

List Tag <ul> <li> Item1 </li> <li> Item2 </li> <li> Item3 </li> </ul>

Forms <form action=“your-url” method=“POST”> Name: <input name=“username” type=“text”> Password: <input name=“passwd” type=“password”> Gender: Male<input name=“gender” value=“m” type=“radio”> Female<input name=“gender” value= “f” type=“radio”> Agree to terms: Yes<input name=“tos” value=“yes” type=“checkbox”> Date:<input type=“date” name=“cur_date”> <input type=“submit” value=“submit”> </form>

Rest of the Tags • Complete Specs : http://www.w3.org/TR/html401/

But looks ugly • CSS(Cascading Style Sheet) • Separation of Style and Structure • Cleaner code • Better designing • Define in <style> or as a separate file

Style tag <style> body { background-color: red; } p { text-align: center; font-size: 14px; } </style>

Selecting HTML elements by id #name { padding:10px; } by class .pets { margin:10px; }

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.

Shorthand • For margins/paddings • margin-right/margin-top etc or • margin: 10 10 10 10; • Top-Right-Bottom-Left

Some more useful attributes • border div{ border:2px solid; border-radius:25px;} • z-index div { z-index:10; }

Some more useful attributes • float div{ float: left;} • transform(rotate) div {transform:rotate(7deg); }

Useful Links • http://css3maker.com • http://css-tricks.com • Frameworks • Bootstrap • Foundation • Skeleton

Bootstrap • CSS framework by Twitter • Sleek, intuitive, and powerful front-end framework for faster and easier web development. • Responsive layouts • Great-looking typography

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 1994

Syntax • similar to C and JAVA • include within <script> tags • var for variables of ALL data types for(vari=1;i<10;i++){ if(i%2==1) alert(“I is odd”); else console.log(“I is even”); }

Syntax • Functions function sum(num1,num2){ return num1+num2; }; • Functions are variables in JavaScript var sum=function(num1,num2){ return num1+num2; };

Syntax • Objects and arrays varobj={name:”Tom”, age:17, friends:[“Dick”,“Harry”]} • getElementById getElementById(“name”).onclick(function() { alert(‘clicked!’); });

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

Events in JavaScript • ondblclick • onmousedown • onmouseup • onmouseover • onmouseout • onkeyup • onkeypress • onload • onresize • onscroll • onfocus

Example <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <h1>My First JavaScript</h1> <p id="demo">This is a paragraph.</p> <button type="button" onclick="displayDate()">Display Date</button> </body> </html>

Example <head> <script> function FormValidate() { if(document.getElementById("email").value.indexOf('@')==-1){ alert('email 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>

Example(contd) <body> <h1>My First JavaScript</h1> <form action="abc.php"> Email: <input type="text" id="email" name="email"> password:<input type="password" id="passwd" name="passwd"> Confirm password:<input type="password" id="cpasswd" name="cpasswd"> <input type="submit" onclick="FormValidate()"> </form> </body>

AJAX • Asynchronous requests to server • Asynchronous => Works in background • Example: • Google Instant Search • search.junta.iitk.ac.in

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){ alert(‘got data’+response) });

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’)

Useful functions of Jquery • .css() • .addclass() • .animate() • .append() / .prepend() • .data() • .click() • .setInterval() • .ajax()

HTML CSS and JavaScript