DEV Community: safejourney-art

Comments on Ajax and WebSocket

safejourney-art — Sat, 13 Mar 2021 14:08:42 +0000

Hi, everyone!
This post is for my previous post 'Two ways to post data without reloading'. The contents written there are very nice and/or curious. All the techniques are correct. However, I have overcome troubles and difficulties and have learned a lot of new knowledges since I have posted it. I introduce you some new ideas.

Let's start with WebSocket.
In the previous post, we used a dummy span to emit a message to a specific person. Namely, a message is emitted to everyone through the dummy span. But the span is not displayed with CSS 'display:none'. And then the message is copied to a specific person.

I noticed a more simple way. It is to use a global variable.

var message;
socket.on('message receive', (msg) => {
    message = msg;
});

In this way, the variable msg is substituted for the variable message and the message is locally displayed.
The point is, in WebSocket, the examle above is Socket.io, all things written within the function of 'socket.on' are globally emitted. On the one hand, even if the message goes through inside 'socket.on', it is locally displayed if it goes outside that.
You can use this way for both the client- and the server- sides.

Next, I comment on the difference between Ajax and WebSocket.
One is, of course, Ajax is always locally posted and on the one hand, WebSocket is normally globally emitted.
This means that Ajax doesn't need to use the technique above on the server-side.
Actually, NOT 'doesn't need to use', BUT 'cannot use'. This is (one of )the difference(s) between Ajax and WebSocket!
Namely, if you sent a message "Hello" using Ajax POST, the code on the server-side

var message;
app.post('/ajaxpost' (req, res) => {
    message = req.body.message;
    console.log("A: " + message);
});
console.log("B: " + message);

returns 'A: Hello' and 'B: undefined'.
Well, above is the example of Express.js.
So, Ajax is always locally. But if WebSocket, you can.

Safe Journey!

Two ways to post data without reloading

safejourney-art — Mon, 13 Jul 2020 17:33:57 +0000

INTRODUCTION

Today, I introduce to you two ways to POST data WITHOUT RELOADING. As you know, here POST means that of html method, i.e.
<form action='/actionname' method='post'>.
As you know again, the POST method reloads the page when the form is submitted. If the page includes some ajax part, it's cleaned up of course when submitted.
Basically, POST method is used to return a result, something like a login page, a mail form and stuff. In other words, POST method is supposed to have GET method which returns a next page.
However, we face and/or overcome some troubles like above sometimes.

The content of this post is based on my experience and the following codes are all verified already. However, the content is not sophisticated and my English may often make you boring. But I believe that this gives you a new inspiration. This may be a treasure map for you.

FIRST WAY: AJAX

This is a basic and simple way. Ajax is used to change a part of a page, e.g. search result. In such a case, Ajax utilises GET method.

function functionname(){
  var ajax = new XMLHttpRequest();
  ajax.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
      document.getElementById("ID").innerHTML = this.responseText;
    }
  };
  ajax.open("GET", "filename.html", true);
  ajax.send();
}

Similarly, Ajax has also POST method.

function functionname(){
  var ajax = new XMLHttpRequest();
  var data = document.getElementById("ID");
  var formdata = new FormData(data);
  ajax.open("POST", "/actionname", true);
  ajax.send(formdata);
}

Let me explain. If you click an html element <button onclick="functionname()">, some data a FORM element <form id="ID"> has is sent to server-side. The point is that the usual GET and POST methods of HTML FORM correspond to the whole page, i.e. the URL, so the page is reloaded. On the one hand, those of AJAX correspond to only a part of the page, the page is not reloaded. For more precise details, XMLHttpRequest is googlable.

It is okay to write codes same as the case of usual FORM POST on server-side, but you don't need to write a redirect page anymore!

There is one more thing. Actually, it is seemingly better to write the following code which specifies the content type before "ajax.send()."
ajax.setRequestHeader('Content-type', 'application/json; charset=utf-8');
But I usually don't because it restricts the size of data.

SECOND WAY: WebSocket

WebSocket is a technology (API) to give a duplex communication like a chat. If you are good at using WebSocket, this way may be an interesting trial. However, I'm sorry I can only write Socket.io which is JavaScript API!

var socket = io();
function functionname(){
  var inputvalue = document.getElementById("ID").value;
  socket.emit('some name', inputvalue);
}

Let me explain. If you click an html element <button onclick="functionname()">, the value of an html element is emitted to server-side. Just it! No reloading!
However, this way has a teeny, tiny, little problem. WebSocket is basically good at emitting a text, like a mail sending system. To emit others like an image file, you have to use MIME, I think. For more precise details, MIME is googlable.

