Home arrow JavaScript arrow An Overview of JavaScript Statements
JAVASCRIPT

An Overview of JavaScript Statements


To help beginners and others interested in learning JavaScript understand how the language works, this tutorial will offer an explanation of JavaScript statements. Examples will also be provided to see the concepts in action.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
June 01, 2012

print this article
SEARCH DEVARTICLES

To help beginners and others interested in learning JavaScript understand how the language works, this tutorial will offer an explanation of JavaScript statements. Examples will also be provided to see the concepts in action.

JavaScript helps to add useful functionality to Web pages in many ways.  It can help facilitate communication with the server, aid in validating forms, and the list goes on.  If you are new to JavaScript, you might feel overwhelmed at the sheer volume of information that there is to digest.  Do not worry, as this is common whenever learning a new subject.  Luckily, JavaScript is rather easy to learn, as long as you pick up the basics and slowly build your bank of knowledge on the topic.

There are obviously many topics that fall under the JavaScript umbrella that are worth learning, and one of those covers the area of statements.  This tutorial will cover statements with a basic overview as to what function they perform in the world of JavaScript.  We will also throw in some examples so that you can get a better visualization of how they work.  With all that being said, let’s begin our tutorial by taking a look at what JavaScript statements are and defining them.

Commands to a Browser – JavaScript Statements

Before we can get into the format related specifics of a JavaScript statement, we must first define what it is.  In basic terms, a JavaScript statement tells the browser what you want it to do.  If you had to associate a statement with one word, think of it as a command.  Keeping that in mind, you can think of the entire JavaScript language as a collection of statements that the browser must execute.

So, now that you know that a JavaScript statement is basically a command to the browser, what does a statement look like?  Here is a very simple example of a JavaScript statement that commands the browser to write “This is a statement” to an HTML element.

document.getElementById("demo").innerHTML="This is a statement";

As you can see, this format is rather simplified.  Do you see the semicolon (;) that resides at the very end of the statement?  Putting one at the end of a statement is considered to be a solid practice to follow in JavaScript, so you should remember to do so as you work with the language.  You will probably get used to using the semicolon as you see more and more examples of JavaScript through your learning process, even though it is technically optional.

You may be wondering why you should put a semicolon at the end of a statement if it is optional.  Well, although the browser sees the end of the line as the end of the statement, you may want to put more than one statement on a line.  This is where the semicolon comes in handy.

Another thing worth mentioning is that JavaScript is case-sensitive.  In other words, a capital T is different than a lower-case t, and so on.  Keep this in mind as you work with JavaScript, as all cases are not created equal.

Our example above showed us what a JavaScript statement looks like.  By itself, we noted that the particular statement in our example would yield a final result that would command the browser to write “This is a statement” to an HTML element.

A Sequence of JavaScript Statements – JavaScript Code

Moving further, what if we want to kick things up a notch with more than one JavaScript statement?  What if we want a sequence of JavaScript statements to supply the browser with multiple commands?  This is what can be referred to as JavaScript code.  In simple terms, JavaScript code is a collection of JavaScript statements that are written in a sequential order. 

As to how JavaScript executes the statements, it is rather logical.  Statements are executed in the order in which they appear.  So, if statement 1 comes first, it will be executed before statement 2, and so on.  Now that you have an idea of how JavaScript code works in terms of execution, let’s take a look at an example that includes two statements.

<html>
<body>

<h1>Sample Page</h1>

<p id="demo">A Paragraph.</p>

<p id="myDIV">A DIV.</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML="This is a sample";
document.getElementById("myDIV").innerHTML="Of some code";
</script>

</body>
</html>

The code above gives us this final output:
Sample Page
This is a sample
Of some code
As you can see, the statements were executed in the sequence they were written in to give us the final result.
Groups of JavaScript Statements – JavaScript Blocks

Let’s say we want to take multiple JavaScript statements in a sequence and have them execute together as a group.  We can do this through the use of groups of JavaScript statements that are commonly referred to as JavaScript blocks.  These blocks allow us to execute statements in a unified fashion. 
With an explanation of JavaScript blocks now complete, it is time to take a look at an example that showcases an instance of sequential statements in a block in the form of a JavaScript function.  This example of a block features a pair of HTML elements:
function myFunction()
{
document.getElementById("demo").innerHTML="This is a sample";
document.getElementById("myDIV").innerHTML="Of a block";
}

Do you see the brackets?  The first bracket { is used to signify the beginning of the block.  The second bracket } at the bottom is used to signify the end of the block.

Conclusion

We have just gone over the topic of JavaScript statements.  We first defined what a JavaScript statement is and what it does, noting that it is basically a command to the browser.  After we gave an example of a JavaScript statement, we moved on to explain JavaScript code, which is a sequence of statements.  The tutorial’s final section discussed JavaScript blocks, which we defined as groups of JavaScript statements meant to be executed together.

Hopefully this quick overview has helped you understand JavaScript statements.  The topic is rather basic, but it does give you a building block to expand on as you continue to learn JavaScript. 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All JavaScript Tutorials
More By wubayou


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials