Presentation is loading. Please wait.

Presentation is loading. Please wait.

Programming Club IIT Kanpur. Work environment Before you begin coding,always set up your work environment to your needs IDE Notepad++ Sublime Text 2.

Similar presentations


Presentation on theme: "Programming Club IIT Kanpur. Work environment Before you begin coding,always set up your work environment to your needs IDE Notepad++ Sublime Text 2."— Presentation transcript:

1 Programming Club IIT Kanpur

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

3 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

4 HTML Tags HTML Program - Bold - now use Italic - now use Head - Body - Paragraph - 4

5 How it looks like My First HTML Page My First HTML Page This is some text... This is some text... 5 HTML body

6 Some More Tags Image tag “message” Hyperlink tag Click Me Click Me 6

7 Some More Tags Heading tag Heading 1 Heading 1 Sub heading 2 Sub heading 2 Sub heading 3 Sub heading 3 div tag Content

7

8 Table Tag NameAge Tom 12 Tom 12 Dick 12 Dick 12 8

9 List Tag

  • Item1
  • Item2
  • Item3
9

10 Name: Name: Password: Password: Gender: Male Gender: Male Female Female Agree to terms: Yes Agree to terms: Yes Date: Date: Forms 10

11 Rest of the Tags Complete Specs : 11

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

13 Style tag 13

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

15 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

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

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

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

19 Useful Links Frameworks Bootstrap Foundation Skeleton 19

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

21 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

22 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

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

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

25 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

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

27 Example My First JavaScript My First JavaScript This is a paragraph. This is a paragraph. Display Date Display Date 27

28 Example 28

29 Example(contd) My First JavaScript My First JavaScript password: password: Confirm password: Confirm password: 29

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

31 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

32 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

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


Download ppt "Programming Club IIT Kanpur. Work environment Before you begin coding,always set up your work environment to your needs IDE Notepad++ Sublime Text 2."

Similar presentations


Ads by Google