INTERESTING EXAMPLES

Let's implement the methods above. Examples include extra techniques but I believe it helps your web development to be more fantastic.
Firstly, the HTML for Ajax is here.

<form enctype="multipart/form-data" id="formID">
  <input type="file" id="inputID" style="display:none" onchange="changefunction()">
</form>
<div id="divID"></div>
<button onclick="selectfunction()">SELECT</button>
<button onclick="postfunction()">POST</button>

The enctype is required to post a file and stuff. The point is the style of the input. How come we don't display the input? It is because the input with type "file" is nasty! So, our strategy is that we call the function of the input by clicking the SELECT button and display the selected file in the div element. The latter is done by onchange. And then, by clicking the POST button, we post the selected file to server-side and display a message in the div element because no action occurs after posting.
JavaScript which hears our grant is here.

function changefunction(){
  document.getElementById("divID").innerHTML = 
  document.getElementById("inputID").value;
}

function selectfunction(){
  document.getElementById("inputID").click();
}

function postfunction(){
  var ajax = new XMLHttpRequest();
  var data = document.getElementById("formID");
  var formdata = new FormData(data);
  ajax.open("POST", "/actionname", true);
  ajax.send(formdata);
  document.getElementById("divID").innerHTML += "POSTED";
}

Let me explain two important things. One is that the .click() method can click any other elements and two that the var data must be set the FORM, not the input nor the div because the latter two have just the file name which is just a text.
Okiedok, we see the server-side. However, actually the server-side depends on your choice of a programming language. If you choose JavaScript and Express.js as a web framework, an example is here.

app.post('/actionname', (req, res, next) => {
  var form = new formidable.IncomingForm();
  form.uploadDir = './directory';
  form.parse(req, (err, fields, files) => {
  if(err){
    next(err);
    return;
  }
  var oldPath = './' + files.inputname.path;
  var newPath = './directory' + "newname";
  fs.rename(oldPath, newPath, function(err){
    if(err) throw err;
    });
  });
});

Note that two modules are required: formidable and fs. The former can upload the selected file to the server. But the name is a random and save the file in a temporary folder. So, you need to rename it and move it to a folder you want using the latter. And one more thing. You need to add a name "inputname" to the input in the front-side for the "inputname" in the oldPath.

Next, let's implement the WebSocket version. Our goal is to display a message locally! A job of WebSocket is broadcasting. So in the usual method of it a message is globally emitted, i.e. everybody can see it without reloading. We want to send it to specific persons. Don't call this "waste", do call this "curiosity", please.
The HTML is here.

<input type="text" id="inputID">
<div id="divID"></div>
<button onclick="functionname()">POST</button>

<span id="dummy" style="display:none;"></span>

The point is the "dummy" with style "diplay:none." Our strategy is as follows. The message emitted by clicking the button is firstly displayed in the dummy span. The message is globally emitted so everybody can see it. But the style of the dummy span interrupts it. And then, the innerHTML copies the message in the dummy span to the div element. The only one who clicked the button can see the message.
JavaScript is here. I'm sorry, this is for Socket.io.

