This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

preface

Learning programming knowledge, can be lively, fun, easy to understand? I am still exploring the process of trying, this article, will not be the same Angle to cut into, so that we have some understanding of JavaScript in the browser, of course not limited to programmers, I hope to have no contact with the programming language white, also have certain harvest.

What happens if you don’t allow JavaScript on your site?

Have you ever wondered or wondered why websites can do so many things? For example, you can shop online if you log in. You can also go online, watch videos, watch TV shows, the list goes on.

Here, we reveal the secret:

I believe that you usually have to visit B station, the following station b for example, I use Chrome browser

We open b station, search “front-end early chat”, click on a video, watch the video, open a video viewing page

I’m enjoying watching videos and learning.

So what would it look like if you had a browser on your computer that didn’t allow JavaScript?

We can compare the two images above and see that if the browser Settings do not allow JavaScript on the site, you will not be able to watch the video, the images will not be displayed, and you will not be able to enjoy learning.

Does that tell you anything?

Browsers cannot live without JavaScript, and when browsers do not support or allow JavaScript, it means that the functionality of the site cannot be used. How can you have fun watching TV, or doing more?

How to disable JavaScript in your browser if you are interested

There are text tutorials and image tutorials:

DOM is what?

Here’s a scenario:

If you are in station B and you want to download a video corresponding to the cover image, you find that the normal method, seems to not work, such as right click => “Save image as”, what other way to download the image?

In three steps:

Step 1: Press F12 or right-click to open the browser console

Step 2: Turn on the mode and select the corresponding element

Step 3: Hide and seek, find the corresponding picture

Here it is. If your English is good, you should img actually means picture.Instead of seeing a website, you go to that website and you can download the image you want.

In fact, the above operation is the process of finding elements, elements can be understood as tags on the page, in JS, can be understood as DOM elements.

What’s BOM?

Here’s another scenario:

If you open a web page, the page has too many ads or some other reason. You want to close the page, like a normal person, is

  • Click the close button
  • Use shortcut keysCtrl + W

What else is there to do? You can think about it, of course there is, or you wouldn’t ask this question.

Again, we’re going to open the browser console, remember how to open it?

To review, press F12 or right click => Check to open the browser console

At the console, enter the command window.close(); “And press Enter to see that you have closed the page.

window.close(); This command, in fact, is provided by the browser. There are many things that the browser can control through JavaScript. The “close page” command is just one of them. For example, open a new window, open a new TAB (TAB), close the page, make the page the home page, or add favorites, etc… These objects are called bOms.

Return to the chase

I believe that after reading the above content, you should have a preliminary understanding of JavaScript, DOM, BOM, and will not discourage xiaobai.

Let’s get back to our topic: what is JavaScript in a browser?

JavaScript has three parts:

  • ECMAScript (ES) : The core syntax of JS. It describes the syntax and basic objects of the language
  • DOM: Document Object Model, which provides apis (properties and methods) that allow JS to retrieve and manipulate HTML elements (DOM elements) in a page. What exactly does it do? Function is important, not concept
  • BOM: The Browser object Model provides various apis to enable JS to operate the browser and describe the methods and interfaces for interacting with the browser.

ECMAScript

Let’s look at a picture.

Note: This graph is from the Internet

The figure above illustrates the evolution of JavaScript, JScript, and ECMAScript in chronological order.

From the figure above, we can see that “standardization” occurs twice.

Netscape came out with JavaScript, and Microsoft, not to be outdone, said, “Your browser has scripting, so I want it to have scripting.” Hence the release of JScript with IE 3.0. Why JScript? Because JavaScript had been registered by Netscape, Microsoft as a commercial company had to use a new name.

Although both browsers support scripting, there are differences in syntax and functionality.

The ECMA group, which has been working to set standards for consumer electronics, saw the need to harmonize the syntax and functionality of web scripts and released the first edition of the ECMAScript standard. The standard has since been updated to ECMAScript 3 (ES 3 for short).

