Adding JavaScript
To add JavaScript to a web page, there are two main approaches:
- Using a
scripttag in theheadelement: In this version, you would add a script tag to an existing HTML page, for example, namedindex.html.<!-- Alt1 --> <script> // JavaScript here </script> - Pointing to a stand-alone file: In this case, you would write your JavaScript in an existing file,
my-javascript-file.js:<!-- Alt2 --> <script src="my-javascript-file.js"></script>
The role of JavaScript
When JavaScript was first added to the browser, it played the role of adding interactivity. Today, JavaScript often has an extended role as part of application frameworks like Vue.js, React, and Angular. In such frameworks, a developer can now declaratively define templates that, with the help of JavaScript, can be turned into static HTML, with event handling added, to respond to user interactions. Ultimately, all this is then sent to the browser to be rendered by it.
Adding JavaScript to a page
Let’s show next how we can add JavaScript to a page by providing the following prompt:
[Prompt]
Create web page with a script tag.
[End of prompt]
We end up with a web page that also contains a script tag. Note how the prompt is added as a comment at the top of the page. That’s how GitHub Copilot knows to suggest a text completion:
[Prompt response]
<!-- create web page with a script tag -->
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<script>
alert("Hello World!");
</script>
</body>
[End of response]
In this case, the code calls alert("Hello World"), which will show a dialog box with the text “Hello World.”
A second example: adding a JavaScript library/framework
The first example might not be all that useful, but let’s add something you’re likely to do, like adding a framework like Vue.js. The reason for adding a framework like Vue.js is that you want to build a large application consisting of a lot of interactivity and many different pages. To keep things organized, and make it easy for other developers to contribute, you want a framework like Vue.js.
[Prompt]
Add Vue 3.
[End of prompt]
This time, we place ourselves in the header tag. See the HTML comment in the HEAD tag below to indicate the prompt we’re using as input to GitHub Copilot:
<head>
<!-- add Vue 3 -->
</head>
This prompt results in the following suggestion:
[Prompt response]
<script src="https://unpkg.com/vue@next"></script>
[End of response]
You can easily build on this by adding a prompt that asks to set up an entry point (most SPA frameworks work on the idea of having an entry point, an element where the app will be rendered):
[Prompt]
Add Vue 3 entry point.
[End of prompt]
This results in the following code:
[Prompt response]
<!-- add Vue 3 entry point -->
<div id="app">
<h1>{{ message }}</h1>
</div>
[End of response]
Placing our cursor below the script tag that imported Vue.js will lead to our AI assistant generating instructions for what code we should add to further set up Vue.js. It’s not enough to just add script to Vue.js; some additional code is needed.
Luckily, with our cursor placement like below, GitHub Copilot understands from existing HTML comments (prompts) what code is missing and will suggest that code at the location of our cursor (if a Copilot suggestion doesn’t appear, try pressing the Spacebar key or the Return key):
[Prompt]
No prompt given
[End of prompt]
[Prompt response]
<script src="https://unpkg.com/vue@next"></script>
<!-- below is rendered by just placing cursor here -->
<script>
// create Vue 3 instance
const app = Vue.createApp({
data() {
return {
message: 'Hello World!'
}
}
})
// mount Vue 3 instance to DOM element
app.mount('#app')
</script>
[End of response]
It’s worth calling out again that GitHub Copilot had enough context to generate more suggestions by us only using Tab and Return key without the need to provide an extra prompt..
Running this in a browser returns “Hello World,” which is what’s expected given the above code. The reason this code works, in case you’re not familiar with Vue.js, is that it contains the bare minimum of what’s needed for it to be referenced and configured:
scripttag, referencing Vue.js- Creation of an app instance that also defines a data function with a
messageproperty - A call to
mount(), which ensures that the identified HTML tag (withid = app) is interpolated, and theHTMLtag is replaced with the value of the propertymessage
When building a more advanced Vue.js project, please use the Vue CLI over the approach chosen above. For smaller proofs of concept, this approach could be OK.
