Learn Programming / JavaScript Basics

The “script” tag

JavaScript programs can be inserted into any part of an HTML document with the help of the <script> tag.

For instance:

<!DOCTYPE HTML>
<html>

<body>

  <p>Before the script...</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>...After the script.</p>

</body>

</html>
alert("Thanks for your input!");

Let’s say my name is Mark, and I want to store this information in the browser.

A variable is created when you write var (for variable) followed by the name that you choose to give it. It takes on a particular value when you assign the value to it. This is a JavaScript statement that creates the variable name and assigns the value “Mark” to it

var name = "Mark";

Now the variable name refers to the text string “Mark”. Note that it was my choice to call it name. I could have called it myName, xyz, lol, or something else. It’s up to me how to name my variables, within limits.

name refers to “Mark”. Then I come along and code the line…

name = "Ace";

Before I coded the new line, if I asked JavaScript to print name, it printed… Mark But that was then. Now if I ask JavaScript to print name, it prints… Ace

Alerting the name variable!

alert(name);

What do the quotes mean, and what happens if I omit the quotes? The syntactic difference between variables and text strings is that variables are never enclosed in quotes, and text strings are always enclosed in quotes.

A string isn’t the only thing you can assign to a variable. You can also assign a number.

var weight = 150;

Having coded the statement above, whenever you write weight in your code, JavaScript knows you mean 150. You can use this variable in math calculations. If you ask JavaScript to add 25 to weight…

var newWeight = weight + 25;
alert(newWeight); // will say 175

JavaScript can also handle an expression made up of nothing but variables. For example

var originalNum = 23;
var numToBeAdded = 7; 
var newNum = originalNum + numToBeAdded; // newNum equals 30

Working with strings

suppose you wanted to personalize a message. In another part of your code you’ve asked the user for her name and assigned the name that she entered to a variable, userName. (You don’t know how to do this yet. You’ll learn how in a subsequent chapter.) Now, you want to combine her name with a standard “Thanks” to produce an alert that says, for example, “Thanks, Susan!” When the user-provided her name, we assigned it to the variable userName. This is the code.

alert("Thanks, " + userName + "!");

Using the plus operator, the code combines—concatenates—three elements into the message: the string “Thanks, ” plus the string represented by the variable userName plus the string “!” Note that the first string includes a space. Without it, the alert would read, “Thanks,Susan!”. You can concatenate any combination of strings and variables, or all strings or all variables. For example, I can rewrite the last example this way

var message = "Thanks, ";
var banger = "!";
alert(message + userName + banger);

Trick question:

What will be alerted here

alert("2"+"2");

Now you try it:

TIP: Use this link http://x.co/jslinks to automatically open all the following items in new tabs

Prompts

var spec = prompt("Ask some question?", "default value?");

Prompt code is like alert code, with two differences.

  • In a prompt, you need a way to capture the user’s response. That means you need to start
    by declaring a variable, followed by an equal sign.
  • In a prompt, you can specify a second string. This is the default response that appears in
    the field when the prompt displays. If the user leaves the default response as-is and just
    clicks OK, the default response is assigned to the variable. It’s up to you whether you
    include a default response.

As you might expect, you can assign the strings to variables, then specify the variables
instead of strings inside the parentheses.

var question = "Your species?";
var defaultAnswer = "human";
var spec = prompt(question, defaultAnswer);

The user’s response is a text string. Even if the response is a number, it comes back as a
string. For example, consider this code.

var numberOfCats = prompt("How many cats?"); //enter 5
var tooManyCats = numberOfCats + 1; // will get 51

To fix this problem we can use a JS helper function called parseInt, which takes a string and tries to figure out what the number would be inside the string

var numberOfCats = prompt("How many cats?"); //enter 5
var tooManyCats = parseInt(numberOfCats) + 1; // will get 6

If Statements

Suppose you code a prompt that asks, “Where does the Pope live?” If the user answers correctly, you display an alert congratulating him. This is the code.

var x = prompt("Where does the Pope live?");
if (x === "Vatican") {
  alert("Correct!");
}