So ECMAScript is the standard for web scripting, and JavaScript and JScript are the two implementations of ECMAScript.

DOM

DOM is a JavaScript interface for manipulating web pages. It is called Document Object Model. What it does is turn the web page into a JavaScript object that you can script for various operations (such as adding and deleting content).

Simply put, DOM is about providing apis (properties and methods) that allow JS to retrieve and manipulate HTML elements (DOM elements) in a page.

The commonly used API

  • document.getElementById: Gets the specified element object by its ID, whenever useddocument.getElementById('#id'). Here the document isLimits the scope of the fetch elementWe call it context.
  • [context].getElementsByTagName: Gets a group based on the tag name in the specified contextElements in the collection(HTMLCollection)
  • [context].getElementsByClassName: gets based on the element’s style class name (class=” XXX “) in the specified contextA collection of elements. In the specified context, the element based style class name (class=” XXX “) is retrievedA collection of elements
  • document.getElementsByName: Its context can only be Document, in which a collection of nodes is obtained based on the element’s name attribute value throughout the document
  • [context].querySelector: Based in the specified contextThe selector(similar to CSS selector) gets the specified element object (You get an elementIf the selector matches more than one, we only get the first one.
  • [context]querySelectorAll: Based on querySelector, we get all the elements matched by the selector, resulting in oneNode set(NodeList)
  • document.head: Gets the head element object
  • document.body: Gets the body element object
  • document.documentElement: Gets the HTML element object

BOM

JavaScript is the built-in scripting language for browsers. That is, the browser has a JavaScript engine built in and provides interfaces that allow JavaScript scripts to control various browser functions. Once the webpage is embedded with JavaScript script, the browser loads the webpage, it will execute the script, so as to achieve the purpose of operating the browser and achieve various dynamic effects of the webpage.

In simple terms, the browser provides various apis to enable JAVASCRIPT to operate the browser, such as opening a new window, opening a new TAB (TAB), closing the page, making the page the home page, adding favorites, etc. These objects are called bOms.

The commonly used API

The output
  • Alert: output by pop-up in the browser (browser prompt box)
  • Confirm: the same as alert, so the output is also a string, but the prompt box has confirm and cancel buttons, so it is a confirmation box.
  • Prompt: Add input boxes in addition to confirm
  • Console. log: Output logs on the browser console (press F12 (FN+F12) to open the browser console)
Properties window

Window represents the current browser window

  • The innerWidth and innerHeight properties get the width and height of the part of the HTML page that is displayed
  • Open () and close() Open and close the browser window or TAB TAB
The location attribute

The Window object has a Location property for URL-related operations. It has several common attributes:

  • Href: Get the current page URL, or jump to a new URL.
  • Hostname: Gets the host part of the URL.
  • Pathname: Gets the path part of the URL.
  • Reload () : refreshes the current page
History properties

In the window history property, you can use the back(), forward(), and go() methods to implement the browser’s back and forward functions. You can also manually add, replace, and save the history using pushState() and replaceState().

The Navigator properties

Navigator contains information related to the user’s browser, including userAgent, geolocation, and whether cookie (isCookieEnabled) is enabled.

Screen properties

The Screen attribute contains information about the user’s Screen, such as width, height, Orientation, and so on.

reference

  • What are ES 3, ES 5 and ES 6
  • What is DOM anyway? !
  • What is DOM? 2 minute video reveals your secrets!
  • 2 minutes to master BOM, what is BOM? How is it different from DOM?

Wrote last

JavaScript in a browser is made up of three parts:

  • ECMAScript (ES) : The core syntax of JS. It describes the syntax and basic objects of the language
  • DOM: Document Object Model, which provides apis (properties and methods) that allow JS to retrieve and manipulate HTML elements (DOM elements) in a page. What exactly does it do? Function is important, not concept
  • BOM: The Browser object Model provides various apis to enable JS to operate the browser and describe the methods and interfaces for interacting with the browser.

If there are any mistakes in this article, please correct them in the comments section. If this article helped you or you liked it, please like it and follow it.