Web development learning thread(Javascript, HTML, CSS, angular, vue.js).


 
Thread Tools Search this Thread
Top Forums Web Development Web development learning thread(Javascript, HTML, CSS, angular, vue.js).
# 1  
Old 04-14-2019
Web development learning thread(Javascript, HTML, CSS, angular, vue.js).

Hello All,

After getting inspired from Neo, I have started a bit of JS learning these days. Whenever I learn something I will try to post it here(as of now my learning is NOT exactly bookish where I am going chapter by chapter etc, it could be more like small-small project vice kind of), I would like to request you all to correct me if I am wrong somewhere, any improvements or discussions are welcome.

GOAL of this post(creation of a simple UI): For basic learning I have gone for my college project Smilie where I had created almost 10 years back a "Student registration form", I tried to build it here. UI's goal is to get information from new students who are willing to join any college and if any detail is missing it should alert student, once all details are done it should show as a message to Student(Keeping it simple as of now).

Prerequisites before starting creating UI:

1- Download Visual studio code software from net first.

2- Now install an extension named "Live server:" in it.

3- Now create a folder your machine, in my case I had created "js learning".

4- Use open folder option in Visual code studio and select newly created folder there.

5- Now create your html and js files(mentioned in further description) in same folder in Visual studio code.


Coding part comes now: Before we start coding I would like to mention(which most of the people know), html is a markup language in which for doing dynamic kind of stuff we need scripting language where JS comes. So we will be creating UI in html and then data fields validation parts we will handle by JS.
  • Create HTML code file for UI:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Student registration form.</title>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
  <form action="#" name="StudentRegistration" onSubmit="return(validate());">

<table cellpadding="2" width="100%" bgcolor="#ADD8E6" align="center"
  cellspacing="2">

<tr>
  <td colspan=2>
  <center><font size=4><b>Student Registration Form</b></font></center>
  </td>
</tr>


<tr>
  <td>Name</td>
  <td><input type=text name=textnames id="textname" size="30"></td>
</tr>


<tr>
  <td>Father Name</td>
  <td><input type="text" name="fathername" id="fathername"
  size="30"></td>
</tr>

<tr>
  <td>Mother Name</td>
  <td><input type="text" name="mothername" id="mothername"
  size="30">
  </td>
</tr>

<tr>
  <td>Postal Address</td>
  <td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>


<tr>
 <td>Personal Address</td>
 <td><input type="text" name="personaladdress"  
 id="personaladdress" size="30"></td>
</tr>


<tr>
  <td>Sex</td>
  <td><input type="radio" name="sex" value="male" size="10">Male
  <input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>


<tr>
  <td>City</td>
  <td>
      <select name="City">
        <option value="-1" selected>select..</option>
        <option value="New Delhi">NEW DELHI</option>
        <option value="Mumbai">MUMBAI</option>
        <option value="Goa">GOA</option>
        <option value="Patna">PATNA</option>
      </select>
  </td>
</tr>


<tr>
  <td>Course</td>
  <td>
      <select name="Course">
         <option value="-1" selected>select..</option>
         <option value="B.Tech">B.TECH</option>
         <option value="MCA">MCA</option>
         <option value="MBA">MBA</option>
         <option value="BCA">BCA</option>
      </select>
  </td>
  </tr>


<tr>
  <td>District</td>
  <td><select name="District">
  <option value="-1" selected>select..</option>
  <option value="Nalanda">NALANDA</option>
  <option value="UP">UP</option>
  <option value="Goa">GOA</option>
  <option value="Patna">PATNA</option>
  </select>
  </td>
</tr>

<tr>
<td>State</td>
<td>
  <select Name="State">
     <option value="-1" selected>select..</option>
     <option value="New Delhi">NEW DELHI</option>
     <option value="Mumbai">MUMBAI</option>
     <option value="Goa">GOA</option>
     <option value="Bihar">BIHAR</option>
  </select>
</td>
</tr>

<tr>
    <td>PinCode</td>
    <td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>

<tr>
    <td>EmailId</td>
    <td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>

<tr>
    <td>DOB</td>
    <td><input type="text" name="dob" id="dob" size="30"></td>
</tr>