If the user enters “Vatican” in the prompt field, the congratulations alert displays. If he enters something else, nothing happens. (This simplified code doesn’t allow for other correct answers, like “The Vatican.” I don’t want to get into that now.)

So let’s make a trivia game!

var score = 0;

var x = prompt("Where does the Pope live?");
if (x === "Vatican") {
    alert("Correct!");
    score = score + 1;
} 

var z = prompt("Where does Angel live?");
if (z === "Santa Barbara") {
    alert("Correct!");
    score = score + 1;
}

alert("You got a score of: " + score + " out of 2");

What if we want something that DOES NOT equal the other value?

var x = prompt("Where does the Pope live?");

if (x === "Vatican") {
    alert("Correct!");
    score = score + 1;
} 
if (x !== "Vatican") { 
    alert("Sorry incorrect!"); 
} 

So if it !== doesn’t equal we do something else. But typically it’s easier to say “IF this then do that ELSE do the other thing” which looks like this

var x = prompt("Where does the Pope live?");

if (x === "Vatican") {
    alert("Correct!");
    score = score + 1;
} else {
    alert("Sorry incorrect!"); 
} 

That’s much better.

Functions

Sometimes we want to be able to run the same code one or many times, to do this we can store a set of code inside a function and call it at a later time. This also keeps our code organized!

// Create a function
function nameMe() {
    alert("My Name is Angel");
}

// Call the function to run the code inside it
nameMe();

Functions become really useful when you also pass data inside of them with a parameter like so:

// Create a function
function nameMe(name) {
    alert("My Name is " + name);
}

// Call the function to run the code inside it
nameMe("Angel");

You can even pass the value we got from a prompt!

// Create a function
function nameMe(name) {
    alert("My Name is " + name);
}

var setMyName = prompt("What is your name?");
nameMe(setMyName);

Handling a click

The easiest way to handle a click is the use an html attribute called onclick

See the Pen bzGOXa by Angel Grablev (@agrublev) on CodePen.32466

So we create a div, then simply add the onclick attribute with a value that will call our function when clicked like this:

<div onclick="quiz()">CLICK</div>

<script>
function quiz() {
    var score = 0;

    var x = prompt("Where does the Pope live?");
    if (x === "Vatican") {
        alert("Correct!");
        score = score + 1;
    }

    var z = prompt("Where does Angel live?");
    if (z === "Santa Barbara") {
        alert("Correct!");
        score = score + 1;
    }

    alert("You got a score of: " + score + " out of 2");
}
</script>

And if you have time for fun do this tutorial:

https://www.codeavengers.com/web-development/100#1.1

It provides video guides AND a solution button up to the top right!

Additional exercises/Reading materials

Once you feel comfortable with all that give this article a look:

And watch this video:

TO BE ADDED LATER (IGNORE):

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

3 Frameworks In Class Exercise

In class framework assignment

Getting a simple website built with 3 frameworks should be a great introduction!

Directions

  • Create a new Visual Studio folder/project
  • Create 4 HTML files
    • index.html
      • Which should only contain 3 links to the other 3 HTML files
    • bootstrap.html
    • bulma.html
    • uikit.html

Bootstrap

https://codepen.io/agrublev/pen/bQmxJw

UIKit

Final look

https://codepen.io/agrublev/pen/vQVVgO?editors=1000

Bulma

The final product should look like this

https://codepen.io/agrublev/pen/XyxxxQ?editors=1100

 

Extra Credit / Additional Practice

Improve the websites as they can all use a container to wrap them at the very least. Also maybe try to get the javascript working? Should be as easy as adding the styling 🙂

Exercises and References for CSS Intro #2 Class 12

The Website Generator

http://webdevninja.surge.sh/#/

Additional CSS topics

 

Css Introduction

CSS Reference

Let’s start with some sample div that has a class:

<div class="nameOfDiv">
    Some text
</div>

Now in our stylesheet (or in a codepen use the CSS section and enter your CSS code) we select this specific div with the selector for class:

.nameOfDiv {
   /* We'll enter our declarations here */ 
}

Inside the curly brackets, we can enter a new declaration on each line. Here is a nice overview of the possible properties you can specify:

