IT With Erangi: October 2023

Tuesday 3 October 2023

Java Script Learning

Introduction to JavaScript

JavaScript is the programming language used by front-end web developers to instruct the browser to add behaviors to the web page. It provides many programming components like variables, functions, loops, and conditions to implement instructions for the browser. Using these components, JavaScript can instruct the browser to change the content and styles of HTML documents or interact with the webserver upon receiving events generated by the user's interaction with the browser user interface.

Think about the web applications like Facebook that you use every day. They are very interactive with users. The secret behind designing such interactive web applications is JavaScript.

The figure below shows the difference between HTML, CSS, and JavaScript using the analogy of a building. A building has a structure (e.g., how many rooms and what type), decorations (e.g., floor tiling and bricked walls), and functions (e.g., serving food to the customers). Similarly, HTML describes the structure (e.g., what web content - title, image, paragraph, etc.) of the web page to the browser, CSS describes the styling (e.g., color and position), and JavaScript adds behaviors (e.g., display a list of items when the user hovers mouse over the menu).

Code :-

I<html>

<head>

</head>

<body>

<input type="text" id="inputId" placeholder="Enter Name">

<button onclick="submitForm()"> Submit </button>

</body>

</html>

Output :-


The above HTML code gets the user's name as an input using <input> tag and provides a submit button. A JavaScript function named submitForm() calls if the user clicks the submit button. This function instructs the browser to display an alert window with the text "Congratulations <user's name> !".


Written by:  W.A. Eranga Dewmini

Industry Related Frameworks in CSS - Bootstrap

Industry-Related Frameworks in CSS:- Bootstrap

Bootstrap is the most popular and powerful front-end (HTML, CSS, JS) Framework for developing faster, responsive, and mobile-first website development.

With Bootstrap you can ,

easily create responsive websites.
quickly create a multi-column layout with pre-defined classes.
quickly create different types of form layouts.
quickly create different variations of navigation bars.
easily create components like accordions, modals, etc. without writing any JS code.
we can quickly create different types of alert boxes.
we can easily create dynamic tabs to manage large amounts of content.
we can easily create tooltips and popovers to show hint text.

Advantages of using Bootstrap

Save lots of time - We can save time and effort using the Bootstrap predefined design templates and classes.
Responsive features - Using Bootstrap we can easily create responsive websites that appear more appropriately on different devices such as mobile devices with different screen resolutions.
Consistent design - All Bootstrap components share the same design templates and styles through a central library, so the design and layout of our web pages will be consistent.
Easy to use - Bootstrap is very easy to use. Anybody with a basic working knowledge of HTML, CSS, and JavaScript can start development with Bootstrap.
Compatible with browsers - Bootstrap is compatible with all modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.
Open Source — It is completely free to download and use.

The below simple example shows a usage of Bootstrap.

Bootstrap code in HTML :-

<div class="hero-unit">

  <h1>CodePen Bootstrap</h1>

  <p>It's pretty easy now. We link it off <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.</p>

<p>

    <a class="btn btn-primary btn-large">

      Call to Action

    </a>

  </p>

</div>

<div class="page-wrap">

<div class="btn-group">

  <button class="btn">Left</button>

  <button class="btn">Middle</button>

  <button class="btn">Right</button>

</div>

<ul class="breadcrumb">

  <li><a href="#">Home</a> <span class="divider">/</span></li>

  <li><a href="#">Library</a> <span class="divider">/</span></li>

  <li class="active">Data</li>

</ul>

<div class="pagination">

  <ul>

    <li><a href="#">Prev</a></li>

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">4</a></li>

    <li><a href="#">5</a></li>

    <li><a href="#">Next</a></li>

  </ul>

</div>

<table class="table table-bordered">

  <thead>

    <tr>

      <th>#</th>

      <th>First Name</th>

      <th>Last Name</th>

      <th>Username</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td rowspan="2">1</td>

      <td>Mark</td>

      <td>Otto</td>

      <td>@mdo</td>

    </tr>

    <tr>

      <td>Mark</td>

      <td>Otto</td>

      <td>@TwBootstrap</td>

    </tr>

    <tr>

      <td>2</td>

      <td>Jacob</td>

      <td>Thornton</td>

      <td>@fat</td>

    </tr>

    <tr>

      <td>3</td>

      <td colspan="2">Larry the Bird</td>

      <td>@twitter</td>

    </tr>

  </tbody>

</table>

</div>

CSS Style sheet Code:-

.page-wrap {

  padding: 20px 60px;

.breadcrumb {

  margin: 25px 0;

Output:-

Written by: W.A. Eranga Dewmini