What is the structure of javascript?

Question

Nội dung chính Show

JavaScript is written in Plain Text
JavaScript is an Interpreted Language
JS is Case Sensitive
JavaScript Runs on Statements
JavaScript’s Forgiving Nature is a Weakness
Whitespace is Semi Insensitive in JavaScript
Comments in JavaScript
Where To Place JavaScript
What is the structure of JavaScript program?
Is JavaScript a structural language?
What is the structure of a code?
How many data structures are there in JavaScript?

We’re moving into the wild and wonderful world of JavaScript programming. Before we start trying to be a skilled Ninja, we need to first spend some time in the dojo to hone our techniques. In other words, we won’t try to run before we first learn to walk. In this episode, we’ll take a look at the structure of the JavaScript language. Let’s jump right in!

JavaScript is written in Plain Text

Much like you understand already from writing HTML and CSS, JavaScript is simply written in plain text. This would be perfectly valid JavaScript in an HTML page:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Code Structure</title>
</head>

<body>
<h2>This is a web page.</h2>
<p>This webpage is about as simple as it gets.  It will make it easy for you to understand the JavaScript Embedded within it.</p>
JavaScript is:
<up>
  <li>deep</li>
  <li>dark</li>
  <li>delicious</li>
</up>
<script>
alert('I am the JavaScript Victim');
</script>
</body>
</html>

JavaScript is an Interpreted Language

That’s right folks, it’s interpreted, not compiled. This does not make it any less of a programming language much to the chagrin of some of the embedded machine code engineers of the world! Unlike a language like C which must make use of an intermediate program called a compiler to transform high level syntax into machine level code, JavaScript is simply interpreted by the JavaScript engine of the browser at runtime. Modern day JavaScript engines are works of genius, allowing extremely fast and accurate execution of JavaScript code. Therefore, there is no need to worry about JavaScript’s interpreted nature.

JS is Case Sensitive

In working with technology, we web developers are exposed to numerous different languages and syntax. Some of the languages we encounter are case insensitive, but JavaScript is case sensitive so make sure to keep this in mind. You will find things breaking and not working with simple case errors. For example alert(‘I am the JavaScript Victim’); works fine whereas Alert(‘I am the JavaScript Victim’); will fail in spectacular fashion. Actually, it won’t be all that spectacular, in fact, the only thing that would tip you off that something went wrong is, nothing would happen. Such is the nature of JavaScript, it is a tricky language to debug, but more on that in a later lesson.

JavaScript Runs on Statements

Just like other languages, JavaScript runs one statement at a time. A statement is a group of executable language components terminated by a semicolon. Statements are usually executed in order from top to bottom. The order of execution can be changed by conditional statements such as if and switch, by looping statements such as while, for, and do, and by disruptive statements like a break, return, and throw. Function execution also can change the top to bottom nature of statement execution.

JavaScript’s Forgiving Nature is a Weakness

JavaScript is a powerful and capable language. It does have some shortcomings that were actually meant to be helpful features when the language was first conceived. The most popular of them all is the highly infamous semicolon insertion. Built into JavaScript is the capability to detect poor syntax and automatically insert missing semicolons. That sounds like a good idea, right? Wrong. Should you forget to manually insert semicolons at the proper location in your code, Chuck Norris will unleash a fury of karate kicks and nunchuck whipping upon you. Well, maybe that won’t happen, but your scripts will be riddled with bugs that you will have almost no hope of finding, so make sure to just insert your semicolons so that everybody, including yourself, will stay happy.

Whitespace is Semi Insensitive in JavaScript

What? What the heck is semi insensitive? Well, for the most part, whitespace does not matter in JavaScript. This is why you see such widespread use of minification tools that take human-readable JavaScript syntax code and strip out mostly all of the whitespaces, leading to one long string of JavaScript that looks like some strange form of hieroglyphics. There are instances where whitespace does matter. For example:

var chimmy = chonga;

The space between var and chimmy is actually needed here for the script to work properly. Or consider:

document.writeln('This is a          line');

Whitespace contained within a string also cannot be removed.

Comments in JavaScript

JavaScript comments work just like they do in most other C-based languages. You can make use of the well-known multi-line and or single line comment techniques. As you likely know, /* */ handles the multi-line commenting while // can be used line by line, or at the end of a line to add a comment.

The Order of Code Execution Matters
As we mentioned earlier, when a web browser begins its interpretation of a web page, it starts at the top and goes line by line down through the DOM. This includes the HTML, CSS, and JavaScript on the page. In our first little snippet of JavaScript, we made use of the oh-so-loved alert box to let the visitor know that we are a victim of JavaScript. Note that the HTML is rendered in the background, and page execution has halted once the alert message popped. The user must click ok to finish the program. Let’s make a very minor modification to that web page. We will simply move our script from the body to the head portion of the page. Let’s see what happens.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Code Structure</title>
<script>
alert('I am the JavaScript Victim');
</script>
</head>

<body>
<h2>This is a web page.</h2>
<p>This webpage is about as simple as it gets.  It will make it easy for you to understand the JavaScript Embedded within it.</p>
JavaScript is:
<ul>
  <li>deep</li>
  <li>dark</li>
  <li>delicious</li>
</ul>

</body>
</html>

Note that we get the same JavaScript alert on that page. Do you notice something different though? That’s right if you look at the background, absolutely no HTML has been rendered yet, and we are frozen in this state until we click ok. This shows that the order of execution is indeed important. This is an overly simple example, but you would be surprised as you move along in your JavaScript journey when you are debugging tricky problems to find out that simply moving your code up or down in the hierarchy of the DOM may solve your issue. It may seem trivial, but it does make a difference.

Where To Place JavaScript

Inline You can place JavaScript right into the HTML page using the script tags. This is good for very small sites and testing only. The inline approach does not scale well, leads to poor organization, and code duplication.
External File A better approach is to place JavaScript into separate files and link to them from the HTML page. This way a single script can be included across thousands of HTML pages, and you only have one place to edit your JavaScript code. This approach is also much easier to maintain, write, and debug.

Use of the Script Tag

In the past, we had to worry about specifying many attributes for the script tag. With the onset of HTML5 and modern browsers, simply including the src attribute is enough.

<script src="path/to/javascript.js"></script>

Where should I place the Script Tags?

The script tags can go anywhere on the page, but as a best practice, many developers will place it just before the closing body tag on the HTML page. This provides faster speed load times for your web page.

Conclusion

This was a very gentle primer of what’s to come. It has been helpful to review some of the key points and overview of the language.

What is the structure of JavaScript program?

JavaScript statements are commands to the browser JavaScript code is a sequence of statements JavaScript statements are separated with semicolon Multiple statement on one line is allowed JavaScript statements can be grouped together in code blocks You can break a code line after an operator or a comma.

Is JavaScript a structural language?

JavaScript is an structured and dynamic scripting language. The basic syntax was intentionally made similar to both C++ and Java to facilitate professional's and newbie's learning process.

What is the structure of a code?

Structure. A Structure is one of the 5 data types in programming. A structure is used to represent information about something more complicated than a single number, character, or boolean can do (and more complicated than an array of the above data types can do).