Declaration key Declaration values Explanation of property
background black, red, orange, pink, tomato, green, white, etc Sets the background color of our element. It takes in a name of a color.
color same as background, a named color Set the text color of the element (all children of the element will inherit this color!)
width % (of the page) or pixels using px. 30% or 300px Sets the horizontal size of our element
height % (of the page) or pixels using px. 30% or 300px Sets the vertical height of our element
padding Preferably use pixels, but can also take in %. 15px Sets the inner padding of an element
margin Preferably use pixels, but can also take in %. 15px Sets the outer margin of an element
display block, inline, inline-block, flex Allows us to choose how we want our element to display on the page. Flex makes all immediate children into columns.

Now let’s combine all these declarations inside our CSS selector:

.nameOfDiv {
    background: orange;
    color: white;
    width: 150px;
    height: 50px;
    padding: 15px;
    margin: 10px;
    display: inline-block;
}

Great, now the result should look like this:

If we simply add a couple more div’s with the same name the result would be:

This is thanks to the power of an inline-block element which gets the benefits of block (padding/margin) and inline by showing multiple elements on the same line!

An alternative way to accomplish the same result without using display inline-block is to use flex. We need to add a parent that wraps the three div’s nameOfDiv and make the parent display flex. Like this:

<div class="flex">
    <div class="nameOfDiv">Some text</div>	
    <div class="nameOfDiv">Some text</div>	
    <div class="nameOfDiv">Some text</div>	
</div>

And the CSS would be:

.flex {
    display: flex;
}
.nameOfDiv {
    background: orange;
    color: white;
    width: 150px;
    height: 50px;
    padding: 15px;
    margin: 10px;
}

Notice that nameOfDiv is no longer display inline-block. However, with the flex parent we still see:

Feel free to play with the flex example here https://codepen.io/agrublev/pen/ZqdGXR

Advanced CSS Techniques and Properties

There are many important ways CSS can be used to make your website look beautiful. We’ll start with some special background properties and go all the way to advanced website layouts. Let’s get started.

Background magic

There are many different things you can do with backgrounds, set a color, set an image, make it repeat, change its size, change the position, and much more. So let’s look at the different examples.

Background Color

background-color is the simplest one, allowing you to change the background of an element like this

See the Pen simple-background by Angel Grablev (@agrublev) on CodePen.32466

Background Image

background-image allows us to add an image to the background like this

See the Pen background-image by Angel Grablev (@agrublev) on CodePen.32466

Okay let’s pause here as a lot of interesting things just happened we need to pay attention to.

  1. If you have an empty element like in the example above you will not see the background image unless you set a width and height, simply because an element with no content is invisible (0 height means you can’t see it). You can alternatively add padding as well, but height/width is preferred as you should know the dimensions of the image
  2. The background logo image we set seems to appear twice! What happened here? Well there is a background property called background-repeat which is enabled by default, so our background image will repeat down and right to fill the size of the element like this

  3. We’ll tackle the repeat issue below

Background Repeat

background-repeat is enabled by default, to disable it we must set no-repeat as the value like this:

