AR0051 JQuery. Michelle Bettman Henry Kiksen. Challenge the future

Size: px

Start display at page:

Download "AR0051 JQuery. Michelle Bettman Henry Kiksen. Challenge the future"

Marian Stokes
6 years ago
Views:

1 AR0051 JQuery Michelle Bettman Henry Kiksen 1

2 Topics When to use javascript/jquery Why JQuery Loading JQuery One JQuery program explained Effects/Events Selector Demos 2

3 When to use Javascript/Jquery Do Not Use Use User can disable Improves interaction javascript. Enhance user Not uniform for experience each browser. Create content/styling CSS can do it. on the fly CSS does not do it... 3

4 Why JQuery Javascript is hard Not uniform for each browser Full programming language Uses kind of a template CSS like - selector 4

5 Loading JQuery <!DOCTYPE html> <html> <head> <script src= jquery min.js ></script> <title>sample document</title> </head> <body> </body> </html> Download the JQuery library from Save as Place it in your web directory Link the JQuery library with the statement in the green box. 5

6 Demo Paragraph hide 6

7 The whole script $(document).ready(function(){ $("p").click( function(){ $("p").hide(); } ); }); Check if document is ready Check if a p-element is clicked Then hide all p-elements 7

8 Check if document is ready $(document).ready( function(){ $("p").click( function(){ $("p").hide(); } ); } ); Check if document is ready Check if a p-element is clicked Then hide all p-elements 8

9 Check if a p-element is clicked $(document).ready(function(){ $("p").click( function(){ $("p").hide(); } ); }); Check if document is ready Check if a p-element is clicked (click=event) Then hide all p-elements 9

10 Hide all p-elements $(document).ready(function(){ $("p").click( function(){ $("p").hide(); } ); }); Wait until document is ready Wait until a p-element is clicked Then hide all p-elements (hide=effect) 10

11 Hide all p-elements $(document).ready(function(){ $("p").click( function(){ $("p").hide(); } ); }); Wait until document is ready Wait until a p-element is clicked Then hide all p-elements 11

12 A JQuery statement effect $("p").hide(); Selector point to the elements. Do stuff Event Effect 12

13 JQuery statement - event $(document).ready(function(){ $("p"). click( function(){ $( p ).hide(); } ); }); Selector point to the elements. Do stuff Event: hover, click, dblclick, focus etc. Effect 13

14 JQuery Selector $("p").hide(); Selector CSS-like way to select the right elements 14

15 Grouping stuff together $(document).ready( function(){ $("p").click( function(){ $("p").hide(); /* do stuff*/ /* more stuff */ } ); }); Do stuff Append elements to other elements Apply CSS to elements Add class to elements Hide/show elements Remove Elements Alter behavior 15

16 Demo Paragraph hide 16

17 Resume Wait until document loaded this Effect Event preventdefault $("p").not(this).hide(); 17

18 Tips DRY (Don't Repeat Yourself) Non obtrusive coding Do not mix code with HTML Provide fallback when javascript is unavailable. Always apply ; to the end of a javascript statement. Open code block { before the end of line. 18

19 How to create your own Start by creating a simple HTML-file which: Hold the data in a structured manner (ul a) Minimum on styling Create a mockup of a stage in your program To show the change in html To show the change in style Go back to the simple HTML-file Create the extra HTML in Jquery Apply the extra style in Jquery Collect the data needed. Which items change, and what do they change into Which items are used Apply, Beautify, Generalize (do not repeat yourself) 19

20 More Information

21 Questions??? 21

22 AR0051 exercise 1.5 Michelle Bettman Henry Kiksen 1

23 jquery basics 1. Where to place the code? In the head/end of the body or External (similar to CSS) 2. Comments html:  css: /* Write your comments here*/ JS: Single line comments start with // February 11,

24 jquery basics 1. Selector (what element) 2. Event (when) 3. Effect (what will happen) $( h1 ).click( function() { // what to do when an element has been clicked $(this).addclass( red ); } ); February 11,

25 jquery selectors jquery documentation: February 11,

26 Smooth scrolling February 11,

27 Hoover ideas Remember to explain the function of the effect! February 11,

28 Use of fonts 1 Sending fonts with your files: rule should be added to the stylesheet before any { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, ios */ url('webfont.svg#svgfontname') format('svg'); /* Legacy ios */} Then use it to style elements like this: body { font-family: 'MyWebFont', Fallback, sans-serif;} From: February 11,

29 Use of fonts 2 Using Google fonts: Choose font Add to your webpage: e.g. <link href=' rel='stylesheet' type='text/css'> Then use it to style elements like this: h1 {font-family: 'Open Sans', sans-serif;} February 11,

30 Exercise week 3.5: for whom? in HTML and CSS Results: 18 submissions in InfoBase Generally, lots of images and little text; you need something to bring across message Dropdown list in menubar: tdillonpeynado Category and message: nbrockhoff, jgankema, bbschaafsma This is not yet quarter 4 But very nice project page: wterheijden February 11,

31 Exercise week 3.5: for whom? in HTML and CSS Goal: present one theme in your intended portfolio and experiment with content and style this theme might be: photographic or design skills, or urbanism or 3D models (or cakes) think about the essence of your message make one page for this theme upload your results (deadline: coming Sunday!) February 11,

32 Use of color any.net/blog/infogra February phics/psychologycolor-logo-design/ 11,

33 Exercise week 3.6: use HTML, CSS and jquery Goal: experiment with HTML, CSS and jquery and browse through your work(s) What to do: incorporate all lectures show some content of your own work, which might represent you (or not) find and show reference websites, both likes and dislikes submit the first draft of your Plan of Approach February 11,

34 Plan of Approach Demands on the Plan of Approach Checklist Is the goal formulated? Is this done in depth? Is the target-group described specific enough? Are the wishes/expectations of the target researched and described? Is a selection of own work described as content? Is there a description of the presentation of yourself? Is there a balance between image(s) and text? Is there a mix between uniqueness and functionality? Are there scenarios for navigation and user interface? Has the concept taken fluid en responsive into account? 13

35 Next week, next meeting Workgroups Look at schedule for location! Demand: continue with a running document with your thoughts and ideas to work towards a plan of approach!! February 11,

36 Thank you and good day February 11,

37 AR0051 JQuery Michelle Bettman Henry Kiksen 1

38 How to create your own Start by creating a simple HTML-file which: Hold the data in a structured manner (ul a) Minimum on styling Create a mockup of a stage in your program To show the change in html To show the change in style Go back to the simple HTML-file Create the extra HTML in Jquery Apply the extra style in Jquery Collect the data needed. Which items change, and what do they change into Which items are used Apply, Beautify, Generalize (do not repeat yourself) 2

39 A slideshow The slide show from On the positive side: It works On the negative side: pure javascript/ intrusive code in html Can handle one slideshow per page only Can we make it? less intrusive Handle more slideshows per page 3

40 Initialise Get the stuff from w3schools Assemble all to make one html page Get Jquery lib Annotate code Make a plan 4

41 First step Convert the slideshow to Jquery Remove not necessary stuff Put the code between $(document).ready( ) Create events for next/ prev buttons Remove the on click from next/prev buttons Check if it still sort of works. Dots do not work anymore 5

42 Second step Get the dots to work Need attribute to point to the right slide /Remove the on click from the dots Create event for dots 6

43 Third step Clean up code functions plusslides /currentslide are not used anymore Make the function showslides more Jquery like 7

44 Fourth step Rewrite function calls which change slideindex e.g. change slideindex only in function showslides /Make var slideindex an attribute of slideshow-container. Make showslide work local to slideshowcontainer Init: set first image on. 8

45 Fifth Step Create a second slide show Separate each slideshow Create a function for next/prev (they almost do the same thing) 9

46 Questions??? 10

AR0051: Digital Presentation Portfolio. AR0051 JQuery. Nord-Jan Vermeer Henry Kiksen. Challenge the future

AR0051: Digital Presentation Portfolio. AR0051 JQuery. Nord-Jan Vermeer Henry Kiksen. Challenge the future AR0051 JQuery Nord-Jan Vermeer Henry Kiksen 1 Topics When to use javascript/jquery Why JQuery Loading JQuery One JQuery program explained Effects/Events Selector Demos 2 When to use Javascript/Jquery Do