Web developer specializing in React, Vue, and front end development.
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.
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"].
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.
Sometimes, we want to use constants in Vue.js component templates.
In this article, we’ll look at how to use constants in Vue.js component templates.
To use constants in Vue.js component templates, we can expose them to the template by putting them in the object returned by the data method.
For instance, we can write:
<template>
<p>{{ CREATE_ACTION }}</p>
<p>{{ UPDATE_ACTION }}</p>
</template>
<script>
const CREATE_ACTION = "create";
const UPDATE_ACTION = "update";
export default {
name: "App",
data() {
return {
CREATE_ACTION,
UPDATE_ACTION,
};
},
};
</script>
to add the constants we want to use in the template with:
const CREATE_ACTION = "create";
const UPDATE_ACTION = "update";
Then we put them both in the object we return in the data method.
Finally, we use the in the template by putting them in between their own curly braces.
Now we see:
create
update
displayed.
To use constants in Vue.js component templates, we can expose them to the template by putting them in the object returned by the data method.
To limit number of tags with jQuery Select2 drop down, we can set the maximumSelectionLength property to the max number of values we can select.
For instance, we can write:
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select id="select2" multiple>
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
<option>Some Text</option>
<option>Other Text</option>
</select>
We create a select element with the multiple attribute.
Then we write:
$('select').select2({
maximumSelectionLength: 3
});
We call select2 with an object with the maximumSelectionLength property set to 3.
Now we can only select 3 choices max.