Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/03"

From Publication Station
(Replaced content with " {{:Courses/Design & Technique-Essential Web Design/Q2/02}} {{:jQuery}}")
 
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
=jQuery=


{{:Courses/Design & Technique-Essential Web Design/Q2/02}}


==What is jQuery==
{{:jQuery}}
jQuery is a JavaScript library makes programming in JS a lot simpler and a lot less messy.
 
There are many JavaScript libraries, that make certain aspects of programming in JS easier - e.g. working with SVG, maps, making visualizations, etc, etc.
 
jQuery is on of the most popular and general purpose JavaScript libraries
 
http://jquery.com/
==JS, made easy==
Like with JS you can use jQuery to:
* change HTML content
* change element attributes
* change an element style
* retrieve the window size
* listen to an even (e.g. a mouse click)
* make a timer
* validate data
But jquery makes your life to much easier, let's see how!
 
==Basic: loading jQuery library==
'''jQuery is simply an external JavaScript file that you load on to your HTML page.'''
 
There are different ways to load it, inside the HTML <head></head> with::
* '''Download the jQuery file''' (latest version & compressed, production)from http://jquery.com/download/ and loading it:
<source lang="html4strict">
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
</source>
* Load it '''from online resource''' (CDN)
<source lang="html4strict">
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
</source>
 
==Basic: loading code==
Once you loaded the jQuery library (file), you need to '''load your jQuery code'''.
 
the most secure way, that ensures the code is run only after all the contents from the page are loaded is:
 
<source lang="JavaScript" >
<script>
$(document).ready(
    function(){
      //your jQuery/JS code goes here
    })
</script>
</source>
 
 
==Basic: jQuery syntax - selectors==
In order to change or retrieve HTML elements' content, attributes, style, '''we need to select those element(s) precisely'''. jQuery is master in those selection.
 
=== simple selectors ===
* '''element selector''': <code>$('h1')</code> will select '''all the heading1 elements'''.
* '''id selector''': <code>$('#large')</code> will select '''the element with id large'''.
* '''class selector''': <code>$('.small')</code> will select '''all the elements with class small'''.
 
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>
<body>
<h1>I am a h1</h1>
<p id="large">I am p#large and will become large</p>
<p class="rotate">I am p.rotate and will tilt</p>
<h2 class="rotate">I am a h2.rotate and even I will shift position</h2>
 
<script>
$(document).ready(
    function(){
    alert("be alert for the changes in the elements' text and CSS");
    $('h1').text('Yes, your a h1');
    $('#large').css('font-size', '50pt');
    $('.rotate').css('transform', 'skew(0deg, 5deg)'); 
    })
</script>
</body>
</html>
</source>
 
=== advanced selectors ===
* Descendent selectors: <code>$('ul a')</code>  will select '''all a tags inside the ul tags'''.
* Child selectors: <code>$('ul li')</code>  will select '''all li tags that are direct children from the ul tags'''.
* Attribute selectors: <code>$('img[src="img.jpg"]')</code> will select '''all imgs that have as src the image img.jpg'''.
 
==Jquery classes??==
 
* change HTML content - .text() ??
* change element attributes - .attr()
* change an element style - .css()
* retrieve the window size - window.attr('width'
* listen to an even (e.g. a mouse click) $('body').click()

Latest revision as of 09:45, 5 May 2018


Javascript (JS)

Resources

what is JS?

JS is a simple programming language that runs inside webpages when the pages are loaded in the users' browser.

In the complex organism that can be a web-page, you have:

  • HTML - content & structure
  • CSS - look
  • Javascript - (artificial) intelligence.

You can use JS to

  • change HTML content
  • change element attributes
  • change an element style
  • retrieve the window size
  • make a timer
  • validate data

JS in a HTML page

Javascript appears inside the html page inside the <script> tag 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>starting javascript-ing</h1>
    <p id='greetings' >within the script tag</p>

    <script>
   
    alert('Hello Javascript!');
                       
    </script>

  </body>
</html>

JS in a separate file

The JS is imported from another file.

HTML file: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <script src="hello.js"></script>

  </head>
  <body>
    <h1>starting javascript-ing</h1>
    <p>within the script tag</p>
  </body>
</html>

JavaScript file: hello.js 

alert("hello world! Greetings from javascript");

making statements

JS statements are like phrases, that do very specific tasks.

Each statement has to be terminated with ";"

Like the above alert('Welcome to this page');

the browser console

JS-console.png

Essential to prototype, and debug your JS code.




What is jQuery?

jQuery is a library for JavaScript, which is a programming language used to make websites interactive. It's like a set of handy tools that makes it easier for developers to work with JavaScript, allowing them to do things like adding animations and making web pages respond to user actions without writing as much code.

Getting started

1. Prepare your HTML file

Open Visual Studio Code and create a new file. Save the file as index.html, inside of a folder that will contain all the files for this website and noting else. In this file, enter the ! symbol and chose the first option that shows up underneath. This should create a default html file, ready to work with.

2. Add a JavaScript page

Open en new file and save it in the same folder as your html file, name it script.js. In de head of your html document, you should add a link to this JS file:

<script src="script.js"></script>

3. Add jQuery

Before you can use jQuery code in your JavaScript file, you need to load the jQuery library file. the easiest way to do that is to copy the following line of code into the head of your document, above the link to your script file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

4. Test if it works

Enter the code below in your script.js file to check whether everything works correctly:

$(function() {

alert('Hello world!');

});

This should wait for the page to be loaded and then show a message saying Hello world!

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q2/03&oldid=7046’