- Now I’m working with console window ,and rest of sample string application we will go through web console window only . Strings can accept any type of characters inserted in-between either single or double quotes.
- At the left side of console window in developer tools, we find collapse menu button which is known as Dock. By clicking this, we notice as below
- Step one: to open web console window
- Step two : to clear web console window find circle symbol on web console as show as bellow screenshot , at number “2”
- Step Three : Now using web console window render name on web browser , using log() method of console object like console.log(“thanks for using tutorial planet”)
String concatenation :-
- The beauty of var keyword is , it can store any value in the form of variable ,and the type of variable will depend on what type of data, we assign to the var keyword.
- According to above screenshot ,we make two variables with name variable_1 and variable_2 to concatenation two string variables
- we assigning “welcome to tutorialplanet “string to varibale_1 and “we make awesome things using strings ” string to varibale_2
- invoking those two varibale with log() method of console object
- to make a space in between two string’s we using + symbol as show above,noticed rectangular shape on screenshot
Document Object Model:-
- According to above screenshot the html markup will loaded into document object model in the form of tree.
- We can accessing all html elements using document object , it have couple of predefined methods to methods to grab the content of the html element
- For example document.getElementById(“#awesome”), means we passing one of the id of html element to getElementById() method in the form of string as show above
- Then the result will be as show as bellow
- According to DOM all HTML elements will load into page to access the any html element of the web window. [OR]
- In other words DOM is the way to access the html tags with tree structure.
- DOM have couple of predefined methods, those are
- document.getElementByAttribute(“name of the attribute”)
<html> <head></head> <body> <p id="tutorialplanet">change my value </p> <button onClick="document.getElementById('tutorialplanet') .innerHTML = 'Thanks to change my value'"> click me to change value </button> </body> </html>
Sample output:- The action will perform once user click on button .