JavaScript Part One – Mad Scientist

I wanted to re-familiarize myself with pieces of coding I have been introduced to but not properly taught. First stop of the list is the humble JavaScript.

For my learning tools, I’ve chosen both Codecademy and Lynda.com. Codecademy served me very well when I was first learning HTML, so this is my service of choice.

The first function we are taught is a simple text to screen command.

console.log(“Hello!”);

This will display simply the word ‘Hello!’.

Next up are some key terms:

Photo 31-01-2018, 17 23 18

  • Strings – Any grouping of Keyboard characters (Letters, Spaces, Numbers or Symbols) surrounded by single quotes (‘) or double quotes (“).
  • Numbers – Any number, including numbers with decimals: e.g. 4, 1516, .002, 23.42.
  • Boolean – Either true or false with no quotations.
  • Null – Can only be null. It represents the absence of value.

Next up are math functions:

Photo 31-01-2018, 17 31 58

  • Add: +
  • Subtract:
  • Multiply: *
  • Divide: /

Ok, Data types and build-in methods:

photo-31-01-2018-17-35-19.jpg

Data Types:

  • Instance – and individual case (or object) or a data type.
  • Length – the number of characters in an instance. (Example: console.log(‘Hello’.length); will return 5.

Build-in Methods:

  • .toUpperCase() – returns a string in all capitals.
  • .startsWith() – returns a boolean based on the letter input in brackets.
  • .trim() – trims blank spaces in an instance.

Time for a little more math. It will come in handy, I know it will:

Photo 31-01-2018, 17 42 35

  • console.log(Math.random()); – returns a random number between 0 and 1.
  • console.log(Math.random()*50); – returns a random number between 0 and 50.
  • console.log(Math.floor(Math.random()*50)); – returns a random WHOLE number between 0 and 50.
  • console.log(Math.ceil(43.8)); = 44  – returns the smallest integer greater than or equal to a number. In this case 43.8.
  • Integer – A whole number
  • console.log(Number.isInteger(2017)); – returns a boolean based on weather the number in brackets is a whole number.

Commenting out! The most useful thing in programming! Especially for keeping notes when working.

Photo 31-01-2018, 17 51 06

Variables are a major part of JavaScript. The few times I needed JavaScript it was for functions. There are two major types of variables in JS. const and let.

  • const – short for constant, is a JavaScript keyword that creates a new variable with a value that CANNOT be changed.
  • let – Variables that can be reassigned.

For example:

const myName = ‘Arya’;

console.log(myName);

This will return: Arya.

  • myName – name of a variable, in this case a const variable.
  • = – assignment operator
  • Arya – Value assigned to variable.

When adding them all together, we can use +. For example:

let favoriteAnimal = ‘Fox’;

console.log(“My favorite animal is ” + favoriteAnimal + “.”);

This will return: My favorite animal is Fox.

What have we learnt so far (according to Codecademy):

  • Variables hold reusable data in a program.
  • JavaScript will throw an error if you try to reassign cont variables.
  • You can reassign variables that you create with the let keyword.
  • Unset variables store the primitive data type undefined.
  • Mathmatical assignment operators make it easy to calculate a new value and assign it to the same variable.
  • The + operator is used to interpolate (combine) multiple strings.
  • In JavaScript ES6, backticks (`) and ${} are used to interpolate values into a string.

Taking what I have learnt, I wanted to start to implement and experiment myself. However, when trying to get code to appear in Dreamweaver (the only program I’m familiar coding in), I found that I couldn’t get my simple code to appear.

Screenshot (151)

So now the task at hand is sorting this problem before moving forward. Searching through a few forums and found them a little tricky to navigate especially with horrible text formatting and a lack of visual explanation. This leads me to YouTube. First video found is clear but still doesn’t solve my problem.

While searching, I did discover the Codecademy forum which included a number of beginners projects to try once I have figured this out. Good to know.

Screenshot (153)

This next video I came across stated to show me a few things I didn’t know. Such as the alert function in HTML. Still something new, but not what I was learning in Codecademy. I shall quickly try what he has described.

Test run:

This worked fine. Now on to see if I can get the rest to work as I originally learnt it.

Success! I separated the JavaScript in my HTML code to it’s own file. alert.js. This was then linked to the HTML using http://alert.js and I recieved the same outcome. A pop up with ‘Hello!’. In hindsight, this should have been obvious to me. Still not the console.log(‘Hello!’); I wanted to use, but maybe I am getting too ahead of myself. Perhaps the function needs to be added to a text enabled div box to properly display. Will continue with JS lessons on Codecademy and try the projects listed in the forum.

 

Advertisements

What's your thoughts?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s