Jquery if else examples. Conditional Statements in Javascript - IF-ELSE Construction - Conditions in Javascript - Basics. bulleted list tags

Conditional statements

Conditional statements allow you to skip or execute other statements depending on the value of a specified expression. These statements are decision points in a program and are sometimes also called branch operators.

If you imagine that a program is a road, and the JavaScript interpreter is a traveler walking along it, then conditional statements can be thought of as crossroads where the program code branches into two or more roads, and at such crossroads the interpreter must choose which road to take next .

The if statement is a basic control statement that allows the JavaScript interpreter to make decisions, or more accurately execute statements, based on conditions. The if statement has two forms. First:

if (expression) statement

In this form, the expression is first evaluated. If the result obtained is true, then the statement is executed. If the expression returns false, then the statement is not executed. For example:

If (username == null) // If the username variable is null or undefined username = "Alex"; // define it

Note that parentheses around a conditional expression are a required part of the if statement syntax.

The second form of the if statement introduces an else clause that is executed when the expression evaluates to false. Its syntax is:

if (expression) statement1 else statement2

This form executes statement1 if the expression evaluates to true and statement2 if the expression evaluates to false. For example:

If (n == 1) console.log("1 new message received."); else console.log("Received " + n + " new messages.");

The if/else statement evaluates the value of an expression and executes one or another piece of program code, depending on the result. But what if you need to execute one of many fragments? Possible way to do this is to use the else if statement. Formally, it is not independent JavaScript operator; This is just a common programming style of using a repeated if/else statement:

