1 / 19

CSDM 2N15 CHRIS K KIM WEEK 3 CONTINUING STUDIES OCAD UNIVERSITY

Advanced Web Art and Design, CSS and JavaScript Frameworks. CSDM 2N15 CHRIS K KIM WEEK 3 CONTINUING STUDIES OCAD UNIVERSITY. HTML page is simply a text file with special declarations and tags CSS is a document that describes the tags placed in the HTML

ami
Download Presentation

CSDM 2N15 CHRIS K KIM WEEK 3 CONTINUING STUDIES OCAD UNIVERSITY

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Advanced Web Art and Design, CSS and JavaScript Frameworks CSDM 2N15 CHRIS K KIM WEEK 3 CONTINUING STUDIES OCAD UNIVERSITY

  2. HTML page is simply a text file with special declarations and tags • CSS is a document that describes the tags placed in the HTML • JS is a programming language for the web, designed to manipulate static web pages and enhance UI • jQuery facilitates Javascript development with easy-to-use commands and logics REVIEW

  3. Basic trinity of HTML-CSS-JS • Overview of CSS3 • Sample of different CSS3 properties • Advantages and drawbacks REVIEW

  4. jQuery concept review • “Functions” and “triggers” are the main components of any jQuery code • No function can run without a trigger • $(document).ready() is a global function – “when the document is ready” • Meaning that all functions in this trigger will run immediately REVIEW

  5. AJAX: Asynchronous Javascript and XML • Not a programming language, but a way of using one • Technique for creating fast dynamic pages • Change parts of the website by loading external content REVIEW

  6. Programming language for the Web – one of integral components in Web development • Other programming languages: C++, Visual Basic, Perl, PHP • Little to no relationship to Java • Created by Netscape (precursor to Mozilla), originally called LiveScript • Heavy on processing power at the time – virtually unusable • Not adopted by Microsoft until Internet Explorer 3.0, called Jscript • Finally standardized under the name ECMAscript • Also the foundation for ActionScript, language for Adobe Flash • Originally avoided by developers • Open source in nature / “amateur language” • With the advent of AJAX, it has become the dominant script language • Movement to bring JavaScript to other platforms • With the rise of Google Chrome and its V8 engine, other companies are striving to optimize for JS • https://www.youtube.com/watch?v=nCgQDjiotG0 BACK TO JAVASCRIPT

  7. Easy to learn • Source of ridicule from other programmers, due to its name and fluid structure • Success of AJAX – loading elements after the initial compiling • Not as strict as other languages • Gateway to different programming languages • Gets the basic concepts right • Introduction to other programming languages • “The World’s Most Misunderstood Programming Language” • http://www.crockford.com/javascript/javascript.html • Most popular programming language in the world • http://redmonk.com/sogrady/2012/09/12/language-rankings-9-12/ Why learn JavaScript?

  8. No design elements, simply dealing with input, output, and underlying logics • Need to understand the logic, then manipulate HTML elements via jQuery • Going to use regular JavaScript for lessons, and will output the results using jQuery Our procedure for JS EXERCISE

  9. Semicolon separates JS statements • JS is case-sensitive • JS ignores extra spaces • One can comment by using “//” or using “/*” and “*/” – for references or disabling JS statements JS BASIC STATEMENTS

  10. “Containers” for storing information • Text, numbers, etc. • var x = “hello”; • var y = x+” world”; • Dynamic type – meaning that string can turn into number or vice versa if the need arises • Boolean: true or false • Arrays: Two dimensional list of items • Objects: One object, many properties • Undefined and null: no value or not defined VARIABLES

  11. Block of code that is executed based on trigger • Basic syntax, no argument, one or more arguments, return value • Local and global variable FUNCTIONS

  12. Used for adding/subtracting numbers, or adding strings • Addition, subtraction, multiplication, division, modulus, increment, decrement, etc. • Comparing variables in conditional statements • Equal to, is not equal, greater than, less than, etc. OPERATORS AND COMPARISONS

  13. Different actions based on different situations • IF, ELSE, ELSE IF, SWITCH CONDITIONALS

  14. FOR: between number X and Y • (statement 1, 2, 3: var i=0; i<5; i++) • FOR/IN • for (x in person) { txt=txt + person[x]; } • WHILE: run if the condition is true • jQuery loop: $.each(array, function(i, v) { }) • Use “break” to get out of the loop without finishing it • Use “continue” to skip to the next iteration LOOP STATEMENTS

  15. Catching errors by “trying” and “catching” • try { catch(err) { } }; TRY AND CATCH

  16. jQuery is simply a library for JavaScript • You can (or must) mix jQuery statements with JavaScript • Especially for conditional and loops MIXING JS WITH JQUERY

  17. Codeacademy • jsFiddle • Google Inspect Element • W3Schools TOOLS AND RESOURCES

  18. Making a variable based on jQuery object • Inserting a variable into a jQuery object • Adding two variables based on jQuery objects • Creating a function and attaching it to various jQuery object/triggers • Creating an array based on jQuery objects • Inserting jQuery functions in conditionals • Inserting jQuery functions in loops sTEP-BY-STEPEXERCISE

  19. Advanced Web Art and Design, CSS and JavaScript Frameworks CSDM 2N15 CHRIS K KIM WEEK 3 CONTINUING STUDIES OCAD UNIVERSITY

More Related