JavaScript itself is quite compact but still very flexible. Developers have written a wide variety of tools based on JavaScript, unlocking a large amount of additional functionality with minimal effort.
These include:
– Programming interfaces for browser applications (APIs) – APIs built into web browsers, offering features such as dynamic HTML creation and CSS style setting, collecting and manipulating a video stream from the user’s video camera, or generating 3D graphics and images.
– Third-party APIs to allow developers to integrate functionality into their sites from other content providers, such as Twitter or Facebook.
– Third-party frameworks and libraries that you can include in HTML code that allow you to build sites and applications quickly.
Next, I will present some aspects of the main language, and you will play with some API functions of the browser.
An example “hello world.”
The section above might sound very interesting, and so should you – JavaScript is one of the most lively web technologies, and as you begin to refine it, your web sites will enter a new dimension of power and creativity.
However, becoming comfortable with JavaScript is a little more complicated than being comfortable with HTML and CSS. Maybe you have to start with a little and keep working in small, consistent steps. To begin with, I’ll show you how to add some JavaScript basics to your page, creating an example “hello world!”
1. First, go to your test site and create a new directory called “scripts.” Then, in the new scripts directory, you just created, create a new file called main.js. Save it to your scripts directory.
2. Next, add the following element to a new line in your index.html file just before closing the </body> tag:
<script src = “scripts / main.js”> </script>
3. In principle, it does the same as the <link> element for CSS – it includes JavaScript on a page, and can have an effect on HTML (along with CSS, and anything else on the page).
4. Now add the following code to the main.js file:
var myHeading = document.querySelector (‘h1’);
myHeading.textContent = ‘Hello world!’;
5. Finally, make sure that the HTML and JavaScript files are saved, and then upload the index.html file into your browser.
The reason I put the <script> element near the bottom of the HTML file is because the HTML is loaded by the browser in the order it appears in the file. If JavaScript is loaded first and you should modify the HTML below, it may not work because JavaScript is loaded before the HTML it needs to work. Therefore, putting JavaScript at the bottom of the HTML page is often the best decision.
Your title text has now been changed to “Hello world!” using JavaScript. You first did this by using a function called querySelector () to get a reference to your title and keep it in a variable called myHeading. This is very similar to what you did when using CSS selectors. When you want to do something on an item, you must first select it.
After that, set the value of the property of the myHeading textContent variable to “Hello world!”