var socket = io();
var msg = document.getElementById("inputID").value;
socket.emit('socket name', msg);
setTimeout(function(){
  socket.on('socket back', function(backmsg){
    document.getElementById("dummy").innerHTML = backmsg;
    document.getElementById("divId").innerHTML = 
    document.getElementById("dummy").innerHTML;
  }
}, 100);

Conventionally the socket name uses two words, which is the sign between front- and server-sides. Anything can be set in the part of "msg" even if it's not needed. The response between front- and server-sides is done within 100 milliseconds.
The server-side JavaScript is here.

socket.on('socket name', function(msg){
  io.emit('socket back', msg);
});

We notice that we use "socket.on" when we receive the message from the server-side. It has a function and anything can be set as its variable. There is no relation between the names of the variables in the server-side and the front-side, i.e. "msg" and "backmsg", they are just stamps when posting.
This fascinating or maybe cumbersome technique is interesting to be applied to information retrieval. We can do that after emitting a keyword to server-side, the data corresponding to the keyword and the "user" can only be emitted back to front-side.

DISCUSSION

I introduce to you two ways to post data without reloading. One is to use Ajax and another is to use WebSocket. At present, due to lack of my knowledge, the former the better because all types of file can be handled. Anyway, the most important thing is "without reloading."
I like to use the latter, however. Because I believe that WebSocket is faster than (Ajax) POST because real-time response is required for WebSocket applications. But I don't know the truth. It is interesting to investigate which is best.

Thank you all for reading! Comments and English corrections are very welcome!

Safe journey!

A mimic authentification

safejourney-art — Mon, 24 Feb 2020 12:25:43 +0000

Hello!
Today, we consider a big problem for front-end engineers. It is an authentification or in other words a login page. Can we realise it with only HTML, CSS and JavaScript? This is one of long-standing problems for web programmers. Probably you know the answer, WE CAN'T! The reason is quite clear, the source code is opened.
So, we can't make a perfect login page using only HTML, CSS and JavaScript. However, in other words, we CAN make an imperfect login page!
For example, if you visit a website and it requires an authentification, do you check the source code? Most people say NO, I think! Sure that a mimic authentification is very useful!!

Now, let's start making a mimic login page!
The most important thing is the idea. For pedestrians, I'll walk you to the completion.

To start with, we make a top page which is opened after logged-in.

<body>
  <h1 style="text-align: center; margin-top: 20%;">WELCOME!</h1>
</body>

Next, we add the login-page code to the body above.

  <div style="background-color: black; width: 100%; height: 100%; z-index: 2; position: fixed; left: 0; top: 0;">     
    <p style="color: white; text-align: center; margin-top: 20%;">Please entre the password.</p>     
    <div style="text-align: center;"><input><button>Login</button></div>
  </div>

The point is covering the top page with the login page. We fix the div element at the left 0 and the top 0, and spread it whole-widely. The z-index is normally one. The bigger is higher side. We used the p element and one more div element for fine-tuning (for example, the text-align is invalid if you directly write it in the input).
Okiedok, we made the login page! The final step we need is adding an authentification function. Our login page is just mimic but our mimicry is not only the picture but also the function! This is our main road.

The authentification function is that when a user clicks the button, if the password the user entred is correct, the top page is displayed (not move to the page), if incorrect, a message is displayed.

To do this, we firstly add IDs to the first div element, the p element, the input and the button: id="overlay", id="msg", id="pw" and id="btn" respectively.

JavaScript plays the role of the function.

const overlay = document.getElementById("overlay");
const msg = document.getElementById("msg");
const pw = document.getElementById("pw");
const btn = document.getElementById("btn");

login = () => {
  if(pw.value === "safejourney"){
    overlay.style.display = "none";
  }else{
    msg.innerHTML = "The password you entred is incorrect.<br>Please entre the password.";
  }
}

Finally, we add onclick="login()" to the button element. All done!
The content of the magic is simple. If the password a user entred is safejourney, the first div element is hidden. If the password a user entred is not safejourney, the p element is rewritten by the innerHTML.

We have finished the work. Your website got the login page! If you need the non-mimicry, I'll talk about it elsewhere. Safe journey!

I almost forgot! There are three more things!

One, the above JavaScript code is, what we call, ES6 or ECMAScript2015. If you like the elder version, you should rewrite it as follows.

var overlay = document.getElementById("overlay");
var msg = document.getElementById("msg");
var pw = document.getElementById("pw");
var btn = document.getElementById("btn");

function login(){
  if(pw.value == "safejourney"){
    overlay.style.display = "none";
  }else{
    msg.innerHTML = "The password you entred is incorrect.<br>Please entre the password.";
  }
}

Two, the complete source is here.

<body>
  <h1 style="text-align: center; margin-top: 20%;">WELCOME!</h1>


  <div style="background-color: black; width: 100%; height: 100%; z-index: 2; position: fixed; left: 0; top: 0;" id="overlay">     
    <p style="color: white; text-align: center; margin-top: 20%;" id="msg">Please entre the password.</p>     
    <div style="text-align: center;">
      <input id="pw"><button id="btn" onclick="login()">Login</button>
    </div>
  </div>


  <script>
    const overlay = document.getElementById("overlay");
    const msg = document.getElementById("msg");
    const pw = document.getElementById("pw");
    const btn = document.getElementById("btn");

    login = () => {
      if(pw.value === "safejourney"){
        overlay.style.display = "none";
      }else{
        msg.innerHTML = "The password you entred is incorrect.<br>Please entre the password.";
      }
    } 
  </script>
</body>

Three, I have used this for my website. The login page of my website requires not a password but a user name. A user entres the user name and clicks the open button, then the dictionary Iff calls the user name. Please come if you're curious!

A Date module

safejourney-art — Thu, 19 Dec 2019 20:28:47 +0000

Hello!
What month is this month? Yes, it is an easy question for us.
So, how do we programme it with JavaScript? Yes, easy question again. We know we can use the "getMonth()" method.
Let's see a simple example below.

<sample.html>

<div>This month is <span id="tmonth"></span></div>
<script>
  var tmonth = document.getElementById("tmonth");
  const datetime = new Date();
  tmonth.innerHTML = datetime.getMonth();
</script>

If you make this HTML file, you notice that this is bad. The getMonth() method returns a number! So, the result above is "This month is 11."
Wait a minute! This month is December. Why 11?
Yes, it is because the getMonth() method returns 0 to 11! This means that we have to add extra 1 to datetime.getMonth() above. That's too nasty I think!

Well, okay, December is 11. We want it to return "December", not 11. How should we do? The answer is simple:

<sample.html>

<div>This month is <span id="tmonth"></span></div>
<script>
  var tmonth = document.getElementById("tmonth");
  const datetime = new Date();
  var monthname = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];       
  tmonth.innerHTML = monthname[datetime.getMonth()];
