Author: John Au-Yeung

To use the window.open method to open a mailto URL, we can call window.open with '_self' as the 2nd argument.

For instance, we write:

const emailTo = 'example@example.com'
const emailCC = 'cc@example.com'
const emailSub = 'subject'
const emailBody = 'body'
window.open(`mailto:${emailTo}?cc=${emailCC}&subject=${emailSub}&body=${emailBody}`, '_self');

We set the emailTo, emailCC, emailSub and emailBody variables to the values we want.

emailTo is the email address to mail to.

emailCC is the email address to CC.

emailSub is the subject of the email.

emailBody is the email body.

We call window.open with ‘mailto:${emailTo}?cc=${emailCC}&subject=${emailSub}&body=${emailBody}‘ as the first argument to open that URL.

The 2nd argument is '_self' so it won’t open a new tab.

Now when we run the code, we should see the default email client open up with the receiver’s address, CC address, subject and body filled in.

To change font size with JavaScript, we can set the style.fontSize property of the element.

For instance, if we have the following HTML:

<span>hello</span>

Then we write the following JavaScript code:

const span = document.querySelector("span");
span.style.fontSize = "25px";

to select the span element and set the font size of its content.

We select the element with document.querySelector and assign the returned element to span.

Then we set span.style.fontSize to '25px' to set the font size of its content to 25px.

Now we should see larger text displayed.

Conclusion

To change font size with JavaScript, we can set the style.fontSize property of the element.

To change image opacity using JavaScript, we can use the setAttribute method.

For instance, if we have the following image:

<img src='https://picsum.photos/200'>

We write:

document
  .querySelector("img")
  .setAttribute("style", "opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

to select the img element with document.querySelector("img").

Then we call setAttribute with 'style' and "opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)" to set the style attribute of the img element to opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50).

Therefore, we see that the resulting image displayed is translucent.

To add autocompletion to ACE Editor, we can set the enableBasicAutocompletion option to true.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.min.js" integrity="sha512-8qx1DL/2Wsrrij2TWX5UzvEaYOFVndR7BogdpOyF4ocMfnfkw28qt8ULkXD9Tef0bLvh3TpnSAljDC7uyniEuQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-javascript.min.js" integrity="sha512-ZxMbXDxB0Whct+zt+DeW/RZaBv33N5D7myNFtBGiqpDSFRLxn2CNp6An0A1zUAJU/+bl8CMVrwxwnFcpFi3yTQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="editor" style='width: 300px; height: 100px'>
  const abc = 1;
</div>

to add the scripts for the Ace Editor and the language tools extension.

Also, we add the JavaScript mode script to enable JavaScript autocompletion.

Then we add a div with some starter code in it.

Next, we write:

ace.require("ace/ext/language_tools");
const editor = ace.edit("editor");
editor.setOptions({
  enableBasicAutocompletion: true
});

to add the language tools extension with:

ace.require("ace/ext/language_tools");

Then we convert the div to an editor with:

const editor = ace.edit("editor");

The argument for edit is the ID of the element we want to convert to a code editor.

Next, we call setOptions with an object with the enableBasicAutocompletion set to true to enable basic JavaScript autocompletion.