Category: JavaScript

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.

To convert binary representation of a number from string to integer number in JavaScript, we can use the parseInt function.

For instance, we write:

const a = parseInt("01001011", 2);
console.log(a)

We call parseInt with a binary string and the radix 2, which is the radix for parsing binary numbers.

parseInt will return a decimal integer version of the binary number string.

Therefore, a is 75 according to the console log.