We will do some basic JavaScript coding via the Chrome DevTools console; specifically, just calling a built-in the alert() function to display an alert.
Open up Chrome. It doesn't matter at this point which website (if any) you go to, since we will be writing a standalone code.
Open up Chrome DevTools by going through the menu. Go to the Console panel.
Now, at the bottom of your screen, you'll see an area where you can enter code, designated by >. Clicking anywhere after this will allow you to enter the code.
Type in the following code, and then hit Enter:
alert('Packt publishing loves open source. You want to write? See http://authors.packtpub.com');You should see an
alertbox pop-up with the text 'Packt publishing loves open source. You want to write? See http://authors.packtpub.com' (or whatever string you passed into thealertfunction). After the code is executed, it will appear in the log above the input line:
We've just executed some JavaScript code without having to edit and save any files. Although we did a simple alert, we are really not limited by what we can do. Anything that we can save in a JavaScript file, we can also enter in the Console.
You'll also notice that the same code that we typed in appeared in the log area. We'll also get an error message if any errors occur in the code—go ahead and try it! Instead of typing alert('My alert'); type something like fakealert('Boom');. This will give you a reference error, since nowhere is the fakealert()function defined —alert(); on the contrary, it is a built-in function, so we can call it from any page.
That's pretty much all there is to it! The rest just builds on these principles. Let's go ahead and do just one more thing, something that is slightly more involved, before jumping into manipulating an OpenLayers page.