JavaScript Basics I

Kay Ashaolu


  • A fully featured programming language
  • Used to be only for the browser, used along with HTML and CSS
  • Now used on web servers and for Application Program Interfaces (APIs)
  • Great example of composability!

JavaScript: powering your pages

  • JavaScript brings a website to life
  • No need for a server to execute by the browser
  • Pop-ups, drop down navigation
  • Form validation, animation
  • Application development

JavaScript: powering your servers

  • JavaScript is used to power the servers that launch websites! (NodeJS)
  • No longer considered a "play" language

JavaScript: powering your apis

  • API: Application Program Interface
    • We will not cover this in this class
  • JavaScript is not just reserved for building web pages
  • JavaScript can power pure back end functionality

We will be using JavaScript

  • To build our web page

So let's learn some JavaScript

  • We are going to use our browsers to run our JavaScript

What this is not

  • This is not an exhaustive review of the JavaScript programming language
  • One goal is to get you familiar with the features of the language
  • Another goal is to give you the opportunity to ask questions
  • The better you know JavaScript, the more you'll be able to build rich web applications

How to run JavaScript

  • To link a JavaScript file to an HTML web page use the <script> tag
  • <script src="../js/script.js"></script>

Variables? Data types?

  • A variable is an empty space holder for a future value
  • There are a few types of values that JavaScript uses
    • Numbers and Booleans (true or false)
    • Strings or a sequence of characters
    • Functions
    • Arrays (lists of variables) and Objects


  • Declare with let to scope correctly
  • Weak, dynamic typing
let a = 3;
let b = 5;
let c = a + b;


let a = "hello";
let b = "world!";
let c = a + b;

Arrays (Lists)

let list = [2,3, "KAY"];


let titles = {
    info253: 'Web Arch',
    info256: 'Applied NLP’
let schools = {
    berkeley: {info253: 'Web Arch'},
    stanford: {cs101: 'Intro CS’}

But note

  • We will go over all of these types through writing functions
  • It is extremely important to be comfortable with writing and using functions


So what is a function?

  • Think of a function as a black box, where you put things in (inputs) and out comes a result (output)
  • It's a black box because you don't necessarily need to know how it's converting the inputs
  • The parameters are the inputs, the return statement defines the output

What is a function?

Function Syntax

let add = function(a, b) {return a + b;}
let c = add(2, 7)
/* c is now 9 */

let arithmetic = {add: add, subtract: function(a, b) {return a - b;}};
let d = arithmetic.subtract(11, 4);
let e = arithmetic.add(0, 3);
/* d is now 7; e is now 3; */


Our first function

function helloWorld(first_name, last_name) {
	let message = "Hello World " + first_name + " " + last_name;
	return message;

let first = prompt("Enter your first name");
let last = prompt("Enter your last name");
let output = helloWorld(first, last);

What does this function do?

What did that function do?

  • Declared a function that we put in two values or inputs: (first name and last name)
  • The function declared a variable (message) that contains the string "Hello World [your first name] [your last name]"
  • After it's done, it will produce one value or output: (the message) and return it
  • We ask the user for their first and last name, and print out the result from the function

More to come

  • Conditionals
  • For and While loops
  • Arrays
  • Objects

For the non programmers here stay with me, learn this and it will empower you throughout this course and beyond