Author: John Au-Yeung

Sometimes, we want to create SVG graphics using JavaScript.

In this article, we’ll look at how to create SVG graphics using JavaScript.

How to create SVG graphics using JavaScript?

To create SVG graphics using JavaScript, we can use the createElementNS and setAttributeNS methods.

For instance, we write

const svgNs = "http://www.w3.org/2000/svg";
const shape = document.createElementNS(svgNs, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r", 20);
shape.setAttributeNS(null, "fill", "green");

to call document.createElementNS to create a circle element with the svgNs namespace.

Then we call shape.setAttributeNS to add the cx, cy, r and fill attributes to the shape circle element and set them to values in the 3rd argument.

Conclusion

To create SVG graphics using JavaScript, we can use the createElementNS and setAttributeNS methods.

Sometimes, we want to add nested JavaScript classes.

In this article, we’ll look at how to add nested JavaScript classes.

How to add nested JavaScript classes?

To add nested JavaScript classes, we can add a class as a static property of another class.

For instance, we write

class A {
  //...
}
A.B = class {
  //...
};

to add the A.B static property and assign it to a class.

Conclusion

To add nested JavaScript classes, we can add a class as a static property of another class.

Sometimes, we want to check for special characters in string with JavaScript.

In this article, we’ll look at how to check for special characters in string with JavaScript.

How to check for special characters in string with JavaScript?

To check for special characters in string with JavaScript, we can use the regex test method.

For instance, we write

const format = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;
const hasSpecialChars = format.test(string);

to define the format regex that checks for the existence of any special characters listed in the square brackets.

Then we call format.test with string to check if string has the characters listed in format.

Conclusion

To check for special characters in string with JavaScript, we can use the regex test method.

Sometimes, we want to get a range of items from a JavaScript array.

In this article, we’ll look at how to get a range of items from a JavaScript array.

How to get a range of items from a JavaScript array?

To get a range of items from a JavaScript array, we can use the array slice method.

For instance, we write

const fruits = ["apple", "banana", "peach", "plum", "pear"];
const slice1 = fruits.slice(1, 3);
const slice2 = fruits.slice(3);

to call fruits.slice with 1 and 3 to return an array from fruits at index 1 and 2.

Next, we call slice with 3 to return an array from fruits at index 3 to the end of the array.

Therefore, slice1 is ['banana', 'peach'].

And slice2 is ['plum', 'pear'].

Conclusion

To get a range of items from a JavaScript array, we can use the array slice method.