UX is the shortform of **user experience**; a standard of understanding the **usability** of a product and optimise it based on data recived from users.
UX is a **standard of usability** in all industries since collecting UX and improving the product based on it increases the **UX** of the product on the market, increasing profits of the company or collaboration.
UX data is mainly gathered through internet forms or feedback discussion boards. Advertisments and websites such as Google forms or official company forums are some common methods. This data is used to make small or big quality kf life changes that make it more convineient anfor the user.
An example is the contrast between old and new Mario games:
Incredibly detailed, amazing resolution, interesting levels and larger UI/interfaces.
As time has gone by, the user demands for higher resolution, higher detail, better quality, more game depth has translated into games as they strive to improve their UX to keep their products on top of the list.
jQuery is a lightweight, “**write less do more**”, JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your site and it simplifies many tasks that require many lines of JavaScript code to accomplish, wraping them into **lightweight methods** that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library has the following features
If you ever want to use jQuery, you can download it here or just use a CDN (Content Delivery Network) from Google!
<!-- Downloaded jQuery -->
<head>
<script src="jquery-3.7.1.min.js"></script>
</head>
<!-- Google CDN which is the more common method of getting the library -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
With jQuery you select (query) HTML elements and perform “**actions**” on them.
Basic syntax is: $(selector).action()
Examples:
$(this).hide() - hides the current element
$(“p”).hide() - hides all <p> elements
$(“.test”).hide() - hides all elements with class=”test”
$(“#test”).hide() - hides the element with id=”test”
In the following example, write in one of the comments where the selector is (popcorn hack ~ raise hand when found)
$(document).ready(function(){ //
$("button").click(function(){ //
$("p").hide(); // #id selector
}); //
}); //
The element Selector
The Document Ready Event
All jQuery methods begin inside a document **document ready** event:
$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running before the document is finished loading (is ready).
It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.
Reason:
$(function(){
// An even quicker way to do it
// jQuery methods go here...
});
What are Events?
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
Popcorn Hack: Name 3 other event HTML events
Hover
On Press
On Reload
onclick=JavaScript
// The infamous onclick event in html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Final example, look at it here
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Final example, look at it here
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Challenge! Make it so the text appears with an animation, causing it to slowly fade in and out!
});
</script>
</head>
<body>
<button id="hide">Hide</button>
<button id="show">Show</button>
<p>Points < Indicators :D</p>
<p>This is another small paragraph</p>
<p>(if you put a cool joke here you get .01 extra points)</p>
<p>"ew who wrote that?" ^^^</p>
</body>
</html>
Final example, look at it here
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
Final example, look at it here
AJAX stands for Asynchronous JavaScript and XML. It allows web pages to be updated asynchronously in a easier way and is promise based. A Promise in JavaScript represents the eventual completion (or failure) of an asynchronous request.
Against a normal async request AJAX has a lot of advantages:
Easier Error Handling: Promises are much easier to deal with than callbacks. If an error occurs in a promise, it will be passed down to the next catch() clause.
Simpler API Chaining: If you want to wait for one operation to finish before starting another one you can simply use .then().
getUserLocation(function(error, location) {
if (error) {
console.error('Error:', error);
} else {
getForecast(location, function(error, forecast) {
if (error) {
console.error('Error:', error);
} else {
console.log('Forecast:', forecast);
}
});
}
});
fetch('api/location')
.then(response => response.json())
.then(location => fetch('api/forecast/' + location))
.then(response => response.json())
.then(forecast => {
console.log('Forecast:', forecast);
})
.catch(error => {
console.error('Error:', error);
});
$.ajax({ url: 'api/location', method: 'GET', dataType: 'json' })
.then(function(location) {
return $.ajax({ url: 'api/forecast/' + location, method: 'GET', dataType: 'json' });
})
.then(function(forecast) {
console.log('Forecast:', forecast);
})
.catch(function(error) {
console.error('Error:', error);
});
You can see using ajax is much easier to read than callback system. However when it comes to using jquery ajax vs javascript’s version there are less differences. It is up to you which syntax you like more.
As mentioned earlier, jQuery ajax also builds on top of the old javascript version so it can support older browser versions.
Jquery’s most important use is making you site dynamic and update from user input. The most important part of this for our projects is taking the data from the backend and building html from it.
%%html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.post {
border: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
}
.like-count {
color: #007BFF;
}
</style>
</head>
<body>
<div id="posts"></div>
<script>
// Fake API function
function getAPI() {
return [
{id: 1, content: 'Dogs are man\'s best friend.', likes: 10},
{id: 2, content: 'Dogs have an exceptional sense of smell.', likes: 20},
{id: 3, content: 'There are hundreds of different dog breeds.', likes: 30}
];
}
$(document).ready(function(){
var posts = getAPI();
$.each(posts, function(i, post) {
var postHtml = '<div class="post"><h2>Post ' + post.id + '</h2><p>' + post.content + '</p><p class="like-count">' + post.likes + ' likes</p></div>';
$('#posts').append(postHtml);
});
});
</script>
</body>
This represents a website for buying dogs. The API contains an id, name, price, and breed for each dog. Display them all as html using jQuery.
%%html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.dog {
border: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
}
.price {
color: #007BFF;
}
</style>
</head>
<body>
<div id="dogs"></div>
<script>
function getAPI() {
return [
{id: 1, name: 'Abel', price: '$1000', breed: 'Golden Retriever'},
{id: 2, name: 'Beatrice', price: '$800', breed: 'Retriever'},
{id: 3, name: 'Chow', price: '$1200', breed: 'Shepherd'}
];
}
$(document).ready(function(){
var dogs = getAPI();
var dogsContainer = $('#dogs');
$.each(dogs, function(index, dog) {
var dogElement = $('<div class="dog">');
dogElement.append('<h2>' + dog.name + '</h2>');
dogElement.append('<p class="price">' + dog.price + '</p>');
dogElement.append('<p>Breed: ' + dog.breed + '</p>');
dogsContainer.append(dogElement);
});
});
</script>
</body>
You can also create animations in JQuery.
Animations glitch out jupyter notebooks so this example can’t be in runnable code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Reset CSS properties to their original values
$("div").css({
left: '0px',
opacity: '1',
height: '100px',
width: '100%'
});
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '100%'
});
});
});
</script>
</head>
<body>
<button>Start</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
Look at the animation here
What Does CRUD Stand For?
**create, read, update, delete**
What Does CRUD Do?
How Can CRUD Be Applied to jQuery and Beyond?
// Create a new element and append it to a table
$('#myTable').append('<tr><td>New Data</td></tr>');
// Read data from a table
$('#myTable tr').each(function() {
console.log($(this).text());
});
// Update data in a table
$('#myTable td:contains("Old Data")').text('Updated Data');
// Delete a row from a table
$('#myTable td:contains("Data to Delete")').closest('tr').remove();
Assuming a simple HTML table with the ID “myTable”:
<table id="myTable">
<tr>
<th>Data</th>
</tr>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</table>
// Create a new row and append it to the table
$('#myTable').append('<tr><td>New Row</td></tr>');
// Read and log data from the table
$('#myTable tr').each(function() {
console.log($(this).text());
});
// Update data in the first row of the table
$('#myTable tr:first-child td').text('Updated Row');
// Delete the second row from the table
$('#myTable tr:nth-child(2)').remove();
These examples demonstrate how CRUD operations can be applied using jQuery to manipulate a simple HTML table on the client side. In more complex applications, these operations are often handled on the server side with the help of backend frameworks and databases.
| Name | Review | Action |
|---|---|---|
| John Mortensen | Great lesson! Explained UX and CRUD principles as well as usage of jQuery very nicely. +3 indicators! | |
| Sean Yeung | Very interactive teaching! Covered all the topic but should have made more Taylor Swift references. |
popcorn hack
%%html
<!-- Head contains information to Support the Document -->
<head>
<!-- load jQuery and DataTables output style and scripts -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>var define = null;</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<!-- Body contains the contents of the Document -->
<body>
<table id="xdemo" class="table">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
<th>Color</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ford</td>
<td>Mustang</td>
<td>2022</td>
<td>Red</td>
<td>$35,000</td>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>2022</td>
<td>Silver</td>
<td>$25,000</td>
</tr>
<tr>
<td>Tesla</td>
<td>Model S</td>
<td>2022</td>
<td>White</td>
<td>$80,000</td>
</tr>
<tr>
<td>Cadillac</td>
<td>Broughan</td>
<td>1969</td>
<td>Black</td>
<td>$10,000</td>
</tr>
<tr>
<td>Ford</td>
<td>F-350</td>
<td>1997</td>
<td>Green</td>
<td>$15,000</td>
</tr>
<tr>
<td>Ford</td>
<td>Excursion</td>
<td>2003</td>
<td>Green</td>
<td>$25,000</td>
</tr>
<tr>
<td>Ford</td>
<td>Ranger</td>
<td>2012</td>
<td>Red</td>
<td>$8,000</td>
</tr>
<tr>
<td>Kuboto</td>
<td>L3301 Tractor</td>
<td>2015</td>
<td>Orange</td>
<td>$12,000</td>
</tr>
<tr>
<td>Ford</td>
<td>Fusion Energi</td>
<td>2015</td>
<td>Guard</td>
<td>$25,000</td>
</tr>
<tr>
<td>Acura</td>
<td>XL</td>
<td>2006</td>
<td>Grey</td>
<td>$10,000</td>
</tr>
<tr>
<td>Ford</td>
<td>F150 Lightning</td>
<td>2024</td>
<td>Guard</td>
<td>$70,000</td>
</tr>
</tbody>
</table>
</body>
<!-- Script is used to embed executable code -->
<script>
$("#xdemo").DataTable();
</script>
| Make | Model | Year | Color | Price |
|---|---|---|---|---|
| Ford | Mustang | 2022 | Red | $35,000 |
| Toyota | Camry | 2022 | Silver | $25,000 |
| Tesla | Model S | 2022 | White | $80,000 |
| Cadillac | Broughan | 1969 | Black | $10,000 |
| Ford | F-350 | 1997 | Green | $15,000 |
| Ford | Excursion | 2003 | Green | $25,000 |
| Ford | Ranger | 2012 | Red | $8,000 |
| Kuboto | L3301 Tractor | 2015 | Orange | $12,000 |
| Ford | Fusion Energi | 2015 | Guard | $25,000 |
| Acura | XL | 2006 | Grey | $10,000 |
| Ford | F150 Lightning | 2024 | Guard | $70,000 |
Combine all aspects taught throughout this lesson.
In addition:
// Variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$border-radius: 5px;
// Mixin
@mixin button-styles($bg-color, $text-color) {
background-color: $bg-color;
color: $text-color;
border: 1px solid darken($bg-color, 10%);
border-radius: $border-radius;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
&:hover {
background-color: lighten($bg-color, 10%);
}
}
// Nesting
.container {
width: 80%;
margin: 0 auto;
h1 {
color: $primary-color;
margin-bottom: 20px;
}
.button-section {
display: flex;
justify-content: space-around;
// Using Mixin for Primary Button
.primary-button {
@include button-styles($primary-color, #fff);
}
// Using Mixin for Secondary Button
.secondary-button {
@include button-styles($secondary-color, #fff);
}
}
}
Variables:
Utilization: Variables are used to store and reuse colors ($primary-color, $secondary-color) and common styles ($border-radius).
Effectiveness: It helps in maintaining consistency throughout the stylesheet. If a color or style needs to be changed, you only need to update the variable, and the change will be reflected everywhere.
Mixin:
Utilization: The button-styles mixin is used to define common styles for buttons, allowing us to reuse the code for both primary and secondary buttons.
Effectiveness: Mixins promote code reusability and reduce redundancy. If button styles need to be updated, you only need to modify the mixin, and the changes will apply to all instances where the mixin is used.
Nesting:
Utilization: Nesting is used for a cleaner and more structured way of writing styles, especially for nested elements like headers within a container and buttons within a button-section.
Effectiveness: Nesting helps in organizing styles hierarchically, making the code more readable and maintainable. It also reduces the need for repetitive class names.