Skip to content

Latest commit

 

History

History
136 lines (119 loc) · 7.31 KB

JavaScript- Intro.md

File metadata and controls

136 lines (119 loc) · 7.31 KB

JavaScript-Intro-JS 🙀

Source: Intro to JavaScript - Udacity Front End Web Development Nanodegree

Table Of Contents:

  • a. What is JavaScript?
  • b. The JavaScript Console
  • c. Developer Tools on Different Browsers
  • d- Console.log

a. What is JavaScript?

  • HTML and CSS are markup languages, that describe and define elements within a document.
  • JavaScript is a programming language, used to communicate instructions to a machine to:
    1. control the behavior of a machine
    2. express algorithms.

b. The JavaScript Console

The JavaScript Console is a development tools to iterate, debug and profile JavaScript code directly into the web browser.

"Diana"
alert("Hello "Diana"! How are you?!");

This creates a JavaScript alert box in the web browser, on the current web page.

c. Developer Tools on Different Browsers

Every modern web browser includes its own set of developer tools:

1 Google Chrome DevTools

  • The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome.
  • Use the DevTools to iterate, debug and profile a site.
  • Open Chrome DevTools:
    1. right-click on any page element, select Inspect.
    2. open the Chrome settings menu in the top-right corner of your browser window and select More Tools > Developer Tools.
    3. Use shortcuts: Command + Option + i (Mac) OR Ctrl + Shift + i/ F12 (Windows/Linux).

2 Mozilla Firefox

  • Firefox Developer Tools allow to examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.
  • Download a version of Firefox called Firefox Developer Edition tailored for developers, featuring the latest Firefox features and experimental developer tools.
  • Open Firefox Developer Tools:
    1. right-click on any page element, select Inspect.
    2. open the Firefox settings menu in the top-right corner of your browser window and select Developer.
    3. Use shortcuts: Command + Option + i (Mac) OR Ctrl + Shift + i/ F12 (Windows/Linux).

3 Internet Explorer

4 Microsoft Edge

  • Microsoft Edge introduces improvements to the F12 developer tools in Internet Explorer.
  • The new tools are built in TypeScript, and are always running, so no reloads are required.
  • F12 developer tools documentation available on GitHub.
  • Open Microsoft Edge Developer Tools:F12

5 Safari Web Inspector

For any Mac users, Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms.

  • Safari's Web Development Tools:
    1. Enable the Develop menu in Safari’s Advanced preferences. Then right-click on any page element, select Inspect Element.
    2. Use shortcuts: Command + Option + i (Mac).

6 Opera Dragonfly

  • Fast, lean and powerful, Opera comes pre-packed with a fully-featured suite of developer tools.
  • Opera Dragonfly is designed to make your job easier.
  • Open Opera Dragonfly:
    1. right-click on any page element, select Inspect Element.
    2. Use shortcuts: Command + Option + i (Mac) OR Ctrl + Shift + i/ F12 (Windows/Linux).

d. Console.log

console.log is used to display content to the JavaScript console. Perform the log action on the debugging console:

  • Run the following code in the console:
console.log("hiya friend!");

  • Prints: "hiya friend!"

  • The message logged is "hiya friend!".

  • hiya friend! is a string (=a sequence of characters).

  • Write a block of JavaScript code that loops through the numbers 0 through 9 and prints them out to the console:

for (var i = 0; i < 10; i++) {
  console.log(i);
}
  • Prints: "0 1 2 3 4 5 6 7 8 9"
  • This means: any code written inside the curly brackets {...} will be repeated 10 times.
  • In this case, console.log is printing out the value of i each time the loop runs.

How to use the console as a sandbox to test a new line of JavaScript in the browser?

  • Open this site in Dev Tools.
  • Paste the following code: document.getElementsByTagName("h1")[0].style.color = "#ff0000";
  • What happened when you ran that line of code in the JavaScript console?
  • The heading changed to RED.
  • Styling elements on the page is great, can also be don by modifying the CSS.

What makes JavaScript so special in this case?

  • Refresh the page, then paste this line of code in the JavaScript console. document.body.addEventListener('click', function () { var myParent = document.getElementById("Banner"); var myImage = document.createElement("img"); myImage.src = 'https://thecatapi.com/api/images/get?format=src&type=gif'; myParent.appendChild(myImage); myImage.style.marginLeft = "160px"; });
  • When you click, an image (cat gif)is added to the webpage 🐱! An image is added to the page.

Resources

Take Away

  • All mayor web browsers come with build-in JavaScript Engines
  • This allows browsers to runand execute Javascript code
  • The JavaScript Console allows to use strings, and execute Javascript code lines in real time directly in the browser.
  • With JavaScript in JavaScript Console, you can add styles and animations to a web page.