Console - Reading Assignment

Javascript Programming
#2131

Hey @ivan I have a quick question. How do you implement the modifications that you make in the console into the actual page? I think I am doing something wrong. I attempted to put the same info into the Atom html development program that I have been creating but it didn’t make the same changes to the page that I made happen in the console. Please help. Thanks.

PS. I am fully aware that I may be jumping ahead and you may already have this covered in the very next video…lol. But I appreciate the help anyway. :smiley:

1 Like
#2132

Guys I don’t get why we should play with consoles … Isn’t it the same or even more useful to play with Atom and wtrite the same things there ?? I really don’t get why consoles are important.

1 Like
#2133

Hey @LenoraEl, hope you are well.

Each modification in your console will be erased if you refresh the page, so if you want to permanently save any change, you have to do it directly on your file. The console is for “live” testing without permanently saving any modification.

If you have any more questions, please let us know so we can help you! :slight_smile:

Carlos Z.

#2134
  1. The Javascript console of your web-browser can be used to run Javascript commands within the webpage.
  2. In the hamburger menu, open Other Tools > Developer Tools and click the tab for Console, it may be slightly different depending on the browser you are using.
  3. Logs information to the javascript console
  4. You can interact with the page’s Document Object model through Javascript using the “document” object and modifying it
1 Like
#2135

  1. What is the console used for?
    The console is used to write, manage, and monitor JS code on demand.

  2. How do you open the Console in Google Chrome?
    Ctrl+Shift+J

  3. What does console.log function do?
    It prints output to the console

  4. How can you change the contents of an HTML page through the console?
    By using the document object

#2136
  1. What is the console used for? Console provides you with the ability to write, manage, and monitor JavaScript on demand.
  2. How do you open the Console in Google Chrome? To open the JavaScript Console in Chrome, you can navigate to the menu at the top-right of your browser window signified by three vertical dots in a row. From there, you can select More Tools then Developer Tools. You can also enter into the JavaScript Console by using the keyboard shortcut CTRL + SHIFT + J.
  3. What does console.log function do? The JavaScript Console provides you with a space to try out JavaScript code in real time by letting you use an environment similar to a terminal shell interface.
  4. How can you change the contents of an HTML page through the console? Open up the Console and begin working with JavaScript to modify the page. We’ll begin by using JavaScript to insert a heading into the HTML.
#2137

Hey Carlos, thanks so much for the response. Yes I understand that the console is just for experimenting however, when I tried to put the same info into the file it didn’t come out the right way and it even modified my title text and made it smaller. I’m trying to figure out where I may be going wrong. Thanks.

1 Like
#2138
  1. What is the console used for?

The consule is used to test code and interact with a webpage.

  1. How do you open the Console in Google Chrome?

F12 or right click on the page and click inspect element, then click console.

  1. What does console.log function do?

It “prints” its output to the console.

  1. How can you change the contents of an HTML page through the console?

Yes, in Chrome and Brave browser this is done under the “elements” tab.

1 Like
#2139

@thecil Hi Carlos,

I have a another question concerning the console practice exercises, in lecture number 9.

The exercise number 5, on the pyramid-shaped printing, I was totally unable to succeed in that one.

Upon looking at the answer, I don’t see how I can print the three console.log entries at once, other than copying and pasting the answer ( which isn’t good I know haha!), and whatever combination of spaces I put, whether I do an exact copy and paste of the answer, or I tinker with it, it never aligns…

Any ideas why?

Edited

I finally succeeded, :grin: and the only way it worked for me ( I must’ve tried about 10-12 different versions seriously)
was by logging this:
console.log ( ’ * \n *** \n *****’ );

1 Like
#2140

  1. The console is a development tool that is similar to a terminal shell that can be accessed alongside the webpage you are viewing. It can be used to interact with and test the webpage by writing, managing and viewing relevant JavaScript commands in the console without permanently altering the original code.

  2. The keyboard shortcut to open the development tools is Ctrl+Shift+I, or right click on your mouse and click ‘inspect’. Alternatively in the top right corner of the web page are 3 dots. Click on the 3 dots and look for ‘more tools’. Look for ‘Developer tools’ and click it.

  3. The console.log function allows you to work with JavaScript within the console itself without having constantly to click out of pop-up alerts on the webpage.

  4. You can change the contents of an html page by opening the console and typing relevant JavaScript commands. This will not permanently change the page however, as once it is reloaded it will revert to the original format.

