This course will teach you full stack web development. That means you'll be able to build both the UI and the backend for your website.
In this class, you will (hopefully) learn:
Web development can be done on any computer, anywhere.
When you visit some website, your browser gets a lot of text, which it puts together to make the page that you see.
There are three main kinds of text that get sent to your browser:
<p>When you visit some site...<p>
html {
background-color: #eee;
font-family: 'Roboto', sans-serif;
font-size: 20pt;
}
var i=7+4-3*2;
var hello="Hello World!";
console.log(hello);
console.log("7+4-3*2 is " + i);
w
I personally recommend MDN, the Mozilla Developer Network, and Stack Overflow. I do not recommend W3Schools.
That being said, the best way to learn is to jump in and write some code. Press the F12
key (or if that doesn't work on Mac, press Cmd+Option+J
) to open your browser's developer tools. You can also right click the page and click Inspect. For now, any browser is fine, but if you're going to do a lot of web development, you should be using either Chrome or Firefox. You can enter JavaScript code in the console tab.
HTML defines the layout of a web page. You can think of it as defining nested boxes which rendered from the top to the bottom of the page.
The above page is an example of a layout that can be created with some simple HTML and CSS.
In most programming languages, variables are at the core of your code. They are places to put information that you will use later in your program, whether that information is a number, some text, a list of values, or a new kind of data you make up on your own.
Creating JavaScript variables is pretty straightforward. Use var
before creating a new variable, and once a new one is created, anything can be put in it, namely numbers and strings. To put something in the variable, use =
. Some examples:
var a=5;
var b=8;
var c="Hello World!";
a="Hi World!";
c=3.14;
We can also use basic math operations. Namely, +. -. *, and / work pretty much as expected with numbers and are called binary operators.
5+8.3 //returns 13.3
var frac=3/5 //puts 0.6 in frac
4*(7-6+5) //returns 24
3.7+2.5*5 //returns 14.7
div="a" + "bc" //Reassigns frac to "abc"
They work a little like functions: they take two inputs and give you back the result in its place. These pieces of code that the computer simplifies for you are called expressions. They're the basic building blocks of your code.
In any programming language, it's important to make decisions based on some external factor, often the user. To do this, we use booleans, which are either true or false. They're almost always used to test if something is true, and then execute some code based on that. We can compare two numbers with binary operators like >, <, >=, and <=. You can also use the boolean operators !, &&, and || to combine and change your conditions.
4>=6 //returns false
2<3 || 5<=3 //returns true
!(4.5>5 && 4>3) //returns false
However, equality is a bit more complicated, since = was already taken for the assignment operator. JavaScript uses == and ===. == tries to convert both values to the same type before comparing, while === doesn't.
3=="3" //returns true
3==="3" //returns false
3===3 //returns true
JavaScript is weakly typed, so that means that you can try to convert anything to anything else, including a boolean. If you do, only 0, NaN, and "" will return false, or be "falsey". There are a few more falsey values, but those are the only strings and numbers that are falsey.
We learned about three kinds of data that JavaScript can work with in variables: numbers, strings, and booleans. We also learned how to use these data types in expressions to have our program do basic manipulation of that data. Those expressions often have operators in them that tell our program what we want to do with our data.
The type of data we're working with isn't clearly defined when we write our code, so we have to keep in mind that we can mix types. That's sometimes what you want, but remember to keep it in mind. In more complicated programs, it results in some problems.
Thanks for coming! Let me know what you thought about this class by filling out this anonymous survey.