Fundamentals of Javascript

Please Click on this link to access the resource folder for this lesson.

Relationship between HTML, CSS, & JS
  • HTML gives the web page structure and purpose
  • CSS makes it looks aesthetic with styling
  • JS makes the page dynamic and interactive

Uses of JavaScript

  • Adds interactivity to web pages
  • Run codes in response to certain events
  • JavaScript has a powerful Application Programming Interface (APIs), hence access to numerous complex features

What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.

APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building.

There are two types of APIs available:

  •  Browser APIs: Built and shipped with Browsers
  • Third party APIs: Not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example: Google maps API, Twitter API

JavaScript can run on:

  • Browsers, using the JavaScript Virtual Machine (JVM).
  • Servers, using runtimes like Nodejs
  • Any devices that have the Javascript engine

JS Execution

JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called the JavaScript engine.

The browser has an embedded engine sometimes called a “JavaScript virtual machine”. Different engines have different “names” for their JVM. 

The terms above are good to remember because they are used in developer articles on the internet. We’ll use them too. For instance, if “a feature X is supported by V8”, then it probably works in Chrome, Opera and Edge.

Different platforms have different “names” for their JVM

  • V8 – in Chrome, Opera and Edge.
  • SpiderMonkey – in Firefox.
  • Chakra” for IE
  • Nitro” and “SquirrelFish” for Safari, etc.

Embedding JS

JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses <link> elements to apply external stylesheets and <style> elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the <script> element.

Adding JavaScript to your Webpage

  • Internal JavaScript: JS code added inside HTML files
  • External JavaScript: External JS code linked in HTML file

Internal Javascript

  • Write and run JS inline HTML by saving the file and loading in the browser.
  • Order matters, so if you add the script before the button, you get an error. Show an example here
  • Show an example of  the “DOMContentLoaded” event. Order does not matter here, as script code is executed after HTML content is loaded.

External Javascript

  • This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.
  • Note the defer option? I does the same thing as the “DOMContentLoaded” 
  • Order matters when loading scripts. Show examples.

Statements are syntax constructs and commands that perform actions.

  • We’ve already seen a statement, alert(‘Hello, world!’), which shows the message “Hello, world!”
  • We can have as many statements in our code as we want. Statements can be separated with a semicolon.
  • A semicolon may be omitted in most cases when a line break exists.
  • JavaScript interprets the line break as an “implicit” semicolon. This is called an automatic semicolon insertion.

Comments

Comments are used to describe code.

  • As time goes on, programs become more and more complex. It becomes necessary to add comments which describe what the code does and why.
  • Comments can be put into any place of a script. They don’t affect its execution because the engine simply ignores them.

Variables

A variable is a “named storage” for values or data

  • Use real-life analogy of a named ingredients in a kitchen
  • JavaScript application needs to work with information. E.g Catalogue list holding shopping items, Chat application holding messages, names etc
  • Create a variable using the let and const keyword. We’ll take about their difference later.
  • Can declare multiple variables in single line separated by comma
  • Talk about var and its availability in older script. Discourage it’s usage

Variables (Naming conventions)

  • The name must contain only letters, digits, or the symbols $ and _ . Required
  • The first character must not be a digit. Required
  • Use camelCase when variables contain multiple words Optional
  • Case matters: Variables named apple and AppLE are two different variables.
  • Reserved Names/Keyword cannot be used. E.g let let = 5; let return = 5; 

Variables (const)

  • Variables declared with const do not change and cannot be re-assigned
  • It is a convention in JS to CAPITALIZE const variable names
  • Separate multiple words with under_score

Variables (let)

  • Variables declared with let can change and be re-assigned
  • Variable names should be descriptive and it’s intention should be clear
  • It is recommended to use camelCase for long variables
  • A variable name should have a clean, and meaning obvious.
  • Variable naming is one of the most important and complex skills in programming.
  • Some good-to-follow rules are:
    • Use human-readable names like userName or shoppingCart.
    • Rarely use abbreviations or short names like a, b, c
    • Make names maximally descriptive and concise. Examples of bad names are data and value..
    • Agree on terms within your team and in your own mind. If a site visitor is called a “user” then we should name related variables currentUser or newUser instead of currentVisitor or newManInTown.

Back to Lesson
Scroll to Top