1 Like
#2141
  1. The console provides access to the behind-the-scenes code and other tools.
  2. You can open it by pressing ctrl-shift-j
  3. console.log outputs to the console.
  4. You can change the HTML contents through the elements tab by double clicking on an element.
1 Like
#2142

What is the console used for?
A Console is a sandbox that can be used to log information as part of the JavaScript development process, as well as allow you to interact with a web page by carrying out JavaScript expressions within the page’s context. Essentially, the Console provides you with the ability to write, manage, and monitor JavaScript on demand.

How do you open the Console in Google Chrome?
There’s two way you can open the console in Google Chrome; 1st is through the menu at the top-right of your browser & or the shortcut using the keyboard shortcut CTRL + SHIFT + J on Linux or Windows, or COMMAND + OPTION + J on macOS, which will bring focus immediately to the Console.

What does console.log function do?
Console has a program that displays things on screen. This program is called log()
Since log() belongs to console we ask log to display things for us by calling console first, then a DOT, then the word log(): console.log();
Inside of the parentheses we add the things we want to display on screen, like for example: numbers: console.log(1234);

How can you change the contents of an HTML page through the console?
Insert a heading into the HTML, modify the style of the page such as the background color as well as the color for the text on the page. From here, you can create paragraph element. With this element created, you can then go on to create a text node that we can then add to the paragraph. Then add the text node by appending it to the variable p. And finally append p with its paragraph element and appended text node to the document. It is important to keep in mind that you’re not changing the HTML document when you do things on the Console. In this case, once you reload the page it will return to a blank document.

1 Like
#2143
  1. What is the console used for?
  • it is used to create and execute commands on the associated webpage
  1. How do you open the Console in Google Chrome?

Customize and Control
More Tools
Developer Tools
Voila :smile:

  1. What does console.log function do?
  • logs and executes commands to the webpage
  1. How can you change the contents of an HTML page through the console?
  • though using the DOM where you can access and modify elements in the HTML page
1 Like
#2144

1.the Console provides you with the ability to write, manage, and monitor JavaScript on demand.
2.easy way for me is f12 and just click console (ctrl+shift+j also an option)
3.logs info on the console
4.with document.body.innerHTML

1 Like
#2145

immagine
What’s wrong here ?? Why is not reading “a” and “b” values ??

1 Like
#2146

What is the console used for?
Viewing the data behind a website and testing modifications
How do you open the Console in Google Chrome?
view -> developer tools -> javascript console
What does console.log function do?
calculate/output whatever the function is
How can you change the contents of an HTML page through the console?
by modifying with code in the console.

1 Like
#2147

  1. What is the console used for?
    The Console can be used to log information as part of the JavaScript development process, as well as allow you to interact with a web page by carrying out JavaScript expressions within the page’s context. Essentially, the Console provides you with the ability to write, manage, and monitor JavaScript on demand.

  2. How do you open the Console in Google Chrome?
    Open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use the shortcut Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).

  3. What does console.log function do?
    Writes a message to log on the debugging console,

  4. How can you change the contents of an HTML page through the console?
    Using JavaScript to insert a heading into the HTML.

1 Like
#2148

  1. The console can be used to log information as part of the Javascript development process and also allows you to carry out Javascript expressions by allowing you to interact with a web page.

  2. Navigate to the menu at the top right of the browser, more tools, then developer tools.

  3. Sends a pre scripted message to the visitor of the site.

  4. By working with Javascript to modify it

1 Like
#2149

You are using this quotations ' ' instead of this ones `` (curvy).

Carlos Z

1 Like
#2150

immagine
Cheers mate, I didn’t even know how to make them !! (ALT+0145 right ??) … but I thought all the quotes were the same:

immagine

1 Like