</script>

Actually, the day of the month returns 1 to 31 but the name of the week is same as the month and so the name of the weekday is, of course, implemented as above.
Every time we make a new application, we do this.
It's nonsense!

So, I made a module of this for you. Since I don't have any open repository on GitHub, please follow the itinerary below.

Make Files

Firstly, you make a file: datetime.js.
Two, read the file in an HTML file.

How to use

The module is just a JavaScript file. So, for example,

<sample.html>

  <div>Today is <span id="date"></span>/<span id="month"></span>/<span id="day"></span>/<span id="year"></span></div>       
  <script>
    document.getElementById("day").innerHTML = day;
    document.getElementById("month").innerHTML = month;
    document.getElementById("date").innerHTML = date;
    document.getElementById("year").innerHTML = year;
  </script>

You can use for English: month, monthuppercase, datenumber, day, dayuppercase, dayshort, dayshortuppercase,

for Deutsche: monat, monatuppercase, monatnummer, wochentage, wochentageuppercase, wochentageshort, wochentageshortuppercase,

for French: mois, moisuppercase, moislowercase, moisnumero, jour, jouruppercase, jourlowercase, jourshort,

for Italian: mesi, mesiuppercase, giorni, giorniuppercase, giornishort, giornishortlowercase,

for Japanese: tsukikanji, tsukisuuji, tsukiishou, youbifull, youbihalf, youbishort,

commonly: year, monthnumber, date, hour, minute, second, millisecond.

Comments

Any mistakes, all my fault. Your comment, your idea and what you want, very welcome! Safe journey!

Module

Finally, you copy and paste the JavaScript codes below to the datetime.js.

const hiduke = new Date();

// Year
var year = hiduke.getFullYear();


// Month
var tsuki = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var month = tsuki[hiduke.getMonth()];

// Month UpperCase
var monthuppercase = month.toUpperCase();

// Month Number
var tsukinumber = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
var monthnumber = tsukinumber[hiduke.getMonth()];


// Date
var date = hiduke.getDate();

// Date Number
var hinichinumber = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th", "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22nd", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st"];        
var datenumber = hinichinumber[hiduke.getDate() -1];


// Day
var youbi = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var day = youbi[hiduke.getDay()];

// Day UpperCase
var dayuppercase = day.toUpperCase();

// Day Short
var youbishort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var dayshort = youbishort[hiduke.getDay()];

// Day Short UpperCase
var dayshortuppercase = dayshort.toUpperCase();


// Hour
var hour = hiduke.getHours();


// Minute
var minute = hiduke.getMinutes();


// Second
var second = hiduke.getSeconds();


// MilliSecond
var millisecond = hiduke.getMilliseconds();





// DEUTSCHE
// Monat
var dtsuki = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
var monat = dtsuki[hiduke.getMonth()];

// Monat UpperCase
var monatuppercase = monat.toUpperCase();

// Monat Nummer
var monatnummer = tsukinumber[hiduke.getMonth()];


// Wochentage
var dyoubi = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
var wochentage = dyoubi[hiduke.getDay()];

// Wochentage UpperCase
var wochentageuppercase = wochentage.toUpperCase();

// Wochentage Short
var dyoubishort = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
var wochentageshort = dyoubishort[hiduke.getDay()];

// Wochentage Short UpperCase
var wochentageshortuppercase = wochentageshort.toUpperCase();




// FRENCH
// Mois
var ftsuki = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
var mois = ftsuki[hiduke.getMonth()];

// Mois UpperCase
var moisuppercase = mois.toUpperCase();

// Mois LowerCase
var moislowercase = mois.toLowerCase();

// Mois Numéro
var moisnumero = tsukinumber[hiduke.getMonth()];


