Category: JavaScript Answers

Categories
JavaScript Answers

How to Add Autocompletion to ACE Editor?

Labrador retriever puppy walking on green grass

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.

Categories
JavaScript Answers jQuery

How to Set Margin CSS Properties with jQuery?

white and brown long coated small dog

To set margin CSS properties with jQuery, we can call the css method to change the margin CSS properties.

For instance, if we have the following HTML:

<div>
  hello
</div>

Then we write:

$('div').css('margin-left', '100px');

to select the div with $('div').

Then we call the css method on the returned div jQuery object with the property key and value we want to set respectively.

Therefore, we set margin-left to 100px.

The unit must be included.

Now we should see a 100px left margin added to the div.

Categories
JavaScript Answers

How to Convert Binary Representation of a Number from String to Integer Number in JavaScript?

yellow Labrador puppy on floor

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.

Categories
JavaScript Answers

How to Get All User Defined Window Properties with JavaScript?

yellow labrador puppies in green plastic container

To get all user defined window properties with JavaScript, we can use the Object.getOwnPropertyNames method to get all the non-inherited property keys of the window object.

For instance, we write:

let globalProps = [];
const readGlobalProps = () => {
  globalProps = Object.getOwnPropertyNames(window);
}

const findNewEntries = () => {
  const currentPropList = Object.getOwnPropertyNames(window);
  return currentPropList.filter(propName => globalProps.indexOf(propName) === -1);

}

readGlobalProps()
window.foobar = 2;
console.log(findNewEntries())

We have the readGlobalProps function that calls Object.getOwnPropertyNames with window and assigned the returned array of string keys to globalProps.

Then we define the findNewEntries function that gets the array of window keys again after adding user-defined window properties and assigned the returned results to currentPropList.

Then we call currentPropsList.filter to filter out the items that are also in globalProps to exclude the built non-user-defined keys from the returned array.

Next, we call readGlobalProps first to get all the non-user-defined window keys.

Then we add the foobar user-defined property.

And then we call findNewEntries to return the user-defined window property keys.

Therefore, the console.log should log ["foobar"].

Categories
JavaScript Answers jQuery

How to Validate that a Form with Multiple Checkboxes to Have at Least One Checked with jQuery?

white and brown long coated small dog lying on white textile

To validate that a form with multiple checkboxes to have at least one checked with jQuery, we can call the serializeArray method on the selected checkboxes to see how many of them are checked.

For instance, if we have the following form:

<form>
  <fieldset id="cbgroup">
    <div><input name="list" id="list0" type="checkbox" value="newsletter0">zero</div>
    <div><input name="list" id="list1" type="checkbox" value="newsletter1">one</div>
    <div><input name="list" id="list2" type="checkbox" value="newsletter2">two</div>
  </fieldset>

  <input name="submit" type="submit" value="submit">
</form>

Then we can check how many checkboxes are checked by writing:

const onSubmit = (e) => {
  e.preventDefault()
  const fields = $("input[name='list']").serializeArray();
  if (fields.length === 0) {
    console.log('nothing selected');
    return false;
  } else {
    console.log(fields.length, "items selected");
  }
}

document.forms[0].addEventListener('submit', onSubmit)

We have the onSubmit function that’s used as the submit handler of the form.

In the function, we call e.preventDefault to prevent the server-side submission behavior.

Then we call $("input[name='list']").serializeArray() to return an array of checked checkboxes and assign it to fields.

Therefore, if fields.length is 0, then nothing is checked.

Otherwise, at least some checkboxes are checked.