Javascript Basics for Non-Developer Types pt. 1/5

A.K.A. Javascript Basics for People Who Aren't Interested in Learning Javascript

(But Know They Should Learn a Little Anyways)

As I've mentioned before, Javascript is more than dipping your toe in the code water. HTML and CSS are very comfortable for many, but JS is real deal programming.

I'm still working on that whole training my brain to think like a developer. If you are coming at JS from a similar mindset, maybe this will help you stick some basics in your memory. Let's swim to the deep end. 🏊

First, Why Give a Shit about JS?

If you want to make a website that responds to user interaction, build an app, or create an algorithm, you will need to make friends with JS.

3 Building Blocks

1. Numbers: Like 4, for example. Easy.

2. Strings: Letters A-Z and spaces. Numbers can also be used in strings, but strings are always wrapped in "quotes". "This is a string." and "As is this with a number 9".

3. Boolean: Works out to be true or false. A boolean could be something like 500 > 3 which is true, or 8 < 4 which is false.

Doing Stuff

Now that we know the 3 data types, you can use them to do simple things like:

  • Use the length property to measure the length of a string. "Cake".length would be 4.

  • Math: 2 + 8 would be 10. Use basic math operators: + - * / and ( ) to control order of operations. Modulo % tests divisibility and will divide the first number by thee second, returning the remainder. Ex: 17 % 4 would be 1.

  • Substrings display pieces of string and begin counting from 0. "cheeseburger".substring(0,5) would return "cheese".

Annoying Pop-Ups and More!
  • Confirm brings up a dialog box. confirm("Holy Shit!");

  • Prompts will prompt your user for an input. prompt("What is your name?");

Print It Out

Use console.log to "print out" results. You can test this in your browser. In Chrome, View > Developer > Javascript Console or ⌥⌘J. Type in: console.log(3 * 4). Hit return and see that the console returns the result of the equation, 12.

Comparisons

As we saw above with booleans, we can use comparison operators:

> Greater than

< Less than

<= Less than or equal to

>= Greater than or equal to

=== Equal to

!== Not equal to

We will venture into using comparisons with If/Else statements next. But last, another helpful tool in the javascript jungle is commenting your code! Comments are written with two forward slashes: //comments.

Read on to part 2.