// Jour
var fyoubi = ["Dimanche", "lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
var jour = fyoubi[hiduke.getDay()];

// Jour UpperCase
var jouruppercase = jour.toUpperCase();

// Jour LowerCase
var jourlowercase = jour.toLowerCase();

// Jour Short
var fyoubishort = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
var jourshort = fyoubishort[hiduke.getDay()];




// Italian
// Mesi
var itsuki = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
var mesi = itsuki[hiduke.getMonth()];

// Mesi UpperCase
var mesiuppercase = mesi.toUpperCase();


// Giorni
var iyoubi = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"];
var giorni = iyoubi[hiduke.getDay()];

// Giorni UpperCase
var giorniuppercase = giorni.toUpperCase();

// Gironi Short
var iyoubishort = ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"];
var giornishort = iyoubishort[hiduke.getDay()];

// Giorni Short LowerCase
var giornishortlowercase = giornishort.toLowerCase();




// JAPANESE
// Month
var jtsuki = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
var tsukikanji = jtsuki[hiduke.getMonth()];

// Month Number
var jtsukin = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
var tsukisuuji = jtsukin[hiduke.getMonth()];

// Month Another
var jtsukia = ["睦月", "如月", "弥生", "卯月", "皐月", "水無月", "文月", "葉月", "長月", "神無月", "霜月", "師走"];
var tsukiishou = jtsukia[hiduke.getMonth()];


// Date
var jyoubi = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"];
var youbifull = jyoubi[hiduke.getDay()];

// Date Half
var jyoubih = ["日曜", "月曜", "火曜", "水曜", "木曜", "金曜", "土曜"];
var youbihalf = jyoubih[hiduke.getDay()];

// Date Short
var jyoubis = ["日", "月", "火", "水", "木", "金", "土"];
var youbishort = jyoubis[hiduke.getDay()];

Let's make a Vuetify-like page!

safejourney-art — Thu, 21 Nov 2019 08:52:11 +0000

Hello!
Well, have you ever seen the index page with Vuetify.js?
It produces so beautiful CSS designs with simple descriptions like Bootstrap. If you want to get the beauties but do not want to use CSS frameworks probably for some special reason, what should you do?
Yes! Let's make a Vuetify-like page!

What we make is a Vuetify-like index page with dark mode. The completion is this:

HTML

Firstly, let's see the HTML code!

<head>
  <!-- Import Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">           
</head>
<body style="background-color: #333;">
  <!-- The navigation bar -->
  <div id="NavBar" class="navbar">
    <a href="#" id="menu"><i class="fa fa-bars"></i></a> <!-- The menu icon -->
    <a style="cursor: text;" id="vuetify">Vuetify.js</a>
  </div>

  <!-- The Side-navigation -->
  <div id="SideNav" class="sidenav">
    <a href="#" style="background-color: #757575;"><i class="fas fa-th">&emsp;&emsp;Welcome</i></a>      
    <a href="#"><i class="far fa-sun">&emsp;&emsp;Inspire</i></a>
  </div>

  <!-- The main content -->
  <div id="main"></div>

  <!-- The footer -->
  <div class="footer">&copy; 2019 Safe Journey</div>
</body>

Let me explain the above. We make four parts in the HTML file: the top-fixed navigation bar, the (hidden )side navigation, the main content and the footer. The "cursor: text;" is the mimic of the original index page. The background-color for the text "Welcome" corresponds to the active page.
You can use Font Awesome for the menu icons. It is imported in the head. But I'm sorry, the above code is for the version 5.1.0. Please import the latest version if you need.

CSS

Next, let's move on to the CSS code!
The CSS is the linchpin. Fortunately, you can get the design of each part in W3Schools.

/* The navigation bar */
.navbar {
  overflow: hidden; /* Hide scrolls */
  background-color: #424242;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  left: 0; /* Position the navbar at the left of the page */
  width: 100%;
  box-shadow: 10px 0.5px 10px 1px rgba(0,0,0,0.4); /* Add the shadow under the nabvar */
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}

/* Use this if you want to push the page content to the right when you open the side navigation */
#NavBar {
  transition: margin-left .2s;
}

/* The side navigation menu */
.sidenav {
  height: 100%;
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #424242;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 8px; /* Place content 8px from the top */
  transition: 0.2s; /* 0.2 second transition effect to slide in the sidenav */
  border-right: solid 0.5px #616161; /* A thin line at the right side */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 0px 32px;
  text-decoration: none;
  font-size: 18px;
  color: whitesmoke;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation menu links, change their colour */
.sidenav a:hover{
  background-color: #616161;
}

/* When you mouse over the navigation links, change their colour */
#menu:hover {
  background-color: #616161;
  color: whitesmoke;
  border-radius: 50%;
}

