JavaScript I
INFO 253A: Front End Web Architecture
Kay Ashaolu
JavaScript!
- 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!
Why learn JavaScript first?
- Truthfully, front end development is heavily dependent on JavaScript
- If a site doesn't need JavaScript, chances are that there's some low code tool that can produce the site without needing to know code
- Demonstrates the software engineering skills needed now to become a frontend engineer
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 website
- To power interactivity between the user and the website
- To communicate to external servers using APIs
So let's learn some JavaScript
- We are going to use our browsers to run our JavaScript
- This will be a little weird at first, but remember that the browser is the "executor" of the code that you write on the frontend
- Once we learn HTML/CSS, it will be more apparent how all of these technologies work together
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 pure JavaScript, the more you'll be able to build rich web applications
- Again, even though we are learning React in this course, the better you know the JavaScript language, the better you will understand React
Before we start: code editor
- You will need an editor that can save files in plain text
- Better if you find something that can highlight code to make it much more readable
- My tool of choice (currently): Visual Studio Code
How to run JavaScript
- Create an HTML file called "index.html"
- Add the following text in the file:
<html>
<head>
<title>Learning JavaScript</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
What did we just do?
- You just created an HTML file that is blank, but tells the browser to execute "script.js", located in the same location as this html file
- Remember the HTML file is the first content to get to the browser to be parsed to build the DOM.
- Next, because the "script" tag is present, it signals to the browser to retrieve "script.js", so another request is made to retrieve that
- Once it is received, "script.js" is executed line by line
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
Variables
- Declare with let to scope correctly
- Weak, dynamic typing
let a = 3;
let b = 5;
let c = a + b;
Strings
let a = "hello";
let b = "world!";
let c = a + b;
Arrays (Lists)
let list = [2,3, "KAY"];
alert(list[2]);
Objects
let titles = {
info253: 'Web Arch',
info256: 'Applied NLP'
};
alert(titles.info253);
let schools = {
berkeley: {info253: 'Web Arch'},
stanford: {cs101: 'Intro CS'}
};
alert(schools.stanford.cs101);
But Note
- We will go over all of these types through writing functions
- You don't have to do this, but you should do this
- It is extremely important to be comfortable with writing and using functions
Functions
So what is a funciton
- 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
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);
alert(output);
Our First Function
Our First Function
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
Questions?
JavaScript I - Frontend Webarch
By kayashaolu
JavaScript I - Frontend Webarch
Course Website: https://www.ischool.berkeley.edu/courses/info/253a
- 702