Ameya's Blog Bridging the gap between latest web technologies and SAP

Writing your first code in jQuery

In the previous post of jQuery for beginners, we saw what do you mean by jQuery? what are its build types? what version you should download? and what $ symbol stands for?

In this post, we are moving a step ahead to see how should we include jQuery in our page and we’ll go on to write our first “Hello World” jQuery snippet.

To brief, we are going to learn two important points about jQuery and those are:

  • How to include jQuery with reference to a script.js file and with reference to CDN (Content Delivery Network)
  • Getting feedback from browser about page readiness

Second point i.e. getting feedback from browser about page readiness is the major distinction between jQuery and a Javascript. Well, jQuery is also a type of Javascript but this feedback mechanism is something which makes it different. By this feedback we make sure if page is ready to render the script code. Major concern with Javascript is that your page won’t execute until all images and scripts are loaded. However, in case of jQuery, we just make sure of basic <head> or a <body> elements are ready or not. If they are parsed by DOM, we will directly call jQuery function. This is what makes jQuery cool and fun to work with. So lets see how to do this.

 You can include jQuery almost on the similar lines of that of Javascript. This is how you include Javascript:

<script type=”text/javascript language=”JavsScript”></script>

And this is how jQuery is included with reference to CDN

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/<version>/jquery.min.js”></script>

Note: Use CDN approach only if your application can communicate with CDN over the Internet

If your application is a desktop version, this this is how you should include it in your code

<script type=’text/javascript’ src=’script.js’></script>

By now, we have included jQuery in our code. Let’s now see how do we get feedback from browser about page readiness.

$(document). ready is the function which checks if document i.e. page is ready to execute script code.

let’s now see how to write our first jQuery snippet?

<html>
<head>
<body>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js”></script>
<script>

$(document).ready(function() {
alert(‘Hello World’);
});

 </script>

</body>
</head>
</html>

Copy and paste this snippet in note page and execute.

How it works?

After we make sure that document is ready, we can call any function for execution. It could be selecting certain elements and assign CSS attributes to them. Or as in our case, we can simply call an alert function to say “Hello World”.

After completely going through this post, you should be able to

  • Understand structure of jQuery and how to include it
  • How to get feedback from browser and make sure the document is ready?
  • Write your first jQuery snippet
               

You Don't Need a Bribe To Join

Plain and Simple. Do you enjoy what you just read? Did you get help to solve a work issue or learn something new? Cool, then get more in your inbox whenever we publish a new post

SAP Netweaver consultant, writer, blogger, budding SEO analyst, learner & fun loving being.

(3) Comments

    • Hello Ram,
      First of all, sorry for the late reply. What do you mean by themes using jQuery. It’s a scripting language and you can certainly add some cool effects in your existing theme using jQuery. However, I am not aware if you can create entire theme in jQuery.
      Answer to your second question is, there are no predefined set of iViews using jQuery. However, some of the most obvious would be TLN, Detail Navagation. May be you can also include some jQuery functionality in login page. In anycase, TLN would be the obvious place where you can implement jQuery menus.

      I hope this answers your doubts. Thanks for stopping by.

      Regards,
      Ameya

  1. Thanks Ameya.

    Can you please post a simple sample using jQuery in SAP Portal as mentioned by either in TLN, LogonPage, or some simple footer similar to the latest posting you have made in this topic?

    I am bit new to SAP Portal. Hence a small example will be of great help.

    I am amazed by the effects and capabilities of jQuery. And am just wondering how it can be leveraged in SAP Portals to make it more beautiful. Your help will speed-up my learning.

    Thanks for your help.

    Regards,
    Ram.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

x
Never Miss an Update!
Stay Updated with latest posts on

Bridging the gap between latest web technologies and SAP