What is jQuery

jQuery is a JavaScript library that provides a set of features that allows you to create interactivity with very little code. jQuery is built around the idea of selecting objects on the page and then performing actions on them. It’s similar to CSS in that you use a selector to define an element and then you write code that is applied to that element.

jQuery is a JavaScript file that you can include in the header of your HTML page using the <script> tag. You can download your own copy of jQuery or point to a copy maintained online. Here’s an example of linking to the Google maintained version of jQuery:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>

All the actions that the user can take with jQuery are called events – something that happens at a precise moment. Some common events are ‘click’, ‘keypress’, or ‘submit’.

The following code snippet demonstrates how jQuery is linked to and how a simple button script is created that, when pressed, creates an alert box. The link to jQuery and the script for the button are placed in the head section of the document. The element the script is targeting is placed within the body tags.


<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#b1").mousedown(function(){

    alert("Mouse down over the button!");

  });

});

</script>

</head>

<body>

 

<button id="b1">Click me</button>

 

</body>

</html>

The $(document).ready(handler); — This statement is typically known as ready event. Where the handler is basically a function that is passed to the ready() method to be executed safely as soon as the document is ready to be manipulated.

The next line down “$(“#b1”).mousedown(function(){“ is referencing the selector ID for the button in the body section. And the following line “alert(“Mouse down over the button!”);” describes the action to take when the system detects a mousedown on the button. Try cutting and pasting the above script into a text editor and save the file as an html document, then opening it in your browser to see how it behaves.

The advantages of using jQuery are many:

  • It saves a lot of time and effort by using jQuery effects and selectors
  • jQuery considerably simplifies the common JavaScript tasks.
  • jQuery is very easy to use. Anybody with the basic working knowledge of HTML, CSS and JavaScript can start development with jQuery.
  • jQuery is created with modern browsers in mind, and it is compatible with all major modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.


An excellent resource for learning jQuery is https://www.tutorialrepublic.com/jquery-tutorial/

What is Bootstrap?
Bootstrap is a front-end framework that allows for fast web development. It consists of HTML and CSS templates for creating common user interface components like forms, buttons, and navigation. Bootstrap is built upon HTML, CSS and JavaScript to create responsive mobile-first sites and apps.

Responsive design means that a web page can detect the visitors screen size and orientation and automatically adapt the display accordingly. So, no matter what device or computer you are viewing from, the layout will adapt to the screen size. Bootstrap also includes user interface components, layouts and JS tools. There are hundreds or Bootstrap themes and templates that you can download to get a jump on your project.

We’ll cover a few major concepts of Bootstrap, but if you want to learn more, you can visit https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/ to see and try out some of the code yourself.

Setting up your HTML to include bootstrap is an easy process. In the head of your HTML document, link to the Bootstrap CSS file. Next, place the Javascript files right before the </body> tag. It will look like this:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Basic Bootstrap Template</title>

    <!-- Bootstrap CSS file -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

</head>

<body>

    <h1>Hello, world!</h1>

    <!-- JS files: jQuery first, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

One of the main features of Bootstrap is the container. Containers are the most basic layout element in Bootstrap. Containers are used to wrap content with some padding and center align content horizontally on the page. There are three types of containers:

  • .container – has a max-width at each responsive breakpoint
  • .container-fluid – has 100% width at all breakpoints
  • .container-{breakpoint} – has 100% width until the specified breakpoint is reached. For example, there are width breakpoints for extra small( <576px), small (>576px), medium (>768px), large (>992px) and extra large (>1200px).


Within the container sits the grid system. The grid system divides the screen into 12 columns. Within this, you can specify the width of a column. These columns are dynamic in that they resize according to the current width of your browser window. The following code shows different ways to set up a two-column grid:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Basic Bootstrap Template</title>

    <!-- Bootstrap CSS file -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

</head>

<body>

    <div class="container"> <!--Row with two equal columns-->

<div class="row">

<div class="col-md-6">Column left</div>

<div class="col-md-6">Column right</div>

</div>

<!--Row with two columns divided in 1:2 ratio-->

<div class="row">

<div class="col-md-4">Column left</div>

<div class="col-md-8">Column right</div>

</div>

<!--Row with two columns divided in 1:3 ratio-->

<div class="row">

<div class="col-md-3">Column left</div>

<div class="col-md-9">Column right</div>

</div>

    </div>

    <!-- JS files: jQuery first, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

 

Cut and paste the above code into your text editor, save it as an html document and call it up in your browser to see how the two-column system works.

If you’ve created HTML documents before, then you’ll find Bootstrap has many advantages:

  • Saves time by using predefined templates and CSS.
  • You can easily create responsive websites that are based on a grid system
  • Great documentation
  • Compatible with all modern browsers
  • It’s open source, so it’s free!

There are too many features of Bootstrap to list here. Bootstrap has classes for buttons, navbars, progress bars, modals, popovers, accordions and more. You are encouraged to check out these features at https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/.

As you can see, creating a web page involves several languages – HTML, CSS, JavaScript, jQuery and Bootstrap. Knowing HTML and CSS are the basics of web page design. You can enhance functionality with JavaScript and jQuery and control the visual appearance with Bootstrap. This unit covers just the basics for these computer languages, and you are encouraged to follow the links to more information that appear in each section.