/* When you mouse over the text "Vuetify.js", not change the colour */
#vuetify:hover{
  background-color: transparent;
  color: whitesmoke;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .2s;
  padding: 20px;
}

/* Style the footer */     
.footer{
  position: fixed;
  bottom: 0; /* Fix the position at the bottom */
  left: 0;
  width: 100%;
  background-color: #212121;
  color: whitesmoke;
  font-size: 14px;
  padding: 4px 0;
  z-index: 2; /* Display the footer in front of the side navigation */
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 8px;}
  .sidenav a {font-size: 18px;}
}

You can design each part following the code above. The tricky points are two: with JavaScript, to make the side navigation slide-in and to push the navigation bar and the main content, you can use transition. However, we don't want the side navigation to push the footer. The magic word is z-index. z-index denotes a place as a layer. A larger number comes to the more front. The default is one. So, by setting z-index of the footer to two, the side navigation slides-in behind the footer.

JavaScript

Finally, let's see the JavaScript code!
Actually it is very simple but some tricky points are here.

function openNav(){
  document.getElementById("SideNav").style.width = "250px";
  document.getElementById("NavBar").style.marginLeft = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav(){
  document.getElementById("SideNav").style.width = "0";
  document.getElementById("NavBar").style.marginLeft = "0";
  document.getElementById("main").style.marginLeft = "0";
}

var flag = 0;
var menu = document.getElementById("menu");
menu.addEventListener("click", function(){
  if(flag == 0){
    openNav();
    flag = 1;
  }else if(flag == 1){
    closeNav();
    flag = 0;
  }
});

Our purposes are just two: to open/close the side navigation by clicking the menu icon and to realise them with just one button. The former: by the openNav function( and the transition with the CSS) the side navigation pushes the top-fixed navigation and the main content and by the closeNav function the side navigation is hidden.
Well, how about the latter? A tricky point is here. The magic item is a flag. Initially, the flag is not flown, namely flag=0. When you click the menu icon, if the flag is not flown, the openNav function is performed and the flag is flown. When you click the menu icon, if the flag is flown, namely the side navigation is opened, the closeNav function is performed, namely the side navigation is closed and the flag is taken down again.

Comments

The Vuetify-like index page has been completed. But actually, some are different than the original index page. My big mistakes are two.
One is the icon of the Inspire link. I didn't find the similar one.
Two is the animation of the menu icon by clicking it. Actually there is one more animation, which is, the whity colour emits from the centre of the menu icon to the outside. I think that one of the answer is :active of CSS. However, it is too difficult for me to implement it over another CSS, :hover. So, this is a homework, to you and me.
As I said at the beginning, the Vuetify-like index page is the mimic for the corresponding dark mode. Of course, you can change the colour theme, the behaviours and so on, if you want.
I really hope that this post helps you.
Safe journey!

What makes onclick different than addEventListener?

safejourney-art — Sun, 03 Nov 2019 12:54:07 +0000

Hello!
This post is actually just my curious. Recently I encountred the title problem. It may be worn-out but your help, your comment, anything is very welcome!

Let's start with the answer, what makes onclick different than addEventListener is the same footing, in other words the languages themselves.
The point is, onclick is an HTML for addEventListener, whilst addEventListener is a JavaScript for onclick.
Examples below would help you to understand.

If you make an HTML file and write JavaScript directly in the file or read a JavaScript file in the HTML file, the HTML and the JavaScript are on the same footing. In this case, nothing makes onclick different than addEventListener.

However, ajax makes the story be changed. Let's think about an example below.

<hello.html>

<div id="hello" onclick="ajax()" style="cursor: pointer;">Hello!</div>
<script>
    function ajax(){
        var ajax = new XMLHttpRequest();
        ajax.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                document.body.innerHTML = this.responseText;
            }
        };
        ajax.open("GET", "hello2.html", true);
        ajax.send();
    }
</script>

If you click the text Hello!, the content displayed is changed to the content in hello2.html. hello2.html is as follows.

<hello2.html>

<div id="hello2" onclick="next()">How are you?</div>

The problem is the next step. Where should the content of the next function be written in?

If you click the Hello!, the How are you? is displayed because the content of the whole body was changed by the ajax. So, now, we see hello2.html and so the next function should be written in hello2.html or should be read as the corresponding JavaScript file in hello2.html. Namely,

<hello2.html>

<div id="hello2" onclick="next()">How are you?</div>
<script>
    function next(){
        document.getElementById("hello2").style.color = "red";
    }
</script>

However, if you do this, "next is not a function" is returned.

How about using addEventListener instead of onclick? Namely, we use

<hello2.html>

<div id="hello2">How are you?</div>