.background {
    background-image: url(http://ucsbwebdev.college/first/logo.png);
    background-repeat: no-repeat;
}

Great, so we’ve applied two background declarations and now we have an image that does not repeat. But what if we also want to have a background color behind the logo in case the element has a bigger width/height than the image itself? Simply apply the background-color as well like this:

See the Pen background-repeat-color by Angel Grablev (@agrublev) on CodePen.32466

Background Size

background-size is used to specify an alternative set of dimensions to the image. Let’s consider the following three examples:

See the Pen background-size-examples by Angel Grablev (@agrublev) on CodePen.32466

In example1 we force the width and height of the image to be width = 200px and height = 20px and the image becomes a bit stretched as we’re not keeping the original image’s proportions

In example2 we’re stating that we want the width = 30% which is not based on the width of the image but instead uses the width of the element (which in our case is set to 300px, so 30% is rougly 100px). Because we only define the width the height is actually automatically adjusted to keep the proportion of the image and does not stretch it.

In example 3 we set the width = 100% and the height = 100% meaning it will fit the container (element which has the background image) both horizontally and vertically stretching it to fit.

Now let’s get more advanced with some special background-size properties, consider the following examples:

See the Pen background-fit by Angel Grablev (@agrublev) on CodePen.32466

In example1 we use a property value called cover which will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off on direction. In our case, it cuts off a lot from the right side to fit it vertically. If the image was higher than wider it would cut off from the bottom instead.

In example2 we use the contain property value which resizes the background image to make sure the image is fully visible while filling the container as much as possible.

In example 3 we specify a width of 10px and a height of inherit, as soon as we set the width or height to be inherit the image will display in its original sizing.

Shorthand Properties

In many situations, we can use the shorthand properties to define a list of declarations in one line. For example, the background properties background-color, background-image, and background-repeat can easily be declared under a single background declaration like this:

.background {
    background: black url('http://ucsbwebdev.college/first/logo.png') no-repeat;
}

Also quite commonly we would not specify a margin or padding for each direction, instead would use a single declaration. To specify each direction we follow the following pattern top right bottom left or the way I remember it is using Never Eat Sour Wheat which stands for North East South West. Here are some examples:

.shorthand {
    margin: 100px 0 0 50px;
    padding: 50px 20px 30px 40px;
}

The result is equivalent to:

.shorthand {
    margin-top: 100px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 50px;
    
    padding-top: 50px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

Important Trick to Center an Element

Very often we want to have a large panel that contains all our website content, typically around 960px wide (fits in all desktop computer resolutions) which is centered. To do this we use a hack with the margin shorthand which looks like this:

See the Pen padding-margin-shorthand by Angel Grablev (@agrublev) on CodePen.32466

Or in a browser like this:

Common 3 Column Layout with Flex

See the Pen 3columnflex by Angel Grablev (@agrublev) on CodePen.32466

I’ve added a number of styling just to see it visually, but the important elements of this layout are as follows:

  1. .main-wrap has a width of 960px which is a standard and a margin: 0 auto; which keeps it centered on the page
  2. .columns is flex with a justify-content: space-between to keep the space between our columns even
  3. .left-col has a specific width, this is because very often we want a specific type of content which requires some minimal width
  4. .center-col has a % width which is easier to set than doing a calculation ourselves (subtracting from 960 yada yada) and we also add a shorthand margin which adds a left and right margins of 15px. This adds a nice visual spacing between the columns
  5. .right-col uses a special feature of flex, when you set a column to be flex: 1; it simply takes up as much space as there is left available to grow. If we did not set this it would look like this


    We don’t really want to have that much space between columns do we? With flex 1 it respects the margin from .center-col and takes up the remainder nicely.

Introduction to HTML – Class 3

w(please wait until class to go through this page!) In today’s lesson, we will begin to cover the basics of building websites. The first most important building block of a website is the HTML language, which allows us to give the browser instructions to render our website.

Exercise 1: Add some boxes (div tags)

In the below code editor add some div tags, and see your resulting boxes!

See the Pen MakeSomeBoxes by Angel Grablev (@agrublev) on CodePen.32466

Exercise 2: Add an image

Now let’s utilize the self closing tag for adding an image. Add the img tag and then add the src attribute with the value “http://x.co/myimg”

See the Pen MakeSomeBoxes by Angel Grablev (@agrublev) on CodePen.32466

Exercise 3: My webpage

Let’s build a simple website by simply adding a number of div tags with the appropriate class names.

32466

The final result should look like this:

32466

OLD Please sign up for repl by going to this link http://x.co/joinrepl There should be one assignment named “Simple Page for yourself” which is due next Tuesday!

Class May 10th Links & Homework

Quiz http://x.co/webquiz4

Links

 Homework

  • Get hosting/domain (if you can’t afford it email me and ill provide you a subdomain and FTP to use, I can install WordPress for you)
    • Install WordPress with a theme
    • OR Put your current web code there
    • OR Use canvas code I shared
  • You should have minimal
    • Your home page elements (at least the main ones)
    • One of the pages of your website almost done

HTML5 (Audio/Video) and CSS3 (animations, shadows and more)