JavaScript Conditions

A condition is an expression that evaluates whether something is true or false. Conditions are very much used. Usually the code should execute one way if the condition is true and another way if the condition is false.


Conditional Statements

JavaScript have the following conditional statements

JS JavaScript - Conditional Statements

Condition Description
if Run a block of code if a specified condition is true
else Run a block of code if a specified condition is false
else if New condition to test if first condition is false
ternary short cut for the if statement
switch substitute for many else if statements

Learn more about JavaScript Switch Learn more about JavaScript break

Syntax

JS JavaScript - Syntax

if (condition1) {
    block of code to be executed if condition1 is true
} else if (condition2) {
    block of code to be executed if the condition1 is false and condition2 is true
} else {
    block of code to be executed if the condition1 is false and condition2 is false
}

The If Statement

Specify a block of code to be executed if a condition is true.

JS JavaScript - The If Statement

if (personsInACar > 5) {
    status = "Too many persons for this car";
}

Learn more about JavaScript Booleans Learn more about JavaScript Comparisons

The Else Statement

Specify a block of code to be executed if a condition is false.

JS JavaScript - The Else Statement

if (personsInACar > 5) {
    status = "Too many persons for this car";
} else {
    status = "You may order this car";
}

The Else If Statement

New condition to test if the first condition is false.

JS JavaScript - The Else If Statement

if (personsInACar <= 5) {
    status = "You may order a 5-seater car";
} else if (personsInACar  <= 7) {
    status = "You may order a 7-seater car";
} else {
    status = "Sorry, we do not have a car for you";
}

The Ternary Statement

The ternary operator is frequently used as a shortcut for the if statement.

Syntax

JS JavaScript - The Ternary Statement

condition ? expr1 : expr2 

The Ternary Statement Example

JS JavaScript - The Ternary Statement Example

function getMemberFee(isMember) {
   return (isMember ? "£5.00" : "£12.00");
}
 
console.log(getMemberFee(true));       // expected output: "£5.00"
 
console.log(getMemberFee(false));     // expected output: "£12.00"
 
console.log(getMemberFee(1));          // expected output: "£5.00"

The Switch Statement

The switch statement is a substitute for many else if statements.

Use the switch statement to select one of many code blocks to be executed.

Syntax

JS JavaScript - The Switch Statement

switch(expression) {
   case x:
        code block
        break;
   case y:
        code block
        break;
   default:
        code block
}

Learn more about JavaScript Switch

The Break Keyword

The code breaks out of the switch block when it reaches a break keyword.

It is not necessary to break the last case in a switch block.

Remember to end the default case with a break if default is not the last case in the switch block.


It is important to use break to stop execution. Code under other case statements will also run if break is missing.


Learn more about JavaScript break

The Default Keyword

The default keyword specifies the code to run if there is no other case match


The Switch Statement Example

JS JavaScript - The Switch Statement Example

<!DOCTYPE html>
<html>
<body>
 
<p id="demo"></p>
 
<script>
var month;
var currentMonth = new Date().getMonth();
switch (currentMonth) {
   case 0:
        month = "January";
        break;
   case 1:
        month = "February";
        break;
   case 2:
        month = "March";
        break;
   case 3:
        month = "April";
        break;
   case 4:
        month = "May";
        break;
   case 5:
        month = "June";
        break;
   case 6:
        month = "July";
        break;
   case 7:
        month = "August";
        break;
   case 8:
        month = "September";
        break;
   case 9:
        month = "October";
        break;
   case 10:
        month = "November";
        break;
   case 11:
        month = "December";
        break;
   default:
    	month = "Sorry, could not find the month";
}
document.getElementById("demo").innerHTML = "The month is " + month;
</script>
 
</body>
</html>
 

The Switch Statement Example

Different switch cases can execute the same code.

JS JavaScript - The Switch Statement Example

switch (new Date().getMonth()) {
   case 0:
   case 1:
   case 11:
        text = "Its winter";
        break; 
   case 2:
   case 3:
   case 4:
        text = "Its spring";
        break;
   case 5:
   case 6:
   case 7:
        text = "Its summer";
        break;    
   case 8:
   case 9:
   case 10:
        text = "Its autumn";
        break;    
   default: 
        text = "Oops, I dont know the season...";
}

