Console - Reading Assignment

[jon_m]

Hi @Tordek!

Nice answers

Just to add to your Q4 answer…

@Tordek

4. How can you change the contents of an HTML page through the console?
By entering commands in the console that change the content.

… and more specifically, by writing JavaScript code that accesses and manipulates the page’s Document Object Model (DOM) .

[jon_m]

Hi @Steffen,

Nice answers

@Steffen

3. via the Document Object Model (DOM) --> Inspector (in Firefox),
   by clicking on html element like

Yes, we can change the contents of an HTML page there But this is a different developer tool.
In the actual console, we can do this by writing JavaScript code that also accesses and manipulates the same DOM.

[andrea01]

1. The Console is used to log information as part of the Javascript development process and user interaction with webpages;
2. Top Right corner for additional options; More tools–> developer tools
3. console.log allows the user to log data and interact with the Javascript Console;
4. double-click a selected element and make any necessary changes

[AliasFresh]

Console reading Assignment

1. What is the console used for?

The console serves a few functions but two stand out, the writing code & checking of code(debug). This can all be done from any standard web browser.

2. How do you open the console in Google Chrome?

sticking with our binary theme one has two main options. Smashing F12 like the like button 😆 or menu(aka 3 dots)->more tools->dev tools->console. Annd heres another pair if your a windows mouse user right click any element and select inspect or hit ctrl+SHIFT+j simultaneously. Theres a few more. Some are mac specific and I'll leave those for jobites. Lol

3. What does console.log function do?

The console.log function imports (outputs?)the codes (functions) results directly to the console by-passing the html and as such all the pop ups and clicking ectera. The resulting log is "All killer no filler."

4. How can you change the contents of an html page through console?

javascript is stacked (integrated? )with html. It will recognize all the commands. Select an element and code away!

[PesaCZ]

What is the console used for?
Console provides user the ability to write, manage, and monitor JavaScript when needed.

How do you open the Console in Google Chrome?
In Brave browser: right top corner – hamburger menu – more tools – developer tools.

What does console.log function do?
Console.log outputs to console which allows us to see the result inside the console.

How can you change the contents of an HTML page through the console?
By using JavaScript commands inside the console allows us to edit the HTML page.

[Long]

@ivan

• What is the console used for?
• How do you open the Console in Google Chrome?
• What does console.log function do?
• How can you change the contents of an HTML page through the console?

1. The console provides us with the ability to write, manage, and monitor JavaScript on demand.
2. Menu/More Tools/Developer Tools/Console Tab. But in reality would probably use shortcut keys:
   Microsoft: CTR + SHIFT + J
   MAC: Command + OPTION + J (to jump right into JS console)
3. console.log allows the programmer to execute the code in the console without publishing it on the website.
4. Inspector Panel in Firefox or Elements Panel in Chrome. There you can view the DOM of the page and make changes.

[Beryl]

1. The console is used to log and interact with javascript within the context of the webpage.
2. ctrl+shift+i
3. The console.log function outputs the result of a function into the console.
4. document.body.innerHTML = changes you want to make

[John_Okoye]

1. console is a synonym for shell which is the interface to view services programmed by JS

2. F12

3. a command to record the execution of code for inspection

4. you cannot. the browser is to execute and view code, and editor like Atom alters it or writes new code altogether or takes away.

[LAVATOR]

1. What is the console used for?
   To write,manage and, monitor JS code
2. How do you open the Console in Google Chrome?
   option+command+J
3. What does console.log function do?
   it gives you an output. Within the function you put the input/task
4. How can you change the contents of an HTML page through the console?
   by going in the pages DOM and editing what you want

[matthurd]

1. it allows you to interact with a web page by using javascript. One can then test the code live on the page.
2. ctrl + shift + l
3. you can run js in real time
   4.you can write js in the console and change contents of the page like styles, elements colours etc.

[MichaelGolpe]

1. It allows us to interact with the web page on demand- by writing, managing, and monitoring.
2. I do it by using F12. Article says to; CTRL+SHIFT+J, and to go to Developer Tools via the ellipsis. COMMAND+OPTION+J for MacOS.
3. It allows us to work with JS within the console.
4. By modifying the HTML within the DOM.

[Gae_mon]

@ivan

Welcome to the discussion thread about the Console. Leave your answers to the questions below in this thread. If you have any questions or you want to discuss something connected to the assignment feel free to do it in this thread as well, but please everything to the topic.

1. What is the console used for?
2. How do you open the Console in Google Chrome?
3. What does console.log function do?
4. How can you change the contents of an HTML page through the console?

