"I am Saqib Jahangir. A passionate vlogger, software engineer, trainer and avid traveler with a deep love for exploring the hidden gems of our beautiful planet. With a strong foundation in Application Development, Application Architecture & Database Design and Product Management, I bring over a decade of hands-on experience building secure, scalable, and resilient web applications for a diverse range of industries."

Introduction to JavaScript Libraries and Frameworks

 

Introduction to JavaScript Libraries and Frameworks

What is a JavaScript Library?

A JavaScript library is a collection of pre-written code that you can use to perform common tasks more easily. It provides helpful functions to simplify tasks such as:

·         Manipulating the HTML DOM

·         Handling events

·         Making HTTP requests

·         Animations, utilities, and more

You call functions from the library whenever you want to use them.

What is a JavaScript Framework?

A JavaScript framework is a full structure or platform for building web applications. It provides a foundation and often dictates how your app is organized.

·         You write your application code inside the framework.

·         The framework calls your code at appropriate times (this is called inversion of control).

·         Frameworks typically handle routing, state management, UI rendering, and more.

Popular JavaScript Libraries

·         jQuery: Simplifies DOM manipulation and event handling.

·         Lodash: Utility functions for arrays, objects, and more.

·         Axios: Makes HTTP requests easier.

·         D3.js: Data visualization library.

Popular JavaScript Frameworks

·         React: Library (often called framework) for building UI components and single-page applications.

·         Angular: Full-featured framework by Google with two-way data binding and MVC architecture.

·         Vue.js: Progressive framework for building user interfaces, easy to learn and flexible.

What is Bootstrap?

·         Bootstrap is a popular CSS framework that also includes JavaScript components.

·         It helps quickly build responsive and mobile-friendly websites.

·         Provides ready-made styles and UI components like buttons, forms, navbars, modals, and more.

·         Works well alongside JavaScript libraries like jQuery.

How to Add Popular Libraries and Frameworks

Add jQuery (Library):

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

Add Bootstrap (CSS & JS Framework):

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Bootstrap JS Bundle (includes Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Simple Examples

1. jQuery Example: Hide a Button on Click

<button id="btn">Click me</button>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('#btn').click(function() {
    $(this).hide();
  });
</script>

2. Bootstrap Example: Styled Button

<button class="btn btn-primary">Bootstrap Button</button>
 
<!-- Add Bootstrap CSS link in <head> to style the button -->

3. React Example: Simple Button Component (JSX)

function MyButton() {
  const [visible, setVisible] = React.useState(true);
 
  return (
    visible && <button onClick={() => setVisible(false)}>Click me</button>
  );
}

 

Popular Posts

Operators (Arithmetic, Comparison, Logical)

  Operators in PHP are symbols that perform operations on variables and values. They are essential for performing calculations, comparing values, and making logical decisions in your code. PHP supports several types of operators, including arithmetic, comparison, and logical operators. Arithmetic Operators Arithmetic operators are used to perform basic mathematical operations. Example: <?php $a = 10; $b = 3;   echo $a + $b; // 13 echo $a - $b; // 7 echo $a * $b; // 30 echo $a / $b; // 3.3333 echo $a % $b; // 1 (modulus) echo $a ** $b; // 1000 (exponentiation) ?> Comparison Operators Comparison operators are used to compare two values. They return true or false . Example: <?php $x = 5; $y = 10;   var_dump($x == $y);   // false var_dump($x != $y);   // true var_dump($x === $y); // false (checks value and type) var_dump($x !== $y); // true var_dump($x > $y);    // false var_dum...
Read more

Functions (Built-in & User-defined)

  Functions in PHP are blocks of code designed to perform a specific task. They help make code reusable, organized, and easier to maintain. PHP provides built-in functions for common tasks, and also allows you to create your own user-defined functions . Built-in Functions PHP has hundreds of built-in functions that perform predefined operations such as string manipulation, mathematical calculations, and array handling. Example (Built-in Functions): <?php // String length echo strlen("Hello World"); // Outputs: 11   // Find maximum value in an array echo max(10, 20, 30); // Outputs: 30   // Convert string to uppercase echo strtoupper("php is awesome"); // Outputs: PHP IS AWESOME ?> User-defined Functions You can create your own functions to execute code whenever needed. This helps reduce repetition and makes programs easier to read. Syntax: function functionName($parameter1, $parameter2) {     // Code to...
Read more