javascript-gentle.md

Cookie clicker

HTML

A tag has a name and attributes

w3schools HTML Tags

HTML attributes

google "generate html attributes cheat sheet for beginners"

eg. src, href, width, height

Not all attributes apply to all tags

There are, however, global attributes that apply to ALL tags.

There are 2 relevant global HTML atributes for CSS and javascript, they are:

• id
• class

w3schools tutorial:

HTML Attributes

W3schools reference:

HTML Attributes

CSS refresher

google "generate css cheat sheet for beginners"

CSS

1. CSS rules Structure of CSS

selector { property: value; }

eg.

p {
  color: blue;
  font-size: 16px;
}

2. CSS Selectors (which HTML elements should CSS properties be applied to )

type selector:

<p>This will be green</p>
<p>So will this</p>

p {
  color: green;
}

ID selector:

<p id="boo">Only one element can have id equal to boo, and this will be green</p>

#boo {
  color: green;
}

class selector:

<p class="boo moo poo">This para will be green</p>
<p class="boo">So will this one</p>
<p class="moo">But not this one</p> 

.boo {
  color: green;
}

Difference between HTML and DOM

List to all of the first 80 seconds of:

HTML and DOM

HTML represents initial page view

DOM represents live page view

When you change the DOM, you change the page.

Javascript

What is a variable?

google "javascript values variables"

In JavaScript, variables are named containers used to store values. These values can be various types of data, such as numbers, text (strings), booleans (true/false)

Javascript variable

Connection between Javascript and HTML

What can javascript do to HTML

google "what can javascript do to html"

JavaScript interacts with HTML through the Document Object Model (DOM)

How does javascript do that?

With the document object

Give me an example?

<p id="boo">Change me somehow</p>

const element = document.querySelector("#boo")
element.textContent = "I will change you"

My blockly anfd javascript site

Javascript playgrounds

1. VSCode with Live Preview extension
2. Chrome->right click-> inspect-> console
3. My own site: Blockly and javascript
4. w3chools

A value cannot change, a variable can change