[fusion_builder_container type=”flex” hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”true” min_height=”” hover_type=”none” link=”” border_sizes_top=”” border_sizes_bottom=”” border_sizes_left=”” border_sizes_right=”” first=”true”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
Introduction to JavaScript – Control Flow
In this lesson, we’ll explore how we can use the building blocks of JavaScript to write programs that make decisions. Control flow statements enable JavaScript programs to make decisions by executing code based on a condition. If a given condition is true, we execute one block of code. If the statement is false, we execute another block of code.
For instance, if we were making a game in which the user had to choose which door to enter, we’d need a way for the program to know what to do once the user was in the next room.
1. Understanding Control Flow Statements
Control flow statements are used to control the order in which your code executes. The primary control flow statements in JavaScript are:
if statementselse statementselse if statementsswitch statements
Example 1: Basic if Statement
let isSunny = true;
if (isSunny) {
console.log('Wear sunglasses!');
}
In this example, if the isSunny variable is true, the message “Wear sunglasses!” will be printed to the console.
Example 2: if...else Statement
let isRaining = true;
if (isRaining) {
console.log('Take an umbrella!');
} else {
console.log('Enjoy the sunshine!');
}
In this example, if isRaining is true, the message “Take an umbrella!” will be printed. If isRaining is false, the message “Enjoy the sunshine!” will be printed.
Example 3: if...else if...else Statement
let temperature = 30;
if (temperature > 30) {
console.log('It\'s a hot day!');
} else if (temperature > 20) {
console.log('It\'s a warm day!');
} else {
console.log('It\'s a cool day!');
}
In this example, if the temperature is greater than 30, it will print “It’s a hot day!”. If the temperature is between 21 and 30, it will print “It’s a warm day!”. Otherwise, it will print “It’s a cool day!”.
2. Practical Examples
Let’s apply control flow statements in practical scenarios.
Example 4: User Greeting
In this example, we will use control flow statements to display different messages based on the user’s name and their knowledge of JavaScript.
let userName = 'Bernie'; // Set your name in this variable
let knowsJavaScript = false; // Set this boolean to true or false and see results
if (knowsJavaScript && userName) {
console.log('Great, ' + userName + '! Get ready to practice your JavaScript!');
} else if (knowsJavaScript) {
console.log('Great! Get ready to practice your JavaScript!');
} else if (userName) {
console.log('Great, ' + userName + '! Get ready to learn something new!');
} else {
console.log('Great! Get ready to learn something new!');
}
Output:
Great, Bernie! Get ready to learn something new!
Now, change knowsJavaScript to true and see how the output changes.
let userName = 'Bernie'; // Set your name in this variable
let knowsJavaScript = true; // Set this boolean to true or false and see results
if (knowsJavaScript && userName) {
console.log('Great, ' + userName + '! Get ready to practice your JavaScript!');
} else if (knowsJavaScript) {
console.log('Great! Get ready to practice your JavaScript!');
} else if (userName) {
console.log('Great, ' + userName + '! Get ready to learn something new!');
} else {
console.log('Great! Get ready to learn something new!');
}
Output:
Great, Bernie! Get ready to practice your JavaScript!
3. Advanced Control Flow
As we advance, we can explore more complex control flow structures, such as nested control statements and switch statements.
Example 5: Nested if Statements
let age = 25;
let hasDriverLicense = true;
if (age >= 18) {
if (hasDriverLicense) {
console.log('You can drive!');
} else {
console.log('You need a driver\'s license to drive.');
}
} else {
console.log('You are too young to drive.');
}
Output:
You can drive!
Example 6: switch Statement
let day = 'Monday';
switch (day) {
case 'Monday':
console.log('Start of the work week!');
break;
case 'Wednesday':
console.log('Midweek blues!');
break;
case 'Friday':
console.log('Weekend is here!');
break;
default:
console.log('It\'s just another day!');
}
Output:
Start of the work week!
Conclusion
Control flow statements are crucial for making decisions in your JavaScript programs. By mastering if, else, else if, nested statements, and switch statements, you can create more dynamic and interactive applications.
Practice Exercise
Try creating a simple program that uses control flow statements to check if a user-provided number is positive, negative, or zero.
let number = prompt('Enter a number:');
if (number > 0) {
console.log('The number is positive.');
} else if (number < 0) {
console.log('The number is negative.');
} else {
console.log('The number is zero.');
}
Experiment with different inputs to see how the program responds. Happy coding!
[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”center” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”50px” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
[/fusion_text][fusion_youtube id=”https://www.youtube.com/watch?v=JloLGV9DmtQ” alignment=”center” width=”” height=”” start_time=”” end_time=”” autoplay=”false” mute=”false” api_params=”” title_attribute=”” video_facade=”” thumbnail_size=”auto” margin_top=”50px” margin_bottom=”50px” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” css_id=”” structured_data=”off” video_upload_date=”” video_duration=”” video_title=”” video_desc=”” /][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”50px” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
Related Videos:
Related Posts:
Ready Player One: Coding for kids.
WordPress: Optimize Twitter Usernames with/out a Plugin
Learn about JavaScript ELSE STATEMENTS
Introduction to JavaScript – Control Flow: True and False values
Learn about JavaScript IF STATEMENTS
[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
