OPEN COURSE

MODULE 7 - Converting data types

You can convert and combine data types. You can use the + operator in JavaScript to convert the numeric values into string values, which also combines the expressions into a string.

I-We-You Do

Copy and paste code below in repl.it.

let stringVar = 'I want to become a software engineer by '

let numVar = 2021

let combined = stringVar + numVar

typeof(combined) // => 'string'

console.log(combined) // => I want to become a software engineer by 2021

This Repl.it demonstrates that if you combine a number with a string using the + operator, the resulting value will be a string.

This process of automatic conversion is called coercion, which means the number was coerced into a string. But with all other operators, JavaScript does not convert numeric values into strings.

Linking HTML to Javascript

As you progress in your JS learning, you would need to connect your HTML code with JS code. In order for Javascript to work, you need to add < script src="index.js" > < /script> tags in your HTML codes

Overwrite Variables

To overwrite variables means that you can change the values of variables as needed. You can assign new values to your variables. See Example below and practice.

// Set the variable 'gaming' to "fun"

let gaming = "fun";

// Print the variable 'coding' to your console

console.log("gaming is " + gaming); //=> "gaming is fun"

I-We-You 2

Try it! Copy and paste the above in repl.it below:

Now clear the code you pasted and declare a variable using let and output variables "gaming is addictive and obsessive" using console.log below:

// Set 'gaming' to "addictive and obsessive"

let gaming = "addictive and obsessive";

Take Home Practice

In the repl.it below:

Copy and paste the code given and print the variable 'coding' to your console

Use the variable below let coding = "cool";

// Use another variable below let coding = "trendy and fun";

//Expected Output for number 1 //-> "coding is cool"

//Expected Output for number 2 //-> "coding is trendy and fun"

Remember once you are done with your assignment, submit link of your repl.it code and your full name Submit Here

MODULE 7 - Converting data types

You can convert and combine data types. You can use the + operator in JavaScript to convert the numeric values into string values, which also combines the expressions into a string.

I-We-You Do

Copy and paste code below in repl.it.

let stringVar = 'I want to become a software engineer by '

let numVar = 2021

let combined = stringVar + numVar

typeof(combined) // => 'string'

console.log(combined) // => I want to become a software engineer by 2021

This Repl.it demonstrates that if you combine a number with a string using the + operator, the resulting value will be a string.

This process of automatic conversion is called coercion, which means the number was coerced into a string. But with all other operators, JavaScript does not convert numeric values into strings.

Linking HTML to Javascript

As you progress in your JS learning, you would need to connect your HTML code with JS code. In order for Javascript to work, you need to add < script src="index.js" > < /script> tags in your HTML codes

Overwrite Variables

To overwrite variables means that you can change the values of variables as needed. You can assign new values to your variables. See Example below and practice.

// Set the variable 'gaming' to "fun"

let gaming = "fun";

// Print the variable 'coding' to your console

console.log("gaming is " + gaming); //=> "gaming is fun"

I-We-You 2

Try it! Copy and paste the above in repl.it below:

Now clear the code you pasted and declare a variable using let and output variables "gaming is addictive and obsessive" using console.log below:

// Set 'gaming' to "addictive and obsessive"

let gaming = "addictive and obsessive";

Take Home Practice

In the repl.it below:

Copy and paste the code given and print the variable 'coding' to your console

Use the variable below let coding = "cool";

// Use another variable below let coding = "trendy and fun";

//Expected Output for number 1 //-> "coding is cool"

//Expected Output for number 2 //-> "coding is trendy and fun"

Remember once you are done with your assignment, submit link of your repl.it code and your full name Submit Here

A data type is a value that variables can have in a given programming language. Different kinds of data types can do different tasks.

Data types can be any of the following-

Number

String

Array

Object

Boolean

…boolean seems to be the easiest.

Example

let bool = true;

let bool= false;

The only two options for a boolean are true or false. And they are used in if() statements to decide which statement should be executed.

If Statement Example

if(true){

else{

// if value is false, this block runs

Within if statements, other variable values can evaluate to true or false. Once the value is used in the if() statement, JavaScript will evaluate whether it is true or false.

In JavaScript, the syntax for a string is a series of characters inside quotation marks. The quotes can be either single ' or double ".

But you must use the same type of quotation mark at the beginning and the end of a string—you can't start a string with a single quote and close it with double quotes.

I-We-You Do

Copy and paste code below in the repl.it

// declare a string with quotes

let city = "Seattle";

let state = "Washington";

How to camelcase

In JavaScript, when combining two words we use camelCase. A camelCased variable name starts with a lowercase letter for the first word, but every word after the first word begins with a capital letter. All the examples below are camelCased.

thisIsAnExample;

alsoThisIsAnotherExample;

andThisAlso;

Take Home Practice

1. Correct the following using camelcasing in a document:

let = "Salad";

let 2ndMeal = "Pasta";

let thirdMeal = "Jollof Rice;

let fourth = "Ice Cream";

2. In the repl.it below, Guess what would be printed

Remember once you are done with your assignment, submit link of your repl.it code and your full name Submit Here

MODULE 9 - Simple HTML Web Templates

Let's explain the core HTML elements common in every HTML page.

The challenges so far have covered specific HTML elements and their uses. However, there are a few elements that give overall structure to your page, and should be included in every HTML document.

This first line of HTML code declares this document as an HTML5 web page and is required to be the first line of code in every HTML5 web page. This is the only HTML tag written in uppercase.

At the top of your document, you need to tell the browser which version of HTML your page is using. Here's an example of the page structure:

< !DOCTYPE html >

< html >

Your HTML code goes here

< / html >

NOTE where all your coding languages go

index.html: All your HTML will be written here.

style.css: All your CSS code will be written here.

script.js: All your JS code will be written here.

I-We-You Exercise

In the repl.it, add a DOCTYPE tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing html tags, which wrap around an h1 element. The heading can include any text.

With repl.it, satrting off in HTML has been made easier. Let’s create a new project and dig into the code to properly understand it for all future HTML/CSS/JS projects.

Step 1 - Create a New Repl.

Step 2 - Select the HTML/CSS/JS framework and give your repl project a name— “MyFoodWebsite”

Step 3 - Recognize that a new HTML/CSS/JS project in Repl will provide you three files in your project directory.

Title

< title>repl.it< /title>

This element will display the page title at the top of the web browser or page tags. Change title name to My Website.

Body

< body> ... < /body>

The body contains all of the HTML code for the text, images, links, and containers used for the page structure. All of the HTML code you have been writing so far will be added here.

Script

< script src="script.js" >< /script>

As mentioned before, similar to how the link element connects the CSS file, this script pulls in the JavaScript code written in the script.js file.

It is best to add your HTML code for the web page above this line of code—keeping this code at the bottom of the HTML page and just before the end tag of the HTML element because it allows the web page to load first and then the JS code will load last.

NOTE - We will not be adding JavaScript to our HTML & CSS projects for now.

Take Home Practice

Now you create your web templates, add all your code you have done in the past html/css assignment using steps in a repl.it:

Click 'Open in' below to start.

Remember once you are done with your assignment, submit link of your repl.it code and your full name Submit Here