Crow's Codes 003: JavaScript Switch Statement

Image courtesy of Pexels.com

This is my third entry in my coding blog. Originally I was going to create an entry every single day for 365 days. This was intended to serve as a way of making myself accountable to advancing my coding skills on a daily basis. In the end I realized that due to my busy schedule, there will regularly be days when I have very limited time to study and practice my skills. Taking 15 minutes to document it on those days means cutting into a big chunk of my available time. It doesn't sound like a lot, but if I cut back to only one or two posts per week that will give me around an extra 75 hours of study time per year. That being said, I still intend to code every single day within reason. I just won't be making a daily blog post.

Editor for Coding

Previously I had been using plain old Notepad to write code. The no frills plain text editor that comes standard with Windows. Without realizing it, I was making things a lot harder for myself. There are text editors specifically designed for coding that have features that help you be more efficient and detect errors. For example, text being highlighted when the editor recognizes it's type. For example, all the tags showing up in red and properties in green. These special editors can automatically generate a closing tag when you type the opening tag. Automatic indentation. Etc... The editor that I decided to use is called Sublime Text 3 and can be downloaded at: SublimeText.com

Embedded JavaScript

Today I created a basic HTML file that I can use locally on my hard drive so I can play around with embedded JavaScript code. The JavaScript goes between the opening and closing <script> tags. In the example below, the JavaScript code is used to create a Switch statement. The HTML creates a button that triggers the JavaScript code to run. You will only see the result in the console of the browser. To see this console, right click on the page and select Inspect Element to open the extra pane. Then make sure to click the Console tab.

Here is the code I wrote with the example Switch statement:

<!DOCTYPE html>
<html>
<head>
    <title>Playing With JavaScript</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="header">
        <h1>How To Respond To Lunch</h1>
        <p>What to say when someone makes you lunch</p>
    </div>

    <div class="container">
        <button onclick="doClick()">Lunch</button>
    </div>

<script type="text/javascript">
    function doClick() {
        var lunch = 'omurice';
        switch(lunch) {
            case "sandwich":
                console.log('Cool! Sandwiches!');
                break;
            case 'omurice':
                console.log('Nice! Omurice!');
                break;
            default:
                console.log('Anything you make is awesome. Thanks!');
                break;
        };
    };
</script>

</body>
</html>

This isn't a very useful piece of code at this point, but I'm just using it to experiment. Previously, most of the coding I've done has been HTML and CSS that I wrote in Notepad. Up until now, for learning JavaScript I had been using the built in system at Codecademy which is divided into three panes in the browser window. The first pane to the left has the written instruction, the middle pane is where you type your code and the pane on the right shows the result of your code when you run it. Today I moved to writing code in Sublime Text 3 and using Google Chrome to view the results of running that code. It feels a lot more legit than using the system built into Codecademy. Also, this allows a greater level of flexibility. I can go through a tutorial in YouTube or from a book and experiment with whatever code I like in a realistic environment.

If you enjoyed this record of my experience learning to code and want to follow along going forward, please consider adding me on Twitter and following my blog here on Steemit:
https://steemit.com/@jeremycrow