Console - Reading Assignment

Javascript Programming
#703

1 What is the console used for?
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?
To open the JavaScript Console in Chrome, you can navigate to the menu at the top-right of your
browser window then click on the three vertical dots in a row. From there, you can select More Tools
then
Developer Tools.
3 What does console.log function do?
Rather than have pop-up alerts that we need to continue to click out of, we can work with JavaScript
by logging it to the Console with console.log .
4 How can you change the contents of an HTML page through the console?
By experimenting with JavaScript code within the context of existing HTML, CSS, and JavaScript.

1 Like
#704

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 whitin the page’s context.
It gives you the ability to write, manage, and monitor JavaScript on demand.
How do you open the Console in Google Chrome?
Navigate to the menu bar, from there you can select “More tools” and then “Developer Tools”
What does console.log function do?
It logs info to the JavaScript console, logs a value for example.
How can you change the contents of an HTML page through the console?
You can modify the contents by using the document element inside the console.

1 Like
#705

  1. can be used log information as part of the Javascript development

  2. In Chrome: navigate to the menu @ top-right of the browser window a) select more tools b) Developer tools or F12

  3. output to the console

  4. using the arrow up key or using the document element inside the console

1 Like
#706

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

  2. How do you open the Console in Google Chrome?
    Through the menu: More Tools -> Developer Tools
    Key combination: CTR + Shift + J (Windows)

  3. What does console.log function do?
    The consol.log functions allows to send the output of a JavaScript instruction to the console

  4. How can you change the contents of an HTML page through the console?
    By calling the the “document.” object with the name of the specific tag to modify and applying JavaScript instructions on them. For example to modify the title to add a value with in a variable following command can be used:
    document.body.innerHTML = "

    The current date is " + d + “

    ”
    Within the “document” the “body” is modified with the command innerHTML (changing the internal HTML code).

1 Like
#707

1.the console are mainly used for righting comands in javascript regarding to the html site you wisiting
2.Ctrl + Shift + I
3.you loggin in to the console itself so it becomes easier to interact whit javascript
4.you can interact whit the html document true javascript by exampel for modyfi the content

1 Like
#708

  1. The console is used to test your JavaScript by viewing the output of the code you put in.

  2. You can either go to view tab and click developer tools, then select console, or you can shortcut it by pressing control + shift + J on windows or command + option + J on macOS.

  3. When you enter that into your JavaScript code it will allow you to view the output in the console to test that your code is valid and not undefined.

  4. document.body.innerHTML = “”
    Bear in mind that this is not permanent and when the page is reloaded will reset to your original html.

1 Like
#709
  1. Experimenting with JS and getting real time feedback
  2. CTRL-SHFT-J
  3. logs output information to the console
  4. Use Javascript to make changes to the content of an HTML page bij using the console
1 Like
#710
  1. It is used to check how JS code will affect our page.
  2. By pressing CTRL+SHIFT+i.
  3. It prints outputs of functions in the console.
  4. By clicking “Elements” (in Chrome) in top menu of console than double click on element to edit.
2 Likes
#711

I have problems in following the article.
they show me some examples what i can do in the console, so i can follow along typing the same inputs, and i get the same outputs as they say.
now i come to this one:

let d = new Date();
console.log("Today’s date is " + d);

i should get this output:
Output
Today’s date is Wed Jun 21 2017 15:49:47 GMT-0400 (EDT)

my first question, how do i use the “enter” key to go to the second line to put in without activating the code and get an output before i can put in the second line?

second question, even after i copy and past the code from the website itself i don’t get the output i’m looking for:
SyntaxError: redeclaration of let d

untill now i had no problems understanding everything, but now i don’t see it :confused:
@Fabrice maybe you can help me understand?

#712

  1. so you can try out everything live in your web browser for faster creation and control for testing.

  2. CTRL+shift+J

  3. it gives you the output from the asked action you gave it in input.

  4. you can see in the inspector what you modify in the HTML and the CSS code with the use of javascript. this is only a temporary change, if you reload the page the javascript will be deleted and you get the original HTML layout back.

**This was a very tedious part, don’t have the feeling i understood half of it and my laptop almost went true the window :expressionless: **

1 Like
#713

Hi @boomfist .

In the line:

You have to remove the whitespace in:

new Date();

like this:

let d = newDate();

If we read the error message it says:

  1. ‘SyntaxError:’
    -tells us that the syntax (spelling) is wrong.
  2. ‘redeclaration of let d’
    -tells us that the issue is with the variable d. (let d =).

If you rewrite “newDate” and try again, it will work fine.

Good luck, my friend.
Ivo

1 Like
#714

let d = newDate();
console.log("Today’s date is " + d);

ReferenceError: newDate is not defined

#715

Don’t worry about it.

We all struggle with programming. I just spent 3 days with some PHP sh*** on my website, and when I finally asked for help, then I just got enough help to understand a little more, and I managed to fix the error myself. It felt absolutely wonderful :blush: :hugs:.

You will always experience error messages with programming, it is half the fun and it is part of learning how to program. Sometimes there are the smallest things we overlook and other times, there is a bigger problem that needs to be solved or should be done differently. So I think we will always struggle with something, and it’s better to just learn to expect some errors. :triumph: :heart_eyes:

So be patient and DO NOT throw your PC out the window. It’s not good if you hit someone in the head with it . :scream:

Ivo

#716

:joy: i think i’m just at the first lesson of javascript and they show me some examples to show me how the console works and i’m pulling my hair out that i can’t follow what they are doing in that coding example. 9/10 that’s not what they want me to focus on yet :stuck_out_tongue_closed_eyes:

#717

it says that ‘newDate’ is not defined.

can you paste the rest of the code?

#718

omg i just found it, i’m such an idiot :sweat_smile: :sweat_smile: :sweat_smile:
after all the struggle i had closed my browser and after a while i just went to try again on a blank tab instead of the loaded in index.html :upside_down_face:

1 Like
#719

You can also move on to the next video.
You will most likely get your answers there.

Don’t get stuck on the video coding. Consentrate on the reading assignments and the exercises… I know it’s hard to follow along on Ivans coding sometimes.
I think the meaning is that you should try to do different things in the console and get to learn to work with the console and browser.

You will learn it all in this course.
But take your time, learn in your own pace and if you are stuck, that’s when the learning how to search for resources and reading the documentation, etc etc. starts. :slight_smile:
We are also here to help, so keep up the god work and don’t be afraid to ask for help.

Ivo

#720

That’s classic.

Congrats on fixing your first error.
That is something to celebrate… :clinking_glasses:

#721
  1. Its used to write Javascript within the page’s context and manage Javascript on demand.
  2. Top right menu bar - more tools - developer tools - console
  3. allows you to print the results of an expression
  4. you can upload the html page into the console
1 Like
#722
  1. So you can work with Javascript in an interface similar to a terminal shell.
  2. First you can acces the console from top right corner - 3 vertical dots - more tools - developer tools and the second way is to use the combination keys Ctrl+Shift+I.
  3. Console.log shows you in the console the result of your command.
  4. You can modify the document object model.
1 Like