<tr>
    <td>MobileNo</td>
    <td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
    <td><input type="reset"></td>
    <td colspan="2">
     <td colspan="2"><input type="submit" value="Submit Form" /></td>
    </td>
</tr>
</table>
</form>

</body>
</html>

I believe most of the people have read html so I will only touch upon its functions.

Brief explanation of HTML file:

1- Basic structure of html file:
Code:
<html>
<head>
......................more statements here...........
</head>
<body>
.......UI's components etc here.......
</body>
</html>

2- JS will be placed inside <head> tags like:
Code:
<script type="text/javascript" src="validate.js"></script>

Either we could write a different js file with js code and call it here in <script type> here or we could write JS code in here itself, I am taking first approach keeping JS file separate and calling it in HTML file.

3- Few more explanations:
<table> as Name suggests table tag is for creation of table on UI.
<form>,is to create forms on UI.
<tr>, is for inserting a line in Table.
<td>, is for inserting a cell in line of table, it should be always in <tr>.
input type, will define which kind of input type we have on UI eg--> text box, radio button, drop down menu etc etc.

4- Basically we have created a form and inside it created a table with few rows and columns which will have text boxes, radio buttons etc to gather details from user who is using UI.


Now comes the JS part: HTML will create UI for us but it can not validate data for us, for that purpose I have created a js file which will make sure user is NOT leaving any field empty.

Code:
function validate() {
	//This is a js function to validate all the functions of UI.
	var form = document.getElementById("StudentRegistration");
	
	if(document.StudentRegistration.textnames.value==""){
		alert('Please provide your Name! This is a mandatory field can not be empty!!');
		document.StudentRegistration.textnames.focus();
		return false;
	}

	if(document.StudentRegistration.mothername.value==""){
		alert('Please do enter your Mother name, it can not be empty.');
		document.StudentRegistration.mothername.focus();
		return false;
	}
	
	
	if(document.StudentRegistration.fathername.value==""){
		alert('Please enter your father name details:');
		document.StudentRegistration.fathername.focus();
		return false;
	}
	
	if(document.StudentRegistration.paddress.value==""){
		alert('Please enter your address as it is a mandatory field.');
		document.StudentRegistration.paddress.focus();
		return false;
	}
	
	if(document.StudentRegistration.personaladdress.value==""){
		alert('Please enter your email id as it is mandatory field of form:' );
	    document.StudentRegistration.personaladdress.focus();
	    return false;
	}
	
	if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) ){
		alert('Please enter your gender details, you can not leave this option empty:');
		return false;
	}
    
	if(document.StudentRegistration.City.value=="-1"){
    	alert('Please select city details, you can not leave it empty.');
    	return false;
    }
    
    if(document.StudentRegistration.Course.value=="-1"){
    	alert('Please select course details, it can not be empty in form.');
        return false;
    }

    if(document.StudentRegistration.District.value=="-1"){
    	alert('Please select your district out of the list.');
        return false;
    }

    if(document.StudentRegistration.State.value=="-1"){
    	alert('Please select your State details as it is mandatory for form.');
        return false;
    }

    if(document.StudentRegistration.pincode.value==""){
    	alert('Please do enter your PIN code details.');
        return false;
    }
    

    if(document.StudentRegistration.emailid.value==""){
    	alert('Please do enter your email id as it can not be empty.');
         return false;
    }
    
    if(document.StudentRegistration.dob.value==""){
    	alert('Please do enter your D.O.B(Date of Birth) as it can not be empty.');
        return false;
    }

    if(document.StudentRegistration.mobileno.value==""){
    	alert('You can not leave Mobile number field empty, please enter 10 digits number in form.');
    	return false;
    }
      
}


Explanation on JS code:

1- Created a function in js named validate, which will be called on submit button hit(though I have not completed it yet).

