Client-Side JavaScript

Oct 20, 2022

Client-Side

We also use JavaScript on the client-side for code that runs in the browser (as opposed to server-side which runs on Node.js). These JavaScript files go into the /public/javascripts directory of our project. That means that a file called script.js would be sourced in a handlebars template like this:

<script src="/javascripts/script.js"></script>

Client vs Server-Side

It is very important to recognize the difference between our server-side and client-side code. Treat them as separate environments. For example the client-side code does not get access to the variables used in the server-side code or the ability to use modules.

Events

There are a few different ways that we can call JavaScript on our client-side pages, but one of those ways is via event handlers, which will trigger when certain events occur. For instance, the most common event we will use in this course is onclick.

Example of setting up an event on a button:

<button type="button" onclick="doSomething()">
  Click Me!</button>

This means that when the button is clicked, it will call the doSomething() function. It can be useful to have one function that powers lots of buttons, but you typically still need to know which button was clicked.

You can pass in the element that was clicked using the “this” keyword:

<button type="button" onclick="doSomething(this)">
  Click Me!</button>

It is often then useful to use traversal to do something that is in proximity of the button clicked. For example:

function doSomething(element) {
  element.parentNode.remove();  //remove the button's parent
}

Advantages

Advantages

  • The main advantage of client side scripting is that it is lightweight and relatively easy to implement
  • The editing and executing the code is fast.
  • Data processing is done on the client side from the server, which makes it easier to scale applications with large numbers of users.
  • The client side data validation can be possible using the client side scripting language like JavaScript.

Advantages

  • The client side programming helps to perform the complex tasks in relatively few steps.
  • Script code only executed by the browser without connecting the server.
  • Browser respond immediately when user presses any key, mouse movement, clicks, etc.

Disadvantages

Disadvantages

  • The main disadvantage of client side scripting is that it is unsecure because the code is sent as is to the client and, therefore, visible to it if the client looks at the sources of his web page. In short, code is usually visible.
  • Client side programming cannot be used if we need to access databases or needs to transmit sensitive data over the internet.
  • There is no guarantee that user has enabled JavaScript on his computer’s browser.

Disadvantages

  • The smooth running of the script (or program) depends entirely on the client’s browser, its configuration, and security level.
  • The web application based on the heavy JavaScript can be complicated to debug and maintain.
  • Client side scripting languages are usually more limited in functionality than server side scripting languages.

Examples

Timing

<!DOCTYPE html>
<html> <body>

<h2>JavaScript Timing Sample</h2>
<p>Click on "Try it". Wait 5 seconds, and the page will alert "Hello How are you!!".</p>
<button onclick="setTimeout(myFunction, 5000);">Try it</button>

<script>
function myFunction() {
  alert('Hello How are you!!');
}
</script>

</body> 
</html>

Timing Example

What time is it?

<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

Current Time