Crow's Codes 003: JavaScript Switch Statement

in #coding6 years ago


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


Connect with me on:

My Website: JeremyCrow.com
Minds: Minds.com/JeremyCrow
Twitter: Twitter.com/JeremyCrow
Patreon: Patreon.com/jeremycrow
Instagram: Instagram.com/jeremycrow
YouTube: YouTube.com/user/ZigguratOfEnki
BitChute: BitChute.com/JeremyCrow (sign up here)

Sort:  

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 21 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 10 SBD worth and should receive 71 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

Hello! Your post has been resteemed and upvoted by @ilovecoding because we love coding! Keep up good work! Consider upvoting this comment to support the @ilovecoding and increase your future rewards! ^_^ Steem On!

Reply !stop to disable the comment. Thanks!

This post has received a 100.00 % upvote from @steemdiffuser thanks to: @jeremycrow.

Bids above 0.05 SBD may get additional upvotes from our trail members.

Get Upvotes, Join Our Trail, or Delegate Some SP

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by JeremyCrow from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.

!bookkeeping drugwars steemmonsters

Loading...

!bookkeeping drugwars steemmonsters

Loading...

Coin Marketplace

STEEM 0.16
TRX 0.15
JST 0.027
BTC 60244.17
ETH 2333.72
USDT 1.00
SBD 2.47