Coding and Inspecting...

<h2> HTML </h2>

Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

This is the basic layout for a webpage. It is how we present content in a structured way.

VOCAB:

• • Tag : <p> Everyhting in HTML is structured by Tags. </p>

These are things like headers, paragraphs, page breaks, etc.

• • Nesting: subgroupings of tags and information.

TRY IT OUT HERE

Let's inspect a webpage and look at the HTML. What can we change on the website by changing the HTML code?

• • • The selector points to the HTML element you want to style.

    • The declaration block contains one or more declarations separated by semicolons.

    • Each declaration includes a CSS property name and a value, separated by a colon.

    • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

• Element: specificly named and defined parts of your webpage; like the background color.

• Selectors: are the keywords that select the content you want ot edit.

TRY IT OUT HERE

So now that we know the basics...

Let's practice using bitsbox coding!

1. Click the Bitsbox coding link HERE

2. Complete the first coding tutorial called 'Food Fight'. If you have any questions, be sure to ask!!

3. Choose a page from the BitsBox file folder (at Mrs. Yelenick's desk)

4. Review the code and write it into your notebook.

5. Make notes on what kinds of JavaScript (line script) you see and what EACH line of code means. ***If you don't know, leave it blank to fill in once you test.***

6. Show your notes to Mrs. Yelenick for a sign off.

7. Now, try the code you chose from the BitsBox file folder from Mrs. Yelenick. It may not work the first time, so be sure to follow the code EXACTLY!

8. Once your program works, try changing things around to see what you can do using JavaScript.

9. Show Mrs. Yelenick for a sign off.

10. If there's time, try another page from the file folder. How is this program the same and/or different from your last program?

Java Script

JavaScript, often abbreviated as JS, is a high-level, interpreted scripting language that conforms to the ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions. It works directly in conjunction with CSS and HTML for most interactive websites.

This makes your webpage interactive with pop-ups, clickable buttons, sounds, etc.

VOCAB:

• Variables: the containers for storing data lists. Some of the types of variables are:

String - stores text, such as "Hello". String values are surrounded by double quotes

int - stores integers (whole numbers), without decimals, such as 123 or -123

float - stores floating point numbers, with decimals, such as 19.99 or -19.99

char - stores single characters, such as 'a' or 'B'. Char values are surrounded by single quotes

boolean - stores values with two states: true or false

• Functions: a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).

• Array: a list of variables (numbers, objects, etc.)

TRY IT OUT HERE