Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

JavaScript Overview for Advanced Learners

In this article we will discuss about advanced things about JavaScript programming as jQuery and Ajax.

As I wrote two articles about basics of JavaScript, and I named them “JavaScript Overview for beginner Learners and JavaScript Overview for Intermediate learners”. Now we will discuss the full advanced things of JavaScript in this article. And we try to create new things by which you will able to learn new things for your websites development.

Points will be note in this Article:

  1. What is JQuery?
  2. Why we use JQuery?
  3. How to use JQuery?
  4. What is Ajax?
  5. Why we use Ajax?
  6. How to use Ajax?
  7. How we can use JQuery, Ajax and PHP in our web pages?

1. What is JQuery?

It is not a programming Language, we use it as a library. It is written in JavaScript, by which we can use animations, event handlings, and interaction of Ajax for fast web development. If you want to use the JQuery library on your websites, so you should know the programming in JavaScript, CSS, and HTML. By which you can use the JQuery easily and you will also get its advantages in a proper way.

2. Why we use JQuery?

For good UI (User Interaction) the developers should use JQuery. Because it is small and written in a well manner by using JavaScript. It will increase the productivity and also you can achieve the very critical UI product functions. There are many other uses of JQuery for which we should use it.

3. How to use JQuery?

We use <script></script> tag in HTML to link or create a relation between HTML webpage and JavaScript webpage.

Listing 1: linking JQuery Library with HTML

  <scripttype="text/javascript"src="jquery-1.10.2.min.js"></script>
  

In the listing 1, there is srcwhich is linking the JQuery with HTML, the latest version of JQuery is now being connected with HTML file. You can download them from the official website of JQuery which is http://jquery.com/download/ browse it and get all type of libraries from it.

4. What is Ajax?

Ajax is used to communicate with server by sending requests using Hyper Text Transfer Protocol (HTTP). It is used as asynchronously with JavaScript and XML during the website development. It is little bit confusing during using of the Ajax, but once it used it becomes so simple to use on websites.

5. Why use Ajax?

There comes many occasions during website development, where we need to use Ajax. For example we want to use one div for just chatting and other div are for just other functionalities. So we use the Ajax on the selected div. As you can see the Google maps on the webpages. Which are affected just on a selected area of the webpages.

6. How to use Ajax?

There are two things are most important when we feel the need to use Ajax. We should create XML and JavaScript file. From which we will use HTTP to request the server. We use <script> and </script> tags to link the JavaScript files with the HTML files. And then we use XML file to connect it where we want to link it on the webpage. For example I created a XML file and I want to link it when my webpages is loaded. So what I will do, I will just call it in the <body> tag of the HTML file.

7. How we can use Ajax, JQuery and XML with PHP and HTML webpages?

For these things now will use to create some webpages, from which you will learn how we can use them on our website webpages.

Listing 2: Navigation Bar

  <html>
  <head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $('#navigation a, #fixedbar a').on('click', function(e) {
  e.preventDefault();
    });
   
    $(window).on('scroll',function() {
  varscrolltop = $(this).scrollTop();
   
  if(scrolltop>= 215) {
        $('#fixedbar').fadeIn(250);
      }
   
  else if(scrolltop<= 210) {
        $('#fixedbar').fadeOut(250);
      }
    });
  });
  </script>
  </head>
   
  <body>
  <div id="nav">
  <nav id="navigation">
  <ul>
  <li><a href="default.php">HOME</a></li>
  <li><a href="about-us.php">ABOUT US</a></li>
  <li><a href="services.php">SERVICES</a></li>
  <li><a href="projects.php">PROJECTS</a></li>
  <li><a href="resources.php">RESOURCES</a></li>
  <li><a href="galery.php">GALLERY</a></li>
  <li><a href="career.php">CAREER</a></li>
  <li><a href="contact.php">CONTACT US</a></li>
  </ul>
  </nav>
  </div>
  

Listing 3: CSS File for Navigation Bar

   
  /* slideshow 1 */         
   
  .ss1_wrapper { position:relative; width:900px; height:400px; margin:0 0 20px 0; }
  .ss1_wrapper .slideshow { position:relative; width:900px; height:400px; }
              
              .ss1_wrapper .slideshow_item{ width:900px; height:400px; }
              .ss1_wrapper .slideshow_item .data { display:none; }           
              
              .ss1_wrapper a.slideshow_prev { position:absolute; left:30px; 
                bottom:180px; z-index:10; width:40px; height:46px; outline:none; 
                background:url(trans-black-70.png); }
                          .ss1_wrapper a.slideshow_prev:hover { background:#000; }
                          .ss1_wrapper a.slideshow_prev span { display:block; width:40px;
                           height:46px; background:url(arrows.png) 
                           no-repeat -55px 50%; text-indent:-9999px; }
                          
              .ss1_wrapper a.slideshow_next { position:absolute; left:70px; 
                bottom:180px; z-index:10; width:40px; height:46px; outline:none; 
                background:url(trans-black-70.png);}
                          .ss1_wrapper a.slideshow_next:hover { background:#000; }
                          .ss1_wrapper a.slideshow_next span { display:block; 
                             width:40px; height:46px; background:url(arrows.png)  
                             no-repeat -5px 50%; text-indent:-9999px; }
              
              .ss1_wrapper .slideshow_paging{ position:absolute; 
                bottom:10px; right:545px; z-index:11; font-size:12px; }
                          .ss1_wrapper .slideshow_paging a { display:block; float:left; 
                            margin:0 0 0 2px; padding:4px 7px; color:#ccc; }
                                     .ss1_wrapper .slideshow_paging a:hover { color:#fff }
                                     .ss1_wrapper .slideshow_paginga.activeSlide{ 
                                        background:#eee; color:#222 }
              
              .ss1_wrapper .slideshow_box { position:absolute; left:30px; 
                 bottom:0; background:url(trans-black-70.png); width:340px; 
                  height:180px; z-index:10; }
                          .ss1_wrapper .slideshow_box .data { padding:15px; color:#ccc;  }
                          .ss1_wrapper .slideshow_box .data h4 { 
                            color:#fff; font:bold 18px arial, sans-serif; padding:0; 
                            margin:0 0 10px 0; }
                          .ss1_wrapper .slideshow_box .data p { padding:0; 
                           margin:0; line-height:140%;}
                          .ss1_wrapper .slideshow_box .data a { color:#fff; }  
  

Description of Listing 2:Don’t worry if I used website link which is related to Google apps. You can also link the JQuery plugins or library from the Microsoft and Google. For these you should use that method which I used it in listing 2. Same like this we can also create simple slideshows let see the Listing 3 carefully.

Listing 4: SlideShow

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>SlideShow</title>
  <link href="css/demo.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="css/slideshows.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
  </script>
  <script src="js/jquery.cycle.all.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script>
  $(function() {
      $('#slideshow_1').cycle({
  fx: 'scrollHorz',                       
                          easing: 'easeInOutCirc',
                          speed:  700, 
                          timeout: 5000, 
                          pager: '.ss1_wrapper .slideshow_paging', 
  prev: '.ss1_wrapper .slideshow_prev',
  next: '.ss1_wrapper .slideshow_next',
                          before: function(currSlideElement, nextSlideElement) {
                                     var data = $('.data', $(nextSlideElement)).html();
                                     $('.ss1_wrapper .slideshow_box .data').fadeOut
                                       (300, function(){
                                                 $('.ss1_wrapper .slideshow_box .data').remove();
                                                 $('<div class="data">'
                                                 +data+'</div>').hide().appendTo
                                                  ('.ss1_wrapper .slideshow_box').fadeIn(600);
                                     });
                          }
      });
              $('.ss1_wrapper').mouseenter(function(){
                          $('#slideshow_1').cycle('pause');
      }).mouseleave(function(){
                          $('#slideshow_1').cycle('resume');
      });
              $('a[href="#"]').click(function(event){ 
                          event.preventDefault(); 
              });
  });
  </script>
  </head>
  <body>
  <div id="wrapper">
  <section id="main">
              <div id="content">
                          <h1>Sample SlideShows for Al-Shahbaz Traders 
                             created By Sahara</h1>
                          <h2>Slideshow #1</h2>
                          <div class="ss1_wrapper">
                                     <a href="#" class="slideshow_prev">
                                     <span>Previous</span></a>
                                     <a href="#"
                                    class="slideshow_next">
                                     <span>Next</span></a>
                                     <div class="slideshow_paging"></div>
                                     <div class="slideshow_box">
                                                 <div class="data"></div>
                                     </div>
                                      <div id="slideshow_1" class="slideshow">
                                                 <div class="slideshow_item">
                                                             <div class="image"
                                                             ><a href="#"><
                                                               img src="image/1.jpg" alt="photo 2" 
                                                               width="900" height="400" 
                                                                /></a></div>
                                                             <div class="data">
                                                                         <h4>
                                                                         <a href="#">Description of 
                                                                         Picture</a></h4>
                                                                         <p>Al-Shahbaz Traders and
                                                                         contractors works</p>
                                                             </div>
                                                 </div>                         
                                                 <div class="slideshow_item">
                                                             <div class="image"><a href="#"><img src="image/2.jpg" alt="photo 3" width="900" height="400" /></a></div>
                                                             <div class="data">
                                                                         <h4><a href="#">Description of Picture</a></h4>
                                                                         <p>Al-Shahbaz Traders and contractors works</p>
                                                             </div>
                                                 </div>
                                                 <div class="slideshow_item">
                                                             <div class="image"><a href="#"><img src="image/3.jpg" alt="photo 1" width="900" height="400" /></a></div>
                                                             <div class="data">
                                                                         <h4><a href="#">Description of Picture</a></h4>
                                                                         <p>Al-Shahbaz Traders and contractors works</p>
                                                             </div>
                                                 </div>
                                                 <div class="slideshow_item">
                                                             <div class="image"><a href="#"><img src="image/4.jpg" alt="photo 4" width="900" height="400" /></a></div>
                                                             <div class="data">
                                                                         <h4><a href="#">Description of Picture</a></h4>
                                                                         <p>Al-Shahbaz Traders and contractors works</p>
                                                             </div>
                                                 </div>
                                     </div>
                          </div>
              </div>
  </section>
  </div>
  </body>
  </html>
  

Conclusion

In this article we learnt about the JavaScript by using the advanced features of the JavaScript. There are nice tools which are ready to use as we used JQuery. We can use this library to create our website pages more attractive and useful. I hope you learnt a lot from this tutorial as a beginner of JavaScript. For any query comment me.



Studing Computer Science and have knowledge in C/C++, Java, VB.net, C#, Assembly Programming, MFC, HTML, XML, JAVASCRIPT, AJAX, JQUERY, PHP, MYSQL, ORACLE

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login