2- Mainly checking conditions that each field should have values.
Code:
	if(document.StudentRegistration.textnames.value==""){

In above statement taking value from FORM whose name is "StudentRegistration" then taking its specific item's(input type=text)'s name and checking its value if it is EQUAL to NULL then:

Code:
alert('Please provide your Name! This is a mandatory field can not be empty!!');

Using alert to get a message for user to fill that field.

Code:
document.StudentRegistration.textnames.focus();

Above statement .focus takes cursor to the mentioned field so user need NOT to move cursor/mouse to missing field.

Like that I have done for all fields.

Here is how UI will look like:
Image

Here is how user will be prompted for entering values in UI:
Image


Any suggestions are welcome, I will post more learning here.

PS: Off course lot of googling I did for this very first post, references were taken(few links mentioned in post) and from roseindia site(I did make some changes in js and html parts).

Thanks,
R. Singh

Last edited by RavinderSingh13; 04-29-2019 at 06:59 AM..
These 2 Users Gave Thanks to RavinderSingh13 For This Post:
# 2  
Old 04-14-2019
LOL,

If you were inspired my me Ravinder, you would not use Eclipse to develop a Javascript web app.

Eclipse is a poor choice for a modern IDE for Javascript web app development. Most web developers use Visual Studio Code, Sublime or Atom. I use VSC, personally speaking.

Eclipse is for more for Java developers, not Javascript web developers, in my view. Almost all "2019 web dev tutorials" use VSC. I have never seen one, even by accident, which uses Eclipse, in over two years.

Bottom Line: I would never do this kind of JS web development in Eclipse, Ravinder.
This User Gave Thanks to Neo For This Post:
# 3  
Old 04-14-2019
Quote:
Originally Posted by Neo
LOL,
If you were inspired my me Ravinder, you would not use Eclipse to develop a Javascript web app.
Eclipse is a poor choice for a modern IDE for Javascript web app development. Most web developers use Visual Studio Code, Sublime or Atom. I use VSC, personally speaking.
Eclipse is for more for Java developers, not Javascript web developers, in my view. Almost all "2019 web dev tutorials" use VSC. I have never seen one, even by accident, which uses Eclipse, in over two years.
I would never do this kind of development in Eclipse, Ravinder.
Thanks Neo for suggestions, I have installed "Visual studio code" now and have run code there, changed prerequisites instructions in my post too.

Thanks,
R. Singh
This User Gave Thanks to RavinderSingh13 For This Post:
# 4  
Old 04-14-2019
Welcome to 2019 web dev, Ravinder.

This will serve you very well when you move pass the JS, HTML and CSS basics and move on to node.js and vue.js and other useful JS libs (and SASS) as you become more creative.
This User Gave Thanks to Neo For This Post:
# 5  
Old 04-15-2019
Hello All,

I learnt today, how to create a button in HTML, how to present OK or CANCEL button for user and after user's selection how to print date and time on screen.

Here is simple HTML file:
Code:
<html>
    <head>
        <title>Get date and time once more....</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <script type="text/javascript" src="print_date.js"></script>
    </head>
    <body>
        <button onclick="gettime()">Get date and time</button>
        <p id="get_date"></p>
    </body>
</html>

Here is the respective JS file:
Code:
function gettime () {
    var txt;
    if(confirm("Press a button")){
        var nDate = Date();
        var dDate = nDate.toLocaleString();
        txt = dDate;
    }
    else {
        txt = "Sorry !! since you pressed CANCEL, so no date and time printing here :)"
    }
    document.getElementById("get_date").innerHTML = txt;
}


What code does:

1- HTML code mentions JS file named print_date.js in it in <script> TAG.
2- It also has a button with button tag, with is value(what it will be shown in text form on button and its id(how we will call it in further program)).
3- We have a <p id=get_date>..</p in our code for paragraph too.
4- Button has something called gettime() function which is called whenever a click happens on button by mentioning onclick="gettime"
5- Now comes JS part, we have a function in JS named "gettime" which will help us to present pop up window for user.
6- confirm("Press a button") condition shows a pop up with OK and CANCEL options in front of client/user.
7- If condition is TRUE when a user hits OK and will create date object's variable and save my locale machine's date and time in txt variable.
8- Else condition, means when user selected CANCEL option then assigning txt variable value as an error.
9- Now finally using document.getElementById("get_date").inneHTML toassign value of txt variable to p tag in HTML file.
10- Now HIT http://localhost:5000/my_html.html link in browser.

I am very tired and almost sleeping so will add screen shots of this too tomorrow,see ya.
Will try to add more small small learning here.


Thanks,
R. Singh
# 6  
Old 04-15-2019
Hi Ravinder,

It's good to learn basic HTML, Plain Vanilla Javascript and CSS before moving on to JS libs and frameworks like Vue.js.

However, you should try to master the basics soon and move to developing in node.js and Vue.js sooner than later.

Also, if you are going to keep working with the very bare bones, at least consider working with Bootstrap classes.

Cheers and Keep Learning!
This User Gave Thanks to Neo For This Post:
# 7  
Old 04-16-2019
Hello All,

Here is what I learnt today location.replace, what is does is; when someone hits a button, we could re-direct our current page to any other URL/site/page. Codes are as follows for it.

HTML code(re-locate_page.html):
Code:
<html>
    <head>
        <title>redirecting url example!!</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <script type="text/javascript" src="re-locate_page.js"></script>
    </head>
    <body>
        <p><h1>Click following button to redirect to new link!!</h1></p>
        <button id="button1" onclick="myfunction()">Click here to move to new page!!</button>
    </body>
</html>

JS code(re-locate_page.js):
Code:
function myfunction (){
    location.replace("https://www.unix.com/")
}

When I hit URL(http://localhost:5500/re-locate_page.html there will be a button named "lick here to move to new page!!" and when we hit it, it redirects us to UNIX.com

Explanation: Explanation would be simple, a function named myfunction is being called when someone hits button, in function(which is in JS file) location.replace is responsible for redirecting page to newly mentioned page/address.

Still have 1 more hour energy in me, could try to post some more(may be Ajax call sample example).

NOTE: This thread is for learning; since I am newbie in JS and not learning from book(which I mentioned in very first post too), this is not a sequential kind of learning, it is only references which someone could take it. Once I get good hands on I may post small projects etc then on forums.

Thanks,
R. Singh

Last edited by RavinderSingh13; 04-16-2019 at 02:06 PM..
Login or Register to Ask a Question

Previous Thread | Next Thread

7 More Discussions You Might Find Interesting

1. Web Development

Google Trends: react.js angular.js vue.js

While I'm on the subject of Google trends, here is a global trend since 2004 comparing react.js, angular.js, vue.js It's no secret I'm a vue.js fan and coder, but not because of the trend line (which I just saw for the first time a few minutes ago) My experience is that vue.js, a late arrival... (0 Replies)
Discussion started by: Neo
0 Replies

2. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

3. Web Development

HTML down, CSS help, ahhhh

I am having some problems. I have been able to learn HTML, but when I try and encode CSS, nothing happens, what is the major issue here. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>MY CSS</title> <style... (7 Replies)
Discussion started by: N-Training
7 Replies

4. Programming

Looking For the Best Way to Rotate an Image: JavaScript, PHP, HTML etc

Hey All, What I'm looking for is a way to rotate an image by non 90 degree angles (ie 90, 180, 270, 360). I am able to do it in PHP, but there are errors in the image, some pixels end up colored incorrectly and the image ends up resized and I lose transparency. I've done my share of searching on... (1 Reply)
Discussion started by: pmd006
1 Replies

5. Web Development

Learning HTML

I have tried to create a web page browser window. An example, I copied what the book pretty much wanted but get only the header. What should I change? Also Anyone know any good books for this? Many thanks. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Translation/EN" ... (4 Replies)
Discussion started by: N-Training
4 Replies

6. Shell Programming and Scripting

Javascript or HTML to retrieve apache username

I have a internal wesbite set up and any visitor must enter username / passwd as defined in apache (I've set these up using htpasswd) I use cgi scripts set up using ksh or javascript to populate pages / tables etc. I want to be able to get the apache username that the used authorised... (3 Replies)
Discussion started by: frustrated1
3 Replies

7. Web Development

Help with passing HTML values in to JavaScript

Not sure if this is the right place to ask this but here goes. I am creating a cheat sheet for co-workers. The concept is that you pick wire size and conduit size and the amount of wires that will fit is displayed. I haven't used alot of drop downs and can't quite figure out the way the get id... (3 Replies)
Discussion started by: zero3ree
3 Replies
Login or Register to Ask a Question