BACK TO TOP






Check this out

JS JavaScript: Variables

A variable contains a value. When you use the variable, you refer to the data it represents. You use variables to store, retrieve and manipulate values in your code.

JS JavaScript: Var

Var is a keyword that is used to declare a variable.

But, you should NOT use var, use let when declaring a variable.

One of the most important things is that you should try to keep things simple!

JS JavaScript: Scope

Scope determines if variables are accessible (visible).

A scope in JavaScript defines what variables you have access to. There are two kinds of scope – global scope and local scope.

Function scope and block scope are local scope - variables declared inside a function or a bl....

JS JavaScript: Strict Mode

The strict context prevents some actions and throws more exceptions. Strict mode changes previously accepted "bad syntax" into errors. Strict mode will for example prevent using undeclared variables. The "use strict" directive was new in ECMAScript version 5.


BACK TO TOP

JavaScript is one of the 3 core language technologies of the World Wide Web that all web developers must learn:

1.      HTML to define the content of web pages.

2.      CSS to specify the layout of web pages.

3.      JavaScript to program the behavior of web pages.

JavaScript is a scripting or programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at, displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. − you can bet that JavaScript is probably involved.


The benefits of using JavaScript are:

1.      You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.

2.      Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have forgotten to enter something.

3.      Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.

4.      Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.


BACK TO TOP

Need more Honney

NDC Conferences

The NDC Conferences (Norwegian Developers Conference) are one of the world`s largest independent software conferences for .NET & Agile development. The conference covers everything you need to know within software development. The conferences are held each year in many places such as Oslo, Copenhagen, London, Sydney and Minnesota.

Update Conference Prague

Update Conference Prague is the biggest developer conference in the Czech Republic. The conference is offering sessions delivered by the top experts from all around the world. Their goal is to inspire the attendees and enrich their knowledge.

Troy Hunt

Learn about Web Security from Troy Hunt. He is a really engaged speaker that frequently give talks on conferences around the world. Troy is a Microsoft MVP and you can even learn from him on some great courses on Pluralsight.

W3Schools

W3Schools.com is a great education Web Site for learning web technologies. On W3Schools you may find well organized basic to advanced tutorials and references.

Scott Hanselman

Learn about Web Technologies and new trends from Scott Hanselman. Scott Hanselman is an author of developer books and he is an engaged speaker that usually talks about the Microsoft stack. You may meet Scott on conferences around the world.

Developer Week

DeveloperWeek is one of the world’s largest developer conferences. Developer Week focus on new dev technologies, the conference have talks and workshops for newbies and experienced audience. You can attend on a Developer Week conference different places in Nothern America.


BACK TO TOP

Honneybag blog



Learn JavaScript Debugging

Searching for bugs and fixing them is called code debugging. The bugs might be difficult to diagnose and therefore it is important to have a good approach to find and fix the bugs effectively. Bugs in the code might be syntax errors or logical errors. Sometimes nothing happens when the code contains bugs and there is few indications where to search. Modern web browser includes a powerful suite of developer tools. The tools do a range of things...

Explore JavaScript Arrays

Arrays are frequently used by developers. Programming languages can have slightly different implementation of arrays. An array is an object that can store a collection of items. You may say it`s a special variable that can have more than one value. The array holds many values under a single name, and you may access the values by referring to an index number. The easiest way to create....

Ultimate Guide to HTML Colors

It is essential to give the user a good user experience. There are many things you should focus on, one of them is how you use colors on your website. We don't have to struggle with black and white TVs anymore. Users expect more and more and we can apply colors to everything we want. Texts, borders, backgrounds, shadows – in HTML they all can have whatever color you decide....

Wanna be a sheep? Check out the most popular subjects
HONNEYBAG BLOG
JAVASCRIPT ESSENTIALS
HTML FORMATTING
HONNEYBAGBLOG INSPIRE-AND-BE-INSPIRED
HONNEYBAGBLOG EXPLORE-JAVASCRIPT-ARRAYS
Wanna be a little different? Check out the less popular subjects
HTML ESSENTIALS
JAVASCRIPT BREAKER
HTML COMMENTS
HTML BUILDING-BLOCKS
HTML COMPUTER-CODE
BACK TO TOP