1. The JavaScript console is some sort of shell where you can write commands to the browser directly in JavaScript to develop the dynamic layer of a web page or a site, as well as the static part.
2. you can right-click anywhere on the page and choose ‘inspect’ menu in the contextual menu. Or you can click on the three dots upper right end corner, go to ‘more tools’ menu, then ‘developer tools’.
3. It logs the result that has a function in the console itself.
4. You can throw html in the page by using the command :

document.'section'.'function/attribut' = 'value';

[daz3d]

What is the console used for?

The console is used for many purposes;

1. To view the Document Object Model
2. To help debug things which may not be working correctly.
3. To view network traffic and monitor download times and network load.
4. To assist in responsive design
5. To interact and modify in real time code , tags and CSS

How do you open the Console in Google Chrome?

1. Navigate to the main menu. Then select more tools then select developer options.
2. if on windows, OSX or linux Ctrl + Shift + J

What does console.log function do?

Console.log() operates like a Terminal Emulator and will in real time return results of commands entered into it in a similar fashion.

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

You can use javascript functions such as “element.writeInto()” to write directly into an existing page element or you can create elements on the fly using built in functions such as document.createElement(), document.createTextNode() and **document.appendChild() to insert the new element into the page.

[jon_m]

Nice answers, @Long

@Long

4. Inspector Panel in Firefox or Elements Panel in Chrome. There you can view the DOM of the page and make changes.

Yes, we can change the contents of an HTML page there But this is a different developer tool.
In the actual console, we can do this by writing JavaScript code that also accesses and manipulates the same DOM.

[jon_m]

Hi @John_Okoye,

@John_Okoye

4. you cannot. the browser is to execute and view code, and editor like Atom alters it or writes new code altogether or takes away.

…but you can change the contents of an HTML page temporarily via the console — by writing JavaScript code which accesses and manipulates the page’s Document Object Model (DOM). However, these changes are not permanent and are just for web developers to test and experiment with how new JavaScript code, or modifications to the existing code, will affect a particular web page when run in the browser.

[John_Okoye]

appreciated, did you learn that in a book? lol, just kidding…I get it now, I think. DOM is the GUI of CLI (console) in heirarchy view? A higher abstract layer of the underlying code?

[Neeraj_Nerlekar]

What is the Console used for?

• The Console can be used to log information as part of the JavaScript development process and allows 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?

• To open the JavaScript Console in Chrome, you can navigate 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. This will open a panel where you can click on Console along the top menu bar to bring up the JavaScript Console if it is not highlighted already.
• You can also enter into the JavaScript Console by 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.log logs the function to console and also prints the output.

How can you change the contents of an HTML page through the Console?

• Each time a web page is loaded, the browser creates a D ocument O bject M odel, or DOM , of the page.
• The DOM is a tree of Objects and shows the HTML elements within a hierarchical view. The DOM Tree is available to view within the Inspector panel in Firefox or the Elements panel in Chrome.
• These tools enable you to inspect and edit DOM elements and also let you identify the HTML related to an aspect of a particular page.
• If you reload the page, you’ll return to the saved state of the HTML document.

[thecil]

Excellent answer sir! really well documented! keep it like that please!

Carlos Z.

[jon_m]

@John_Okoye

did you learn that in a book?

Yes, in the uncompressed version (War and Peace)

@John_Okoye

DOM is the GUI of CLI (console) in heirarchy view? A higher abstract layer of the underlying code?

That sounds like a good way to conceptualise it, yes. As its name suggests, the Document Object Model is a representation of our HTML document in objects. These objects allow dynamic interaction with the web page using a scripting language such as JavaScript. When we interact with the DOM using the console in Chrome DevTools we aren’t changing the web page’s actual code — I guess it just becomes like a parallel dimension which we get to run wild in and experiment with all we like, safe in the knowledge that when the page is reloaded our experimental reality will have vanished.
However, we can also write JavaScript that manipulates and interacts with the DOM within programs developed for web pages hosted live. It’s by interacting with the DOM that JavaScript can turn static web 1.0 pages into dynamic 2.0 ones. We can also use jQuery to access and manipulate the DOM, but the syntax is a bit different.

[Supremedonut]

1: The console is used for interacting with web pages by using JavaScript language. The console lets you write, manage and monitor JavaScript whenever you want.

2: CTRL+SHIFT+J

3: console.log prints the data that has been written inside the ()

4: By loading a HTML file into a browser and then opening console.