Here’s how we can use JavaScript to create a script element in the HTML:
index.js
const script = document.createElement('script');
// use local file
// script.src = 'script.js';
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';
script.async = true;
// make code in script to be treated as JavaScript module
// script.type = 'module';
script.onload = () => {
console.log('Script loaded successfuly');
const box = document.getElementById('box');
box.textContent = 'The script has loaded.';
};
script.onerror = () => {
console.log('Error occurred while loading script');
};
document.body.appendChild(script);
The document.createElement() method creates an HTML element specified by the tag name and returns the element. By passing a script tag, we create a script element.
const script = document.createElement('script');
We set the src property on the script element to specify the script file to be loaded. We specify a remote file with a URL, but we could also specify a local file with a relative or absolute file path.
// use local file
// script.src = 'script.js';
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';
By setting the async property to true, the browser won’t have to load and evaluate the script before continuing to parse the HTML. Instead, the script file will be loaded in parallel to reduce delays and speed up the processing of the page.
script.async = true;
The type attribute indicates what type of script the file is. If it is a JavaScript module, we’ll need to set the type attribute to module to show this.
The appendChild() method adds a DOM element as the last child of a specified parent element. By calling appendChild() on document.body, we add the script file to the body.
document.body.appendChild(script);
The script file is included in the body of the document.
To add the script file to the head of the document instead, we can replace document.body with document.head.
document.head.appendChild(script);
The script file is included in the head of the document.
By Tari Ibaba
/ Last updated on September 11, 2022
In this article, we’ll learn how to easily add any number of weeks to a Date object in JavaScript.
1. Date setDate() and getDate() methods
To add weeks to a Date in JavaScript:
Use the getDate() method on the Date to get the day of the month of the Date.
Add the result of getDate() to 7 multiplied by the number of weeks to add.
Call the setDate() method with this sum as an argument.
For example:
function addWeeks(date, weeks) {
date.setDate(date.getDate() + 7 * weeks);
return date;
}
// May 20, 2022
const date = new Date('2022-05-20T00:00:00.000Z');
const newDate = addWeeks(date, 1);
// May 27, 2022
console.log(newDate); // 2022-05-27T00:00:00.000Z
Our addDays() function takes a Date object and the number of days to add as arguments, and returns the same Date object with the newly added days.
The DategetDate() method returns a number between 1 and 31 that represents the day of the month of the particular date.
The DatesetDate() method changes the day of the month of the Date object to the number passed as an argument.
If the number you specify would change the month or year of the Date, setDate() automatically updates the Date information to reflect this.
function addWeeks(date, weeks) {
date.setDate(date.getDate() + 7 * weeks);
return date;
}
// May 20, 2022
const date = new Date('2022-05-20T00:00:00.000Z');
const newDate = addWeeks(date, 3);
// June 10, 2022
console.log(newDate); // 2022-06-10T00:00:00.000Z
Adding 3 weeks adds 21 days (20 + 21 = 41 days), but May has only 31 days, so the month is incremented by 1 and the day is set to 10 (41 – 31).
Avoid side effects
The setDate() method mutates the Date object it is called on. This introduces a side effect into our addDays() function. To avoid modifying the passed Date and create a pure function, make a copy of the Date and call setDate() on this copy, instead of the original.
function addWeeks(date, weeks) {
const dateCopy = new Date(date);
dateCopy.setDate(dateCopy.getDate() + 7 * weeks);
return dateCopy;
}
const date = new Date('2022-05-20T00:00:00.000Z');
const newDate = addWeeks(date, 3);
console.log(newDate); // 2022-06-10T00:00:00.000Z
// Original not modified
console.log(date); // 2022-05-20T00:00:00.000Z
Functions that don’t modify external state (i.e., pure functions) tend to be more predictable and easier to reason about, as they always give the same output for a particular input. This makes it a good practice to limit the number of side effects in your code.
2. date-fns addWeeks() function
Alternatively, you can use the pure addWeeks() function from the date-fns NPM package to quickly add weeks to a Date. It works similarly to our addWeeks() function.
import { addWeeks } from 'date-fns';
const date = new Date('2022-05-20T00:00:00.000Z');
const newDate = addWeeks(date, 3);
console.log(newDate); // 2022-06-10T00:00:00.000Z
// Original not modified
console.log(date); // 2022-05-20T00:00:00.000Z
To remove a query string from a URL in JavaScript:
Create a URL object from the URL string using the URL() constructor.
Set the search property of the URL object to an empty string ('').
Get the resulting URL with the toString() method of the URL object.
const url = 'https://example.com/posts?page=5&sort=desc#hash';
const urlObj = new URL(url);
urlObj.search = '';
const result = urlObj.toString();
console.log(result); // https://example.com/posts#hash
We can use the URL class to parse, construct, normalize, and encode URLs.
The URL() constructor returns a newly created URL object representing the URL string passed as an argument. URL objects have properties that allow us to easily read and modify the components of a URL.
We use the useState() to create a state variable in the component. This hook returns an array of two variables, generally called state and setState. The state variable (visible) holds the current visibility state, and the setState function (setVisible) updates it.
const [visible, setVisible] = useState(true);
We set an event handler to the onClick event of the button, so when the button is clicked, the handler function will be called.
<button onClick={removeElement}>Remove</button>
In the handler function, we use the setState function for the visibility state to update the state.
Instead of passing the negated value directly, we pass a callback function to setState that returns the negated value. This ensures that we always get the most recent state value.
Tip
React batches state changes for performance reasons, so the state may not be updated immediately after setState is called, in the order we might expect. This is why we always pass a function to setState when the new state is computed from the data of the previous state.
Remove element from list onclick
To remove an element from a list onclick:
Attach an event handler to the onClick event of every element in the array representing the list.
In the event handler for a particular element, call the filter() method on the array, specifying a condition that is true for every element in the array apart from the one to be removed.
Use setState to update the state array with the result returned from filter().
With the map() method, we render a button for each element in the array. For each button, we attach an event handler that will call the removeElement() method, passing as an argument the index of the element that the button represents.
removeElement() removes an element by returning a condition from the filter() callback that is true only for elements in the array that don’t have the index passed to removeIndex(). Doing this excludes the element with that index from the array, so when the array state is updated, the button representing that element is no longer rendered.
Trying to remove the element from the array by modifying it using a function like splice() will not work:
const removeElement = (index) => {
// ⚠️ Mutating the array like this will not update the view
fruits.splice(index, 1);
};
State is meant to be immutable in React, so we can’t update the array by mutating it. It has to be replaced with a new array returned from filter() for the view to update.
Remove object element from list onclick
We can also use this approach to remove an element represented by an object from a list onclick.
Instead of filtering by index, this time we filter by the id property to remove an item from the array and remove the element from the list in the DOM.
In this article, we’ll learn how to easily fix the “Component is missing template or render function” warning in Vue.
Here are some possible causes of this warning:
Rendering a component that has no template.
Not passing the App component to the createApp() method.
Using the result of app.component() to set a component for a Vue Router route.
We’ll go through each of them in this article.
1. Rendering a component that has no template
The “Component is missing template or render function” warning occurs when you import a component and add it to the markup, but the file of the component has no template tag. To fix it, add a template tag with a child element to the component file.
There will be a warning because PostList.vue is empty and doesn’t have a template tag.
Here’s how we can remove the warning:
components/PostList.vue
<template>
<div></div>
</template>
2. Not passing the App component to the createApp() method
To fix the “Component is missing template or render function” warning in Vue, ensure that the createApp() method is called with the App component as an argument.
For example, the file that sets up your Vue app might look like this:
main.js
import { createApp } from 'vue';
import * as VueRouter from 'vue-router';
import Home from './HomePage.vue';
// ⚠️ don't pass {} to createApp()!
const app = createApp({});
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
});
app.use(router);
app.mount('#app');
There will be a warning here because we passed an empty object ({}) to createApp() instead of a component object.
We can remove the warning in this case by importing the App component and passing it to createApp():
import { createApp } from 'vue';
import * as VueRouter from 'vue-router';
import Home from './HomePage.vue';
// import App component
import App from './App.vue';
// ✅ removed warning
const app = createApp(App);
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
});
app.use(router);
app.mount('#app');
3. Using the result of app.component() to set a component for a Vue Router route
Instead of importing a component from a file, you might have chosen to create one with the component() method of the object returned by createApp().
import { createApp } from 'vue/dist/vue.esm-bundler';
import * as VueRouter from 'vue-router';
import App from './App.vue';
const app = createApp(App);
// app.component() returns the app instance, not a component
// object
const Home = app.component('HomePage', {
template: '<div>Home</div>',
});
// ⚠️ don't set "component" to the app instance!
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
});
app.use(router);
app.mount('#app');
When app.component() is called with a definition object (the 2nd argument), it returns the application instance to allow chaining calls.
To fix the “Component is missing template or render function” warning in this case, call the app.component() method again with only the component name as an argument, and use the component object returned to define a route for Vue Router.
import { createApp } from 'vue/dist/vue.esm-bundler';
import * as VueRouter from 'vue-router';
import App from './App.vue';
const app = createApp(App);
// first app.component() call defines component
app.component('HomePage', {
template: '<div>Home</div>',
});
// ✅ fix: second app.component() call returns component object
const Home = app.component('HomePage');
// ✅ sets "component" to component object
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
});
app.use(router);
app.mount('#app');
By Tari Ibaba
/ Last updated on September 10, 2022
A spinner is used to indicate an ongoing process to the user. They are suitable for operations that don’t take very long to complete, and they help to enhance the responsiveness of an application. Read on to learn more about the Vue Bootstrap spinner component and the various customization options it provides.
The Boostrap Vue Spinner Component (b-spinner)
Boostrap Vue provides the b-spinner component for creating spinners. It starts spinning as soon as it has been rendered on the page.
We can use the type prop to display a particular type of spinner. By default the type is set to border, which makes the spinner transparent and gives it a thick circle border.
b-spinner comes with a variant prop that lets us customize the color of the spinner. There are a bunch of values it can take, including primary, secondary, danger, warning, success, and info.
Here we create multiple border spinners with many different colors:
We can add any of the Bootstrap Vue margin utility classes to a b-spinner to adjust its spacing. Here we use the ms-4 class from Bootstrap to add a left margin to the second spinner:
Here’s a more practical example of using spinners within buttons. When the button is clicked to save, it changes its text and shows the spinner to indicate the ongoing save operation (simulated with a timeout). Then it hides the spinner and changes the text again after the save.
We use the status data property to track the current save state, and we create a buttonText computed property to determine what the button label should be from status.
Conclusion
A spinner is useful for indicating app operations in the process of being completed. In this article, we learned how to use the spinner component from Bootstrap Vue (b-spinner) to easily create and customize spinners.
To check if a string contains numbers in JavaScript, call the test() method on this regex: /\d/. test() will return true if the string contains numbers. Otherwise, it will return false.
We pass the result of match() to the Boolean() constructor to convert it to a Boolean value. Boolean() converts truthy values to true, and falsy values to false.
In JavaScript, there are six falsy values: undefined, null, NaN, 0, '' (empty string), and false. Every other value is truthy.
As programmers, we’re always looking to improve. We want to write cleaner, more maintainable code, learn advanced language features for elegant and concise code, make our code easier for others to read and understand, and create more reusable and effective test cases.
If you’re looking to improve your skills, there are tons of resources available to help you out. From YouTube videos to seminars to answers on Stack Overflow, there’s no shortage of information out there. However, if you really want to delve deep into a particular subject, it’s hard to beat a good book. Specifically, books written for that specific field will provide a detailed explanation of all the important concepts, along with insights from experienced authors.
Check out these top JavaScript books to boost your skills! Whether you’re new to JavaScript or a seasoned pro, these books are comprehensive guides that can take you from beginner to expert. Plus, you can use them as a reference to brush up on concepts you may have forgotten or aren’t quite sure about in the future.
This has been a top-selling book for almost 25 years. The seventh edition is fully updated to cover the 2020 version of JavaScript (ES2020), including new chapters that cover classes, modules, iterators, generators, Promises, async/await, and metaprogramming. The book is meant for programmers interested in learning JavaScript and for web developers that want to improve their knowledge and understanding of the language.
Topics covered include: types, values, variables, expressions, operators, statements, objects, arrays, functions, classes, modules, iterators, generators, Promises, async/await, data structures, regular expressions, JSON, buffers, files, streams, and more.
Newly updated only a few years back, Eloquent JavaScript gives you a closer look at essential JavaScript language features to help you quickly start writing beautiful and effective code.
It has been updated to reflect a more recent state of JavaScript and web browsers and includes brand-new material on features like class notation, arrow functions, iterators, async functions, template strings, and block scope.
A great read for beginners and experts alike, the book is packed with plenty of extensive examples that let you have a practical understanding of the concepts, as well as exercises and full-chapter projects that give you hands-on experience with writing your own programs.
Here are some of the things you’ll learn:
Essential elements of programming in general, like syntax, control flow, and data.
How to organize and clarify your code with object-oriented and functional programming language techniques.
How to write browser scripts and make basic web applications.
How to use the DOM effectively to interact with webpages.
If you’re new to programming, this will be a great book. It explains basic coding concepts with simple English and no assumptions about what you already know. If you’re an intermediate JavaScript developer, you will also benefit from the book, as it comes with a variety of exercises that will give you extra practice and sharpen your skills in any weak areas.
Topics covered include:
Fundamentals of JavaScript such as variables, math expressions, strings, if statements, arrays, loops, functions, etc.
Advanced JavaScript concepts such as constructors, prototypes, and exception handling.
Head First is series known for its highly visual and interactive approach to teaching. This is a great read if you’re just getting started with JavaScript and want a less formal approach to learning the language that doesn’t use only text and all kinds of technical jargon. You’ll be playing games, solving puzzles, studying riddles, and interacting with JavaScript in many unconventional ways. You’ll also create a lot of real code so that you can start creating your own web applications.
It covers important topics such as: the inner details of JavaScript, how JavaScript works with the browser, data types in JavaScript, arrays, the power of functions, how to use objects, closures, writing and testing applications, etc.
You Don’t Know JS is not a single book but is a collection of six well-written books for mastering JavaScript that can be read independently. Each book in the series gives a you thorough exploration of the core mechanisms of JavaScript to help you gain a deeper understanding of how the language works. The author takes a practical and thorough approach to explain the concepts in a way that will quickly bring you up to speed with the unique language features.
Effective JavaScript is organized around 68 proven ways to write better JavaScript, demonstrated with concrete examples. With this book, you’ll learn how to work effectively with flexible and expressive features of the language, and how to avoid pitfalls. No matter how long you’ve been writing JavaScript, Effective JavaScript will strengthen your understanding of this powerful language, so that you can build more predictable, reliable, and maintainable programs. Topics covered include: better ways to use prototype-based object-oriented programming, subtleties, and solutions for working with arrays and dictionary objects, precise and practical explanations of JavaScript functions and variable scoping semantics, etc.
Douglas Crockford is a highly renowned JavaScript expert in the development community, and in this book, he highlights the beautiful parts of the language that lets you create effective code. JavaScript was developed and released in a hurry before it could be refined, and this led to a lot of unrefined and error-prone features in the language. In JavaScript: The Good Parts, Crockford filters out the language blunders to offer you a detailed look at the genuinely elegant parts of the language in areas like syntax, objects, functions, inheritance, arrays, regular expressions, and methods.
This book delivers a fully illustrated guide to making your websites more interactive and your interfaces more interesting and intuitive. You’ll explore basic programming language concepts that assume no prior knowledge of programming, beyond an ability to create a web page using HTML & CSS.
There is little reason to learn jQuery in 2022, but the book also teaches you how to use the library to simplify the process of writing scripts, after you’ve gained a solid understanding of JavaScript.
Professional JavaScript for Web Developers is a book written to help intermediate and advanced programmers improve the quality of their code. It looks into modern language features that will help you write cleaner code and become a more polished JavaScript developer. It explains fundamental web development concepts such as the document object model (DOM), the browser object model (BOM), events, forms, JSON, error handling, and web animation. It also covers advanced browser APIs such as geolocation, web workers, service workers and fetch. There are hundreds of working code examples that you can practice with to get familiar with the new concepts.
In this book, you’ll master key JavaScript concepts such as functions, closures, objects, prototypes, and promises, using practical examples that clearly illustrate each concept and technique. You’ll discover best practice techniques like testing and cross-browser development, and look into regular expressions and asynchronous programming.
JavaScript for Kids will be a gentle introduction to programming for aspiring developers. It teaches programming essentials through patient, step-by-step examples with lighthearted illustrations. The book has three parts; you’ll start with the basics like strings, conditional statements, and loops in part 1, then you’ll move on to more advanced topics like object-oriented programming, timers, and browser events in part 2. In part 3, you’ll learn how to use the HTML5 canvas to create drawings and animate them with JavaScript. After each part, you’ll write a cool game to gain a practical understanding of the lessons covered.
You can always improve your skills, no matter how long you’ve been programming. Whether you’re just getting started with JavaScript or you’re a seasoned expert, the knowledge from these books will refresh your memory on various language features, and help you write cleaner and more polished code.
This post contains affiliate links. We may earn a commission if you make a purchase through them, at no additional cost to you.
Let’s learn how to easily subtract any number of seconds from a Date object in JavaScript.
1. DatesetSeconds() and getSeconds() methods
To subtract seconds from a Date:
Call the getSeconds() method on the Date to get the number of seconds.
Subtract the seconds.
Pass the result of the subtraction to the setSeconds() method.
For example:
function subtractSeconds(date, seconds) {
date.setSeconds(date.getSeconds() - seconds);
return date;
}
// July 10, 2022 at 5:35:40 pm
const date = new Date('2022-07-10T17:35:40.000Z');
const newDate = subtractSeconds(date, 10);
// July 10, 2022 at 5:35:30 pm
console.log(newDate); // 2022-07-10T17:35:30.000Z
Our subtractSeconds() function takes a Date object and the number of seconds to subtract as arguments. It returns the same Date object with the seconds subtracted.
The DategetSeconds() method returns a number between 0 and 59 that represents the seconds of a particular Date.
The DatesetSeconds() method sets the seconds of a Date to a specified number.
If the seconds subtracted decrease the minute, hour, day, month, or year of the Date object, setHours() automatically updates the Date information to reflect this.
// July 10, 2022 at 5:20:00 pm
const date = new Date('2022-07-10T17:20:00.000Z');
date.setSeconds(date.getSeconds() - 130);
// July 10, 2022 at 5:17:50 pm
console.log(date); // 2022-07-10T17:17:50.000Z
In this example, decreasing the seconds of the Date by 130 decreases the minutes by 3 and sets the seconds to 50.
Avoiding side effects
The setSeconds() method mutates the Date object it is called on. This introduces a side effect into our subtractSeconds() function. To avoid modifying the passed, and create a pure function, make a copy of the Date and call setSeconds() on this copy, instead of the original.
function subtractSeconds(date, seconds) {
// make copy with Date() constructor
const dateCopy = new Date(date);
dateCopy.setSeconds(date.getSeconds() - seconds);
return dateCopy;
}
// July 10, 2022 at 5:35:40 pm
const date = new Date('2022-07-10T17:35:40.000Z');
const newDate = subtractSeconds(date, 10);
// July 10, 2022 at 5:35:30 pm
console.log(newDate); // 2022-07-10T17:35:30.000Z
// original not modified
console.log(date); // 2022-07-10T17:35:40.000Z
Tip: Functions that don’t modify external state (i.e., pure functions) tend to be more predictable and easier to reason about, as they always give the same output for a particular input. This makes it a good practice to limit the number of side effects in your code.
2. date-fns subSeconds() function
Alternatively, we can use the subSeconds() function from the date-fns NPM package to quickly subtract seconds from a Date. It works similarly to our pure subtractSeconds() function.
import { subSeconds } from 'date-fns';
// July 10, 2022 at 5:35:40 pm
const date = new Date('2022-07-10T17:35:40.000Z');
const newDate = subSeconds(date, 10);
// July 10, 2022 at 5:35:30 pm
console.log(newDate); // 2022-07-10T17:35:30.000Z
// original not modified
console.log(date); // 2022-07-10T17:35:40.000Z
To use a button as a Vue Router link, wrap the button element in a router-link component. When the button is clicked, the browser will navigate to the specified route without refreshing the page.
Navigating the the /posts route without refreshing the page.
The router-link component has a default slot with a navigate function property.
The to prop is used to set the route that the browser should navigate to when this navigate function is called.
We make navigate an event handler of the buttonclick event, so it is called when the button is clicked, making the browser navigate to the route specified with the to prop.
Setting the custom prop to true tells the router-link not to wrap its content in an <a> element, and allow us to create a custom router link.
Use button as Vue Router link in Vue 2.x
The above method only works for Vue 3.x though. If working with Vue 2.x, you can use a button as a router link by setting the tag prop to the name of the button component, and setting the to prop to the specific route.