<script>
document.getElementById("hello2").addEventListener("click", function(){
    document.getElementById("hello2").style.color = "red";
});
</script>

If you do this, the answer is, nothing happens actually.

The point is, we notice that the URL would not be changed. Well, if you do these in hello.html, what happens? What changes?

Actually, something fantastic a bit happens. If you do the latter in hello.html, the answer is, "Cannot read property 'addEventListener' of null" is returned, whilst if you do the former in hello.html, the colour of text "How are you?" is changed to red.

This happens namely because (the content of )hello2.html is displayed by the ajax but the URL is not changed, in other words hello.html is still opened.

Let's go back to the beginning of the story. onclick is an HTML, so it should be written directly in an HTML file or inside an HTML element it should be. On the one hand, addEventListener is a JavaScript, so it should be written in an HTML file which is opened, namely the URL.
In the example, hello2.html was displayed by the ajax but was not opened. This is why addEventListener written in hello2.html was not read, and that written in hello.html was null because hello2.html was not opened.

Finally, there is one more thing I have to say. The best way to avoid such a thing is finding more sophisticated realisation of the example.
Thank you for reading!

Open the doors!

safejourney-art — Thu, 31 Oct 2019 01:51:43 +0000

Hello!
I am going to present an animation, which is one of my favourites. Let's make doors!

First, HTML is very simple. You just prepare two doors.

<div id="ldoor" class="door" onclick="opendoor()"></div>
<div id="rdoor" class="door" onclick="opendoor2()"></div>

The div element with id="ldoor" creates the left door and the one with id="rdoor" does the right one.

Next, you make them more "door-like." You write the common CSS styles for the "door" class.

.door{
    background-color: cornflowerblue;
    border: solid 2px navy;
    position: fixed;
    top: 0;
    width: 0;
    height: 100%;
    overflow-x: hidden;
    cursor: pointer;
}
#ldoor{
    left: 0;
}
#rdoor{
    right: 0;
}

The left:0 puts the left door to the leftmost and the right:0 puts the right door to the rightmost. Because width is 0, the doors are not displayed at present yet.

So, finally, you display them and open the doors! However, fortunately, the JavaScript code is also very simple.

var ldoor = document.getElementById("ldoor");
var rdoor = document.getElementById("rdoor");
ldoor.style.transition = "1s";
rdoor.style.transition = "1s";

function load(){
    ldoor.style.width = "50%";
    rdoor.style.width = "50%";
}

function opendoor(){
    ldoor.style.width = "0";
    rdoor.style.width = "0";
}

function opendoor2(){
    ldoor.style.width = "30%";
    rdoor.style.width = "50%";
}

Two things I have to say are here. First, the transition is the CSS style, so you can write it inside the .door in CSS instead of writing here. In that case, transition: 1s.
Second, the load function has to be firstly called. This is done by adding onload to the body element in HTML.

<body onload="load()">

Okiedok, now, you can see that loading the page the doors close, clicking the left door the doors open and clicking the right door the left door open some.
Very cool, so give it a shot and safe journey!

How many steps in pure JavaScript?

safejourney-art — Wed, 30 Oct 2019 14:29:52 +0000

Hello!
Actually, this article is not for pedestrians but sure that you are into. Let's move on!

First, let's think about a simple example which just displays some words and a button.

<div id="lorem">Lorem ipsum dolor sit amet,</div>
<button onclick="next()">Next</button>
<script>
    next = () => {
        document.getElementById(`lorem`).innerHTML = `consectetur adipiscing elit,`;
    }
</script>

JavaScript can handle even HTML elements. This means that a page in a website can be created only by JavaScript (except the header in HTML). The code is as follows.

<script>
    const div = document.createElement(`div`);
    div.textContent = `Lorem ipsum dolor sit amet,`;
    document.body.appendChild(div);

    const btn = document.createElement(`button`);
    btn.textContent = `Next`;
    document.body.appendChild(btn);

    btn.addEventListener(`click`, () => {
        div.innerHTML = `consectetur adipiscing elit,`;
    });
</script>

A div and a button elements consist of three parts. One is to create the elements, two write the texts and three to set them to the body element.
The disadvantage is clearly the big code. The advantage is probably nothing. There is however the meaning that the JavaScript code is rendered by JavaScript engine such as V8, SpiderMonkey and so on.

Next, let's think about centring the div and the button elements.

<div id="lorem" style="text-align: center;">Lorem ipsum dolor sit amet,</div>
<div style="text-align: center;">
    <button onclick="next()">Next</button>
</div>
<script>
    next = () => {
        document.getElementById(`lorem`).innerHTML = `consectetur adipiscing elit,`;
    }
</script>

Note that a button element doesn't move on to the centre by text-align.
You well-know that JavaScript can handle CSS styles. The code is as follows.

<script>
    const div = document.createElement(`div`);
    div.textContent = `Lorem ipsum dolor sit amet,`;
    div.setAttribute(`align`, `center`);
    document.body.appendChild(div);

    const btndiv = document.createElement(`div`);
    const btn = document.createElement(`button`);
    btn.textContent = `Next`;
    btndiv.setAttribute(`align`, `center`);
    btndiv.appendChild(btn);
    document.body.appendChild(btndiv);

    btn.addEventListener(`click`, () => {
        div.innerHTML = `consectetur adipiscing elit,`;
    });
</script>

The advantage may be that you can understand deeper the structure of HTML and JavaScript. Sometimes I use this method to write because I am a JSer. It may be good for practice for JavaScript.
Well, safe journey!

I almost forgot. Actually, the page "AT LAST" in my website is the case.

Flashing light

safejourney-art — Wed, 30 Oct 2019 02:18:59 +0000

Hello!
Is your beautiful imagination static or dynamic? If the answer is the latter, sure that you want animations: fadein, fadeout, flashing light and stuff. Actually they need a CSS style, which is called "opacity." However, in many cases, CSS is static (a choice to be dynamic is to use @keyframes). So, making dynamic is just a job of JavaScript.

The magic word is setTimeout but there is a tricky part. The code you want is as follows.

<div id="flash">FLASH</div>
<script>
  var i = 0;
  function flash(){
    if(i < 50){
      document.getElementById("flash").style.opacity = (-1)**i;
      i++;
      var sto = setTimeout(flash, 500);
    }else{
      clearTimeout(sto);
    }
 }
</script>

The tricky part is (-1)**i. This means -1 to the ith power. The i takes an integer which equals 0 or above, so either it takes -1 or 1. -1 is same as 0 for opacity, so this corresponds to just turning on and off the light!

How to use setTimeout() is setTimeout(function, time). It means that setTimeout performs the function after the time (milliseconds). In the example above, if the i is less than 50, setTimeout performs the flash after 500 milliseconds. If the i reaches 50, clearTimeout interrupts the job of setTimeout, namely flashing light stops.

I almost forgot. There is one more thing.
Don't forget to make an opportunity to start the flash function. For example, if you write <body onload="flash()"> in HTML, it just starts.
Well, safe journey!

A button generates a button

safejourney-art — Tue, 29 Oct 2019 14:05:18 +0000

Hello!
You know a button with onclick, something happens when you click the button.
It may be too easy for you to display sentences or comments or explanations when you click the button.
Well, how about a button? I mean, have you ever imagined to display another button with onclick when you click the button?

The simplest way to realise it is to call the style of CSS.

For the button with id="btn" and onclick="showbtn()" and another button with initially display: "none" in CSS, it is

function showbtn(){
  document.getElementById("btn").style.display = "block";
}

Then another button appears when you click the button. Of course another button can also be endowed with onclick if you want.

However, there is a sophisticated way to do the same thing. The magic word is "innerHTML."
innerHTML rewrites an element in HTML as HTML. Actually, "as HTML" is so much important.
It is too easy to rewrite a paragraph. For example, <p id="lorem">Lorem ipsum...</p> is easily rewritten by

document.getElementById("lorem").innerHTML = "Lorem ipsum dolor sit amet...";

"as HTML" means that you can write HTML elements inside the double quotations!
For example,

document.getElementById("lorem").innerHTML = 'Lorem ipsum dolor sit amet, <button id="next" onclick="next()">Next</button>';

It is just like a single page application. Note that the double quotations were replaced with single quotations actually.
If innerHTML, you can add any HTML element anytime.
Give it a shot and safe journey!

Let's make a link!

safejourney-art — Tue, 29 Oct 2019 01:28:49 +0000

Hello!
Have you ever made a link? Yes, maybe the answer is yes. Unless your website is a single page application, a link would be there.
Well, how do you make a link?
The answer is, use an anchor tag like

Another question is here. Have you ever imagined the whole background is a link?
JavaScript can make it real.
More generally, JavaScript can make a link anywhere you want!
The magic word is "onclick." If you write it inside the body element, you can make the whole background a link. The code which realises it is for example (onclick="link()"):

function link(){
   location.href = "url or path";
}

body, div, button, even anchor, anywhere can be made a link!
Sure that you are getting closer to your beautiful imaginations.
Safe journey!

I almost forgot. There is one more thing.
For you, I have created a JavaScript website. Many things JavaScript can draw are there.