Scribd
Upload
3 views

Tutorial_js

Uploaded by

ishak.gg.dz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Tutorial_js

Uploaded by

ishak.gg.dz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Tutorial js.

md 4/5/2023

Getting Started with JavaScript


Dr A. BENGUEDDACH
April 4, 2023

Learn JavaScript: Fundamentals


Project #1: Counter App
1. Build using HTML5 a form as shown in this preview:

Counter App
Current Value + 0 -

2. You can replace each button by a label image, so we have to add 2 images.

Example: <a><img src="imag/previous.png" alt="next"></a>

3. Create new File script.js in your workspace.


4. Link your HTML file with the js file as follow: <script src="js/script.js"></script>

Note: src indicate the path of file in our case is "js/script.js".

1. Put the bellow instruction [#4] in head section, as the following:

<head>
<link href="css/style1.css" rel="stylesheet">
<script src="js/script.js"></script>
</head>

5. Add to the onclick attribute the call function decrease() to the minus button and increase() call to the
Plus button. Here an example:

<a onclick="decrease()"><img src="imag/previous.png" alt="next"></a>


<a onclick="increase()"><img src="imag/next.png" alt="previous"></a>

1/6
Tutorial js.md 4/5/2023

6. Now add css rules for the images button as indicated in this preview:

Solution project #1:

count = 0;
function increase() {
/*catch an input element in a variable*/
myInput = document.getElementById("count");
/*displays the content of myInput to the console*/
console.log(myInput);
inputValue = myInput.value;
/*Convert to an integer then Increment the counter value by 1*/
count = parseInt(inputValue) + 1;
/*display the new counter value in input*/
myInput.value = count;
console.log(count);
}
function decrease() {
myInput = document.getElementById("count");
inputValue = myInput.value;
/*Convert to an integer then Decrease the counter value by 1*/
count = parseInt(inputValue) - 1;
myInput.value = count;
console.log(count);
}

Note: download the project code source named cours js and compare with your solution.

2/6
Tutorial js.md 4/5/2023

Project #2 Dark/Light Mode


To create a dark mode in a web page. First, you need to create two sets of styles: one for the light mode and
one for the dark mode.

1. Create css file for light modestyle1.css.


2. Create an other css file for dark mode style2.css.
3. Change the <link> tag in each html file with the right stylesheet file.
4. Combine <a> and img Tags to switch between the two modes.
Exemple: <a href="index.html"><img src="name.jpg" alt="label"></a>

Here the preview for the light/dark mode:

Tips: To switch to the Dark Mode, you need to:

Use the clickable image to switch between the dark/light Mode.


Locate the link tag and assign to href the path to the css 1 file and vice versa.
Locate image tag and change the icon to light and vice versa.

Solution project #2:

/* let define variable, const define constant*/


/* isStyle define the switch mode as switch power */
let isStyle1 = true;
/*catch elements {link+ img} in variables*/
const styleLink = document.getElementById('theme-style');
const imgIcon = document.getElementById('icon');

/* function that switch between the dark and the light Mode */

function switchTheme() {
3/6
Tutorial js.md 4/5/2023

/* if isStyle1=Light=true : change href attribute to style2 and the icon


image to light picture */

if (isStyle1) {
styleLink.href = 'css/style2.css';
imgIcon.innerHTML = '<a onclick="switchTheme()" id="theme-toggle">
<img src="imag/light.png" alt="light" id="light"></a>';
isStyle1 = false;
} else {

/* if isStyle1=Dark= false : change href attribute to style1 and the icon


image to Moon picture */

styleLink.href = 'css/style1.css';
imgIcon.innerHTML = '<a onclick="switchTheme()" id="theme-toggle">
<img src="imag/dark.png" alt="dark" id="dark"></a>';
isStyle1 = true;
}
}

Project #3: CATS GALLERY PHOTO


There are many ways to create a gallery or slider in JavaScript. Here's a simple example of a gallery using
JavaScript:

HTML:

<div>
<img id="gallery-image" src="">
</div>
<button onclick="prevImage()">Previous</button>
<button onclick="nextImage()">Next</button>

JavaScript:

const images = [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg'
];

let currentIndex = 0;

function showImage() {
const imageElement = document.getElementById('gallery-image');
imageElement.src = images[currentIndex];
}

4/6
Tutorial js.md 4/5/2023

function prevImage() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = images.length - 1;
}
showImage();
}

function nextImage() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
showImage();
}

// Show the first image when the page loads


showImage();

This example sets up an array of image URLs and keeps track of the current index. When the "Previous" or
"Next" button is clicked, the index is updated and the corresponding image is displayed.

Exercise:

Build using HTML5 a Slider as shown in this preview:

5/6
Tutorial js.md 4/5/2023

Solution

let currentIndex = 0;

function showImage() { const imageElement = document.getElementById('gallery-image'); imageElement.src =


images[currentIndex]; }

function prevImage() { currentIndex--; if (currentIndex < 0) { currentIndex = images.length - 1; } showImage(); }

function nextImage() { currentIndex++; if (currentIndex >= images.length) { currentIndex = 0; } showImage(); }

// Show the first image when the page loads showImage();

6/6

You might also like