If (n == 1) ( // Execute block 1 ) else if (n == 2) ( // Execute block 2 ) else if (n == 3) ( // Execute block 3 ) else ( // If neither one of the previous else statements was not executed, execute block 4)

There's nothing special about this piece. It is simply a sequence of if statements, where each if statement is part of the else clause of the previous statement.

An if statement creates a branch in the flow of the program, and multi-state branching can be implemented using several else if statements. However this is not always best solution, especially if all branches depend on the value of the same expression. In this case, it is wasteful to re-evaluate the same expression in multiple if statements.

The switch statement is designed specifically for such situations. The switch keyword is followed by an expression in parentheses and a block of code in curly braces:

switch(expression) ( instructions )

However, the full syntax of a switch statement is more complex than shown here. Various places in a block are marked with the keyword case followed by an expression and a colon character.

When a switch statement is executed, it evaluates the value of the expression and then looks for a case label that matches that value (the match is determined using the identity operator ===). If the label is found, the block of code is executed, starting with the first statement following the case label. If a case label with a matching value is not found, execution begins with the first statement following the special label default: . If the default: label is missing, the entire switch statement block is skipped.

The operation of the switch statement is difficult to explain in words; the explanation is much clearer with an example. The following switch statement is equivalent to the repeated if/else statements shown in the previous example:

Switch(n) ( case 1: // Executed if n === 1 // Execute block 1 break; // Stop here case 2: // Executed if n === 2 // Execute block 2 break; / / Stop here case 3: // Execute if n === 3 // Execute block 3 break; // Stop here default: // If everything else fails... // Execute block 4 break; )

Note the break keyword at the end of each case block. The break statement causes control to be transferred to the end of the switch statement and the execution of the following statements to continue. Case statements in a switch statement specify only the starting point of the program code to be executed, but do not specify any end points.

If there are no break statements, the switch statement will begin executing the block of code with the case label corresponding to the value of the expression and continue executing the statements until it reaches the end of the block. In rare cases, this is useful for writing code that moves from one case label to the next, but in 99% of cases you should carefully end each case block with a break statement. (When using a switch inside a function, you can use a return statement instead of a break. Both of these statements serve to terminate the switch statement and prevent it from going to the next case label.)

Below is a more practical example of using the switch statement, it converts a value to a string in a way that depends on the type of the value:

Function convert(x) ( switch(typeof x) ( // Convert a number to a hexadecimal integer case "number": return x.toString(16); // Return a quoted string case "string": return """ + x + """; // Any other type is converted in the usual way default: return x.toString(); ) ) console.log(convert(1067)); // Result "42b"

Note that in the previous two examples, the case keywords were followed by numbers or string literals. This is how the switch statement is most often used in practice, but the ECMAScript standard allows you to specify arbitrary expressions after the case.

The switch statement first evaluates the expression after the switch keyword, and then the case expressions in the order in which they are specified, until a matching value is found. The fact of a match is determined using the identity operator === rather than the equality operator ==, so the expressions must match without any type conversion.

Because not all case expressions are evaluated each time a switch statement is executed, you should avoid using case expressions that have side effects such as function calls and assignments. It is safest to limit case expressions to constant expressions.

As explained earlier, if no case expression matches a switch statement, the switch statement begins executing the statement labeled default:. If the default: label is missing, the body of the switch statement is skipped entirely. Note that in the previous examples, the label default: appears at the end of the body of the switch statement, after all the case labels. This is a logical and common place for it, but in fact it can be located anywhere within a switch statement.

Let's start learning about conditional statements in JavaScript. Here we will look at the If-Else construct. Translated into Russian, this condition reads as If-Then.

But before we start talking about conditions in JavaScript, let's look at how and where they occur in real life.

For example, if it is clear in the evening, we will go to the park.

if this car costs less than $1000, then I will buy it, etc.

Thus, as you probably already understood, the condition “If” and the consequence “Then” are encountered quite often in our lives. That is, our behavior in various situations mainly depends on certain conditions.

The same applies to programming languages. They have special constructs that allow you to set certain conditions and perform actions if the specified conditions are met or not met.

Let's try to implement some simple example of using conditional statements, or rather the If-Else construct in JavaScript.

First, let's look at how the If statement works in JavaScript.

To do this, below we will first give an example and then analyze it.

var weather = "clear" ; /* create a pogoda variable and assign it the value “clear” */

if(pogoda == "clear") /* create a condition: if pogoda equals "clear" - TRUE*/

( /* That... */

document.write();

My family and I go to the Park in the evening

What should you pay attention to in the example above?

First, on equal signs == and assignments = in JavaScript. They should be distinguished: that is, first we create a variable and assign a value to it. Then in the If condition we talk about equality.

Secondly, when talking about the fulfillment or non-fulfillment of the condition contained in braces(), then it should be understood that JavaScript language perceives the condition as either True or False. That is, if the condition is True, as in our case, then the action enclosed in curly braces () is performed.

If the condition is False, as in the example below, then the condition enclosed in curly braces () will not be executed.

var weather = "cloudy" ;

if(pogoda == "clear" ) /* now the condition is FALSE: pogoda does not equal "clear" */

document .write ("My family and I are going to the Park in the evening" );

This is how the conditional operator If works: if the condition is True, the action is performed, if False, the action will not be performed. It's simple.

Now let's talk about how the If-Else construct works in JavaScript. Else is translated as “Otherwise”.

Let's turn to real life again. In most cases, if any condition is met, then we do one thing. If it is not fulfilled - “Otherwise”, then we do something else.

Let's continue working with the examples given earlier.

If it's clear in the evening, we'll go to the park, otherwise (if it's cloudy) we will stay at home and watch TV.

Or if this car costs less than $1000, then I will buy it, otherwise (if it costs more) I will go on a trip with this money.

JavaScript also has this ability to provide an alternative ( do something else), if the condition is not met. In JavaScript, we can create similar conditions using the If-Else construct. Let's take an example.

var weather = "cloudy" ; /* assign the variable “pogoda” the value “cloudy” */

if(pogoda == "clear") /* create a condition: if pogoda equals "clear" - this is TRUE */

document .write ("My family and I are going to the Park in the evening" );

else /* otherwise - if pogoda does not equal "clear" - this is FALSE */

{
document.write("

" + "We stay at home - watch TV" );
}

We stay at home - watch TV

Let's look at the example given.

So, if the condition is True, then the action following the If statement, enclosed in curly braces () is performed.

If the condition is False, then the action following Else operator, also enclosed in curly braces () .

We looked at how the simple but often used If-Else construct works in JavaScript. And here, for the future, it should be said that no matter how complex the condition may be, what matters first is whether it is True or False.

To consolidate the material covered “Conditional statements in Javascript - IF-ELSE Construction”, let's look at another example.

Only now we use the If-Else condition when working with numbers.

var count = 10 ;

if(count = 3 ) /* create a condition: if the number of elements of the friends array is greater than or equal to 3, then....*/

document .write("This is a large array with at least 3 elements");

else /* otherwise... */

{
document .write ("This is a small array with less than 3 elements" );

Reg.ru: domains and hosting

The largest registrar and hosting provider in Russia.

More than 2 million domain names in service.

Promotion, domain mail, business solutions.

More than 700 thousand customers around the world have already made their choice.

Bootstrap framework: fast adaptive layout

Step-by-step video course on the basics of adaptive layout in the Bootstrap framework.

Learn how to layout simply, quickly and efficiently using a powerful and practical tool.

Layout to order and get paid.

*Mouse over to pause scrolling.

Back forward

Often when using JavaScript there is a need to fulfill different actions when different conditions are met.

For example, you wrote a script that checks what browser a visitor uses when visiting your site. If this Internet Explorer, a page specially designed for IE must be loaded; if it is any other browser, another version of this page must be loaded.

The general syntax of an if-else construct is as follows:

If (condition) (action) else (action2);

As an example, consider the following code:

If (browser=="MSIE") ( alert("You are using IE") ) else ( alert("You are not using IE") );

Note that all lowercase letters are used. If you write "IF", an error will occur.

Also note that comparison uses a double equals sign (==).

If we write browser="MSIE", then we will simply assign the value MSIE variable named browser.

When we write browser=="MSIE", then JavaScript "understands" that we want to make a comparison and not assign a value.

More difficult conditions if you can create simply by adding them, for example, to a part else already existing structure if-else:

If (condition) (action1) else (if (other condition) (action2) else (action3); );

For example:

If (browser=="MSIE") ( alert("You are using IE") ) else ( if (browser=="Netscape") ( alert("You are using Firefox") ) else ( alert("You are using an unrecognized browser: )")); );

Logical operators AND, OR and NOT

For even more flexible use of the design if-else You can use so-called logical operators.

And is written as && and is used when more than one condition needs to be tested for truth.

For example: If there are eggs in the refrigerator and there is bacon in the refrigerator, then we can eat eggs and bacon.

The syntax is as follows:

If (condition1 && condition2) ( action ) if (hour==12 && minute==0) ( alert("Noon!") );

Or is written as ||

and is used when we want to check the truth of at least one of two or more conditions. (You can get || by holding down the shift key and the \ key)

The syntax is as follows:

For example: If there is milk in the refrigerator, or there is water in the refrigerator, then we have something to drink.

If (condition1 || condition2) ( action ) if (hour==11 || hour==10) ( alert("It's not noon yet!") );

Not is written as !

and is used for negation.

For example: If there are either no eggs or no bacon in the refrigerator, then we cannot eat either eggs or bacon.

The syntax is:

If (!(condition)) ( action ) if (!(hour==11)) ( alert("It's not 11 o'clock") );

Functions in JavaScript Instead of just adding Javascript to the page and having the browser execute the code when it comes to it, you can make the script execute only when an event occurs. For example, you created JavaScript whose task is to change

background color

pages when you click on a specific button. In this case, you need to "tell" the browser that this script should not be executed simply because it has its turn.

To prevent the browser from executing the script when it loads, you need to write the script as a function.

In this case, the JavaScript code will not be executed until we “ask” it to do so in a special way.

Take a look at this example of a script written as a function:

function myfunction() ( alert("Welcome!"); ) Click the button to see what this script does: If the line

alert("Welcome!");

If it weren't written inside a function, it would be executed every time the browser reached that line. But since we wrote it inside a function, this line is not executed until we click the button. The function call (i.e. access to it) occurs in this line: As you can see, we have placed a button on the form and added an event

onClick="myfunction()"

for the button.

In future lessons, we will look at other types of events that trigger functions.

The general syntax for functions is as follows:

Function functionname(variable1, variable2,..., variableN) ( ​​// Here is the body of the function, the actions it performs)

Curly braces: ( and ) indicate the start and end of a function. A typical mistake when creating functions is inattention and ignoring the importance of character case. The word function must be exactly function . The Function or FUNCTION option will cause an error. plays a role when specifying variable names. If you have a function named myfunction(), then an attempt to address her as Myfunction(), MYFUNCTION() or MyFunction() will cause an error.

Did you like the material and want to thank me?
Just share with your friends and colleagues!

See also:

Control instructions are instructions that control the execution of program code. Typically, the executing code in a control instruction is called the body of that instruction.

Control instructions can be nested and can also be used inside other control instructions.

By default, the JavaScript interpreter executes instructions one after another in the order they appear in source code. In cases where the execution or non-execution of some instructions must depend on the fulfillment or non-execution of some condition, conditional instructions are used.

The if statement has two forms. Syntax of the first form:

The expression in parentheses is called the condition for executing an if statement, or condition for short. First, the value of the expression is calculated. The resulting value is implicitly converted to a Boolean type if necessary. If the result of evaluating the expression is true , then the statement is executed. If the expression returns false , then the statement is not executed:

If (true) alert("Completed!"); if (false) alert("Will not execute!");

The if syntax allows you to execute only one statement, but if you need to execute more than one statement you need to use a compound statement:

If (true) ( ​​var str = "Hello!"; alert(str); )

Syntax of the second form:

If (expression) statement; else statement;

The else keyword allows you to add a statement that is executed if the condition evaluates to false:

If (false) alert("Will not execute"); else alert("Running");

As already mentioned, control instructions can be nested, which allows you to create the following constructs:

Var num = 2; if (num == 1) ( alert("num value: " + num); ) else if (num == 2) ( alert("num value: " + num); ) else ( alert("I don’t know this number !"); )

There's nothing special about this code. It is simply a sequence of statements, where each if statement is an else part of the previous if statement. This form of notation may not seem entirely clear at first glance, so let’s consider a syntactically equivalent form showing the nesting of if statements:

Var num = 2; if (num == 1) ( alert("num value: " + num); ) else ( if (num == 2) ( alert("num value: " + num); ) else ( alert("I don’t know this numbers!"); ) )

JavaScript has a conditional construct that affects the execution of the program. If (in English if) something exists, something is true, then do one thing, otherwise (in English else) - do something else.

Let's immediately look at how the if statement works; it is simple and does not require much explanation.

If (condition) (code to execute if condition is true)

It's simple: if the condition is true, then the code in the (...) block is executed.

Var digit = 4; if (digit == 4) ( document.write("The value of the variable digit is 4."); )

You can make a little strange code:

Var digit = 4; if (true) ( ​​document.write("The condition is true."); )

The else statement can be used in conjunction with the if statement. It is translated as “otherwise” and specifies an alternative code.

Var digit = 4; if (digit

Note the different spellings of curly braces in in this example for if and else statements. It is not at all necessary to write it this way; both syntaxes are correct.

After the else statement can go new instructions if. This will check multiple conditions.

Var digit = 4; if (digit

JavaScript doesn't have an elseif statement (in one word) like PHP does.

If you only need to execute one statement, then block curly braces (...) are not needed. In our example, you don’t have to write them:

Var digit = 4; if (digit

The if (condition) statement evaluates and converts the condition (expression) in parentheses to a boolean type (true or false).

Let's repeat that there is a lie in JavaScript.

• Number 0 (zero).
• Empty line "".
• Boolean value false :)
• The value is null.
• The value is undefined.
• The value is NaN (Not a Number).

Everything else is true.

A couple of possible errors:

If ("false") document.write("This is true.
"); if (false) document.write("This is true.

");

Here you need to distinguish the string “false” (enclosed in quotes) from the Boolean value false.

If (" ") document.write("This is true.
"); else document.write("This is false.
");

Here you need to distinguish the line " " (space inside) from empty line"". A space inside a string makes it not empty, but containing a character. For the interpreter, the letter or space does not matter - a character is a character.

• JavaScript switch construct.
• Operator question mark