//Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello
1547834992 understanding the basics of javascript your cheat sheet by rachellcostello 760x490 - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

 

 

understanding the basics of javascript your cheat sheet by rachellcostello - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

understanding the basics of javascript your cheat sheet by rachellcostello - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello & # 39;);

h3_html = & # 39;

& # 39; + cat_head_params.sponsor.headline + & # 39; & # 39;

& nbsp;

cta = & # 39; & # 39; +
atext = & # 39;

& # 39; + cat_head_params.sponsor_text +

& # 39 ;;
scdetails = scheader.getElementsByClassName (& # 39; scdetails & # 39;);
sappendHtml (scdetails [0] h3_html);
sappendHtml (scdetails [0] atext);
sappendHtml (scdetails [0] cta);
// logo
sappendHtml (scheader, "http://www.searchenginejournal.com/");
sc_logo = scheader.getElementsByClassName (& # 39; sc-logo & # 39;);
logo_html = & # 39; - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello & # 39 ;;
sappendHtml (sc_logo [0] logo_html);

sappendHtml (scheader, & # 39;

ADVERTISING

");

if ("undefined"! = typeof __gaTracker) {
__gaTracker ('create', 'AU-1465708-12', 'auto', 'tkTracker');
__gaTracker ("tkTracker.set", "dimension1", window.location.href);
__gaTracker ('tkTracker.set', 'dimension2', 'search engine optimization');
__gaTracker ('tkTracker.set', 'contentGroup1', 'search engine optimization');
__gaTracker ('tkTracker.send', 'hitType': 'pageview', page: cat_head_params.logo_url, & title> #:; Cat_head_params.sponsor.headline, & # 39; sessionControl & # 39 ;: & # 39;
slinks = scheader.getElementsByTagName ("a");
sadd_event (slinks, click & # 39 ;, spons_track);
}
} // endif cat_head_params.sponsor_logo

JavaScript is a complex subject on which it can be extremely difficult to get an idea.

However, it has never been so important to understand it because JavaScript is becoming more and more common. the websites we manage.

The modern Web continues to evolve, the use of JavaScript continuing to grow .

SEO professionals may once dream when websites were static. and coded only in HTML and CSS. However, attractive websites often require interactivity, usually optimized by JavaScript.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

google on how to improve sites that are not ranked by martinibuster - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello In the last three years, the number of JavaScript bytes on the entire web has increased by 35% on desktops and desktops. 62.7% on mobiles.

John Mueller, Google's Webmaster Trends Analyst, says: JavaScript is "not going well." "

This programming language is all around us, so we should know it better. Let's be proactive and learn more about JavaScript rather than fear it.

The web has moved from HTML to HTML – as SEO, you can enjoy it. Learn from JS devs and share SEO knowledge with them. JS does not go away.

– John 🍌 (@JohnMu) August 8, 2017

There is often a misconception that JavaScript is reserved for developers who are concerned about it.

I maintain that this is not the case, as this may be a problem for anyone who wants customers and search engines to access the content of their website.

If you are not. "If you know JavaScript perfectly well or have no idea what it does or does not do, do not worry.

I have prepared a glossary of key terms and fundamental concepts to know to help you understand .. began your journey of discovery.

What is JavaScript?

JavaScript is a programming language that allows you to implement complex features on a website, such as dynamic elements or interactivity.

JavaScript is executed once the HTML and CSS code information in the source code was analyzed and built.

The JavaScript code will then trigger all specified events or variables, the document object model (DOM) will be updated and finally, the JavaScript code will be rendered in the browser.

HTML and CSS languages ​​are often the building blocks of a page structure, and all JavaScript makes the final changes and modifications.

Document Object Model (DOM)

The document The Object Model (DOM) is created when loading a page and consists of nodes and dots. objects that map all the different elements and attributes of a page.

The page is mapped. so that other programs can edit and manipulate the page in terms of structure, content and style.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

<img class = "wp-image-286567 size-medium aligncenter b-lazy pcimg" src = "http://weinternetmarketing.com/wp-content/uploads/2018/09/google-on-how-to-improve-sites-that-are-not-ranked-by-martinibuster.gif" alt = "a document object template is presented" width = "480" height = " 341 "d ata-data-src =" http://weinternetmarketing.com/wp-content/uploads/2019/01/1547834990_642_understanding-the-basics-of-javascript-your-cheat-sheet-by-rachellcostello.png[19459032FaironneatofDOMdelements&#39;apageispossiblevia:usingananguageasJavaScript

ECMAScript

ECMAScript (ES) is a scripting language created to standardize the use of JavaScript code.

Different editions of ECMAScript are published. updated and refined over time, such as ES5 and ES6 (also called ES2015).

Transpiling

A transpiler is a tool that transforms the source code into another programming language. The concept is a bit similar to Google Translate, but in code.

You can convert a particular source language to a different target language, for example, JavaScript in C ++ or Python in Ruby.

With regards to JavaScript rendering in particular, a transpiler is often recommended to turn ES6 into ES5 because Google is currently using an older version of Chrome for rendering that does not yet support ES6.

Chrome 41

When For rendering pages, Google uses a Web rendering service based on Chrome 41. This means that the Google rendering engine takes into account loads the same features as this version of Chrome.

the most recent version is Chrome 71, you may find that many versions have been released since . Chrome 41 was launched in 2015 and all these versions had new features. That's why Google's rendering service currently supports ES5 rather than the newer ES6 version.

Single-page application (SPA)

A single-page application (SPA) is a Web site or Web application that dynamically rewrites and re-renders a page when the page is in effect. user interacts with it, rather than asking the server for new content and HTML separately.

JavaScript frameworks can be used to support dynamic changes. elements of SPAs.

Angular, Polymer, React & Vue

There are different types of JavaScript frames.

Angular and Polymer were developed by Google.React was developed by Facebook.Vue was developed by Evan You who previously worked for the Google angular team. gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

google on how to improve sites that are not ranked by martinibuster - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

Each JavaScript framework has its own advantages and disadvantages, so developers choose to work with the one that suits them best and the project they are working on.

If you want to know more about how different frames are measured, this guide gives a detailed comparison.

JavaScript rendering

JavaScript rendering is about taking the script and the instructions it contains, processing it in its entirety, and then executing it so that the required output is displayed in the browser. There are many different methods that you can use to control how JavaScript is rendered.

The requirement to render JavaScript on one page can have a negative impact on two key areas:

. Search engine indexing and indexing

Depending on the rendering method used, you can reduce the loading speed of pages and ensure that the content is accessible to search engines for viewing. analysis and indexing.

rendering

The pre-rendering consists in rendering the contents of a page before the user or the search engine requests it, so that it receives a static page with all the content ready to be used.

[1945]

Preloading a page in this way means that your content will be accessible rather than the search engine or browser of the user who has to render the page itself.

Pre-rendering is generally used for search engine robots. than humans. Indeed, a pre-displayed static page will be less attractive to users because it will have neither dynamic content nor interactivity.

Rendered on the server

The hosting server does most of the work and renders the page so that the JavaScript code has already been processed and the content is ready to be transmitted to the server. browser or to the search robot of the user when it is requested.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

google on how to improve sites that are not ranked by martinibuster - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

This method allows you to reduce the constraints on the user device that would have been caused by JavaScript processing, which can increase the speed of loading pages.

Server-side rendering also helps to ensure the full content. to be seen and indexed by the search engines.

Client-side rendering

When rendering, JavaScript is processed by the user's browser or by the search engine that requests a page.

The server will handle the initial request, but the rest of the processing and rendering of a page is the responsibility of the user's device or search engine.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

google on how to improve sites that are not ranked by martinibuster - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

It is often not advisable to use client-side rendering because there is a delay between Google pages. then be able to render them.

Google places pages to be displayed in a queue until enough resources are available to process them.

If you rely on Google to generate a customer-side page, this can delay indexing for up to a week after its initial crawl.

Dynamic rendering

Dynamic rendering involves the use of different rendering methods depending on whether the browser of a user or a search engine requests a page.

If your site typically displays the client side, when Googlebot is detected, the page is pre-rendered using a client-side rendering engine (for example, Puppeteer or Rendertron ), so that the content can be viewed and indexed immediately.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

google on how to improve sites that are not ranked by martinibuster - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

Hybrid rendering

Hybrid rendering involves a combination of server-side rendering and client-side rendering.

The basic content is a pre-rendered server. side and sent to the client, whether it is the user's browser or the search engine's crawler that requests the content.

After the initial loading of the page, additional JavaScript code for any interactivity is then rendered on the client side.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello

<img class = "wp-image-286577 size-content_large_1x b-lazy pcimg" src = "https://cdn.searchenginejournal.com/wp-content/themes/sej14/ images-new / loader.gif "alt =" Hybrid rendering "width =" 760 "height =" 451 "data-data-src =" https://cdn.searchenginejournal.com/wp-content/uploads/2019/01 /hybrid-rendering-768×456.png[19459032Thisbreadmarkethousinghisbreadthings-768x456png[19459032ThisbreadthearthearthavehispaintedthisguideutileandwhichyouhavehaveforthheardcomprisesJavaScriptbasesandimpactsontheWebsiteWorries19459010]

Now that you have refined the key terms, you should be better armed to defend yourself.Communications with Developers!

More Resources:

Image Credits

Featured Image Unsplash
Image posted # 1: HTTP archive
Image posted # 2: Computer Hope
All screen shots by the author, January 2019

e to SEJ

Get our daily newsletter from SEJ founder Loren Baker about latest news from the industry!

update of google images google lens live by martinibuster - Understanding the Basics of JavaScript: Your Cheat Sheet by @rachellcostello