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

Size: px

Start display at page:

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

Candice Powers
5 years ago
Views:

1 AR0051 JQuery Nord-Jan Vermeer 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 User can disable javascript. Not uniform for each browser. CSS can do it. Use Improves interaction Enhance user experience Create content/styling 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 type="application/x-javascript" src= jquery min.js ></script> <title>sample document</title> </head> <body> </body> </html> Download the Jquery library from 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 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 10

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

12 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 12

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

14 Grouping effects 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 14

15 Demo 2 More with the paragraphs 15

16 Demo 2 $(this).hide(); preventdefault() $( p ).not(this).hide(); 16

17 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 17

18 Demo Change the image 18

19 Demo Change the image Getting an attribute Using the same script multiple times Using a class Generalize Setting your own attribute Getting your own attribute 19

20 Tips 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. 20

21 More Information

22 Questions??? 22

23 AR0051 exercise 3.5 Nord-Jan Vermeer Henry Kiksen 1

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 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,

29 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,

30 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 extension of presentation of self? 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? 8

31 Next week, next meeting Working in the scheduled 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,

32 Thank you and good day February 11,

AR0051 JQuery. Michelle Bettman Henry Kiksen. Challenge the future

AR0051 JQuery. Michelle Bettman Henry Kiksen. Challenge the future AR0051 JQuery Michelle Bettman 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