JavaScript & jQuery

JavaScript Tutorial

JavaScript is a very useful add-on that you can implement into your code. When you are developing HTML tags you are creating objects. JavaScript allows you to manipulate those objects.

How to implement JavaScript into your code:

You can use <script> and </script> tags to include JavaScript Code directly into an HTML file.

Your HTML documents should look like this:


                    <html>
                    <head>
                      <script type="text/javascript">
                      // JavaScript statements go here
                      function processOrder() {
                      // More JavaScript statements go here
                      }
                      </script>
                    </head>
                    <body>
                    </body>
                    </html>
                  

Or you can use <script> and </script> tags to include an external JavaScript file. A file that will contain your JavaScript code with an .js extension.


                    <html>
                    <head>
                      <body>
                      <script type="text/javascript" src="test.js">
                      </script>
                    </head>
                    <body>
                      <a href="javascript:processOrder();">Click Here To Order</a>
                      ...
                    </body>
                    </html>

                

Here is a simple example of how JavaScript Works:

  1. Code <script> and </script> tag inside the <body> and </body> section of your HTML document.
  2. In between your script tag ( <script> Your JavaScript Here ) </script> insert this line of code.

                document.write("<p>My First JavaScript</p>");

                
  1. The document.write function is triggering the JavaScript code to run to display the html code that is embedded in the parenthesis.

Your code should look like this for this example:

                  <!DOCTYPE html>
                  <html>
	              <head>
	                <title>My First Web Page</title>
	              </head>
                  <body>
                    <h1>My First Web Page</h1>
                    <script>
                    document.write("<p>My First JavaScript</p>");
                    </script>
                  </body>
                  </html>
                

jQuery Tutorial

jQuery is a coding language that is derived from JavaScript. JavaScript allows you to manipulate objects created in HTML. jQuery is said to be a shortcut or plugin which allows you to use less code to manipulate the objects you have created in HTML similarly to JavaScript. jQuery is a powerful tool that will ease your coding, will be a very useful tool to create dynamic and interactive elements to your web designs.

In addition developers have also synthesized new ways to use jQuery with other languages like JSP, ASP, PHP and CGI.

How to implement jQuery into your code:

  1. The first step is to download the jQuery Library. Go to jquery.com and download the latest version.
  2. Add the downloaded jQuery Files into the same files as your HTML and CSS files.
  3. In order for jQuery to work you must include the library. In this case the jQuery library is called “jquery.js”. Place, this code in the head section. Now that you have called the jquery library you are ready to write your first jQuery code.
                  <head>
                    <script type="text/javascript" href="jquery.js"></script>
                  </head>
                
  1. The next step is the code <script> and </script> in between the script tag you will write you jQuery functions and Variables.
  2. Now add the function $(document).ready(function(){ in-between your script tag. This will start your jQuery Function.

Your code should look like this:


                  <script>
                  $(document).ready(function(){
					//code goes here
	                });
                  </script>

                
  1. Now you are able to add some functionality to your code. Now add this line of code.
	            <script>
                  $("p").click(function(){
                   $(this).hide();
                 });
				</script>
                

What you are doing here is saying once the user clicks on a <p> tag it will hide that tag <p>

This is how your completed code should look:

                  <!DOCTYPE html>
                  <html>
                  <head>
                  <script type="text/javascript" href="jquery.js"></script>
                  <script>
                  $(document).ready(function(){
                   $("p").click(function(){
                      $(this).hide();
                   });
                  });
                  </script>
                  </head>
                  <body>
                  <p>If you click on me, I will disappear.</p>
                  <p>Click me away!</p>
                  <p>Click me too!</p>
                  </body>
                  </html>