JavaScript Fundamentals

What is the difference between HTML and the DOM?

HTML is a markup language used to display content in a browser. When we change the appearance of a webpage, what we are really changing is the Document Object Model, which directly determines the appearance displayed in the browser.

What is the DOM?

The Document Object Model is a representation of the current view of the browser, and can be manipulated without reloading a page.

How do you select an item by its id with getElementBy code using JavaScript? Give an example.

You do not need to start with a # sign when using the alternative method because JavaScript already knows that we are selecting by the id attribute by virtue of using a method that only accepts an id. Example: JavaScript: document.getElementById('content')

How do you select an item by its tag name with querySelector code using JavaScript? Give an example.

You prepend nothing when selecting by tag name. Example: JavaScript: document.querySelector('p')

How do you select an item by its id with querySelector code using JavaScript? Give an example.

You prepend the # sign to the id attribute name to select an item by its id. Example: JavaScript: document.querySelector('#content')

How do you select an item by its class with querySelector code using JavaScript? Give an example.

You prepend the . to the class attribute name to select an item by its class name. Example: JavaScript: document.querySelector('.red')

True or False: There were no updates to the JavaScript language after it was initially built in 1995 until 2009.

True

True or False: Using JavaScript we can target elements using the same syntax we target element in CSS.

True

True or False: When you view and manipulate the DOM, the HTML stays the same.

True

When we say Javascript adds behavior we mean three things. Javascript allows us to:

1. Find HTML and select certain elements. 2. Listen and respond to specific events on our browser. 3. Add or remove HTML.

What does interactivity mean to JavaScript?

1. Move, remove, or add HTML. Javascript can move, remove, or add content to our site. 2. Find specific pieces of HTML so that it knows what to remove, where to add specific content, or what to change. 3. Javascript can listen and respond to specific events that occur in our browser.

What does JavaScript allow us to do to the DOM?

1. View a current representation of our Document Object Model. 2. Select specific portions of the DOM, and manipulate them, which changes what shows up in a browser window.

What does DOM stand for?

Document Object Model

How do you select an item by its class with getElementBy code using JavaScript? Give an example.

Example: JavaScript: document.getElementsByClassName('red')

How do you select an item by its tag name with getElementBy code using JavaScript? Give an example.

Example: JavaScript: document.getElementsByTagName('p')

Once you have properly targeted an element, you can then call other methods to identify the attributes of that element. Give three examples of this.

Example: JavaScript: document.querySelector("a").text or document.querySelector("a").href or document.querySelector("#header").innerHTML

Give an example of chaining calls to document.querySelector.

Example: To select a specific link, we can select the info box and then select a unique span with a class name and then the first link within that span. JavaScript: document.querySelector(".infobox").querySelector("span.deathplace").querySelector("a")

Give an example of calling an element's constructor property.

Example: this will display the constructor property for the object "maryleboneAnchor": JavaScript: let maryleboneAnchor = document.querySelector(".infobox") .querySelector('span.deathplace") .querySelector("a") maryleboneAnchor.constructor

True or False: JavaScript and Java are the same language.

False

What does XHR allow websites to do? Give an example.

It allows a website to receive new data without a page refresh. Example: Google Maps is an example of a website using XHR technology. It can recieve a set of street names and coordinates of a different location on a GPS without having to reload.

How can the DOM be manipulated?

It can be manipulated through developer tools by right-clicking and selecting "inspect" while on a web page.

How does JavaScript allow us to find HTML? Give an example.

Javascript allows us to find specific pieces of HTML so that we can later change that HTML. Example: an image of a kitten: JavaScript: let image = document.queryselector("kitten")

How does JavaScript allow us to listen and respond to specific events? Give an example.

Javascript can listen to events like clicking on or hovering over specific elements, the user pressing on specific keys, and much more. Example: clicking on a picture of a kitten to make it both spin, and stop spinning on each click: JavaScript: image.onclick = toggleClass;

How does JavaScript allow us to add or remove HTML? Give an example.

Javascript can remove or add HTML. Example: adding and removing the CSS class "image": JavaScript: function toggleClass () { if (image.className == "image") { image.className = "" } else { image.className = "image" } }

Give a dev definition of JavaScript.

Javascript is a scripting language created to bring interactivity to the browser.

When we view a webpage, we are really viewing three different components, what are they and what are they responsible for?

There is the HTML, which is responsible for the content, there is CSS, which styles a webpage, and there is Javascript which adds behavior to that HTML.

What do frameworks allow developers to do? Give two examples.

They allow developers to code more easily by encouraging specific practices and including useful libraries. Example frameworks: AngularJS, React, Reactive Native

How do you alter a specific piece of the DOM? Give an example.

To alter a specific piece of the DOM, use JavaScript in the developer tools of a web page. Example: JavaScript: document.querySelector('body').remove()

How do you open the developer console?

To open it, double-click on the web page and select "inspect" from the dropdown menu.

How do you select a specific piece of the DOM? Give an example.

To select a specific piece of the DOM, use Javascript in the developer tools of a web page. Example: JavaScript: document.querySelector('body')

How do you select a tag name with JavaScript? Give an example.

To select something by the tag name simply pass through the tag name to document.querySelector. Example: JavaScript: document.querySelector('h1')

True or False: JavaScript frameworks were released by 2010?

True

True or False: JavaScript was built by Netscape in 1995 in just 10 days by Brendan Eich.

True

True or False: The document.querySelector method will return the first match.

True

True or False: The equivalent to error code null is nothing.

True

What is a content pane? Give an example.

Where content is displayed. Example: The Wikipedia for Ada Lovelace.

What does XHR stand for?

XMLHTTPrequest or XML-HTTP-request

How do you clear code in the developer console?

clear()

To view the DOM is to open the developer console, type in the word _____________.

document:

To see the HTML of that page simply, add-on ___________ to the beginning of a URL, or double-click and select _________ from the dropdown menu.

view-source: , view page source