HTML and JavaScript for ABAPers. Part I – Introduction

JavaScript for ABAPers
Share on Facebook0Share on LinkedIn0Tweet about this on TwitterShare on Google+0
Please Share!!

SAP has set the roadmap that the Front-end User Interface of any SAP Project would be anything but ABAP. So old ABAPer like me, who considered ABAP as their sole bread and butter are now scrambling to upgrade their skills. With no Java or JavaScript knowledge, it is not a bed of roses for us. But those who cannot evolve, eventually get extinct. Darwin’s theory was never so practical earlier. 😀

As a first step to evolve and be in competition, I am trying to learn JavaScript hands on. In this post, we will try to reveal some concept of JavaScript with the help of some questions and answers which would help the beginners.

If you already know the basics of JavaScript, please do not waste your precious 2 minutes by going further down in this article.

Beginners, let us start.

JavaScript (JS) is written in HTML file. Below is the simple HTML skeleton file. Open a notepad, write the below code and save it as .html.

I have saved it as JS4ABAPers.html

JavaScript for ABAPers

1. How to Test the JS code?

Ans Right click on the HTML file and open it in Chrome or Internet Explorer. I prefer Chrome.

JavaScript for ABAPers

Since you have not written any code, your JS output is blank.

JavaScript Introduction

But, did you notice the title? JavaScript for ABAPer is coming from the title code you have specified in the header section of your HTML file.

2. How to declare a Variable in JS?

Ans:

Keyword var is used for declaring variables in JavaScript. But you can directly do the inline declaration like v_number and v_string without specifying the keyword var explicitly.

Keyword var is not mandatory to declare the variable.

Variable v_dynamic is a dynamic variable which would take the type at runtime when something is assigned to it.

Variable v_number is a numeric variable.

Varialbe v_string is a character variable.

If you copy and paste the above code, you would get the below output. Try hands on.

JavaScript Introduction for ABAPers

 

TIPS:

This declaration proofs that JavaScript uses Weak or Dynamic Type whereas SAP ABAP uses Strong or Static Type (except Field Symbol).

The advantage of JS weak typing is that it is Flexible and allows the highly dynamic style of programming. The disadvantage of JS weak typing is that like field symbols, data type error can only be trapped at runtime.

ABAP, C, JAVA etc which are compiled language tend to use static/strong type. While scripting interpreted language like JS, Ruby, Python tend to use weak typing.

3. How to know the data type of variable?

Ans: Keyword typeof

What do you expect as output for the typeof v_number? Number or String?

Did you say “Number”? Check the output.

abaper and javascript

var v_number = “24”;

Since you have enclosed 24 within quotes, it becomes a string. Just remove quotes and declare it as below. The output would be a number.

var v_number = 24;

TIPS:

Keyword typeof helps to get the TYPE of the variable.

typeof <variable name>

4. What would be the TYPE of the below variable?

Ans: It is Boolean. True/False is Boolean right?

5. How do we write the output to the page in JS instead of popup?

Ans: document.write() is the syntax which helps to write the output.

In the above codes, if we replace alert by document.write(), then the output would be written on the page instead of the pop-up alert message.

document.write()

6. How to escape characters in JS?

Say we want to print an output as “SAPYard” with double quotes.

This will give syntax error at runtime. Do F12 to Inspect/Debug the code

escape character in javascript

If you do not know how to Debug UI, check this article. Basic of UI Debugging.

We need to let the system know that we want “ and it is not part of any syntax. Escape characters help us here.

TIPS:

The first ‘\’ tells the system that the next character which is “ needs to be kept as it is. Similarly, the second ‘\’ after the character ‘d’ tells the system to escape the following character after ‘\’ i.e. to keep “ as is it.

Check the output.

Similarly, if you want to print

My friend’s dog was born in ‘09/23/2017’

Using single quote and escape character ‘\’.

Or

Using double quotes at the beginning and end.

7. How to print the length of a string?

Ans:

length in abap

8. How to put a new line feed? How to write to next line?

Ans: There are many ways. But the simplest one is to use <br/>.

Output is SAPYard7

break statement in javascript

But our requirement is to print: SAPYard and 7 in two different lines.

SAPYard

7

So the easiest way is to put this (‘<br \>’) one line of code in between.

Out is as expected.

9. What is the difference between property and a method?

Ans: Property is just a piece of information. It’s a value. It tells something about the object.

While method takes input, do computation and give an output.

In the above code v_alpha.substring(3, 5) is a method. It takes input as 3, 5 and gives output as the 4th and 5th character of the string in the variable v_alpha.

Example of a property is already seen.

v_alpha.length; gives the length of the string in variable v_alpha. It does not take any input.

The output of a method and a property.

10. How to define Array in JavaScript?

Ans: There are multiple ways. Please check 3 ways which I have learned to define Array.

By the way, for ABAPers, Array is an Internal Table. 🙂

Method 1 to create Array in JS with keyword Array.

Output would be:

arrays in javascript

Method 2 to create Array in JS. Declaration and Populations at the same time.

Trust me, the output would be the same as above.

Method 3 to create Array in JS. Keyword Array not used. Square  Bracket ‘[ ]’ used.

Output would be same as above i.e. Orissa.

TIPS: Unlike ABAP, the sy-tabix of the array in JavaScript starts with ‘0’ (zero).

These are few syntaxes and tips I learned recently. Hopefully, you found it interesting. In the next part, we would continue our learning of JavaScript. We would look into Flow Control Statements, Loops in JS, Self closing tags, Hyperlink, Please stay tuned.

Would you like to share any JavaScript TIPS?

Please write your quick comment below and leave your feedback and share your learning experience.

Please browse our page for FioriSAPUI5ODataHANA-ABAPOOPsWorkflowWeb Dynpro etc tutorials.

Please Subscribe, Like & Share our Page

Share on Facebook0Share on LinkedIn0Tweet about this on TwitterShare on Google+0
Please Share!!

About the Author

SAP Yard
SAP Yard

SAPYard is one stop page for all Technical Folks in SAP. You would find un-conventional explanations, tutorials, and tricks.

Please like our Facebook Page and also join our LinkedIn Group.

3 Comments on "HTML and JavaScript for ABAPers. Part I – Introduction"

  1. Thank you. Nice primer to get going with javascript

  2. Nice Article for ABAPers to get the flavor of JS. Eagerly waiting for second article on this topic. Good work!

  3. Informative for the beginner. Need more tips.

Leave a Reply to Bhavesh K Ratnam Cancel reply

Your email address will not be published.


*