Basics of web design 2023/2024

Teacher  Juan Romero Luis

Apr 25, 2024

Unit 6

Interactivity

(I)

bit.ly/BWD23U6

One

Three

Two

Surprise exam!!

bit.ly/BWD23U6

QU6.1 
Review about media queries

Introduction to JavaScript

bit.ly/BWD23U5

Introduction to responsive web design​ 

What is responsive design?

JavaScript is a popular programming language primarily used for enhancing the interactivity and functionality of web pages. It allows for the creation of dynamic content, including animations, interactive forms, and more complex features like games and web applications.

Introduction to responsive web design​ 

Examples of JavaScript in action

Introduction to responsive web design​ 

Examples of JavaScript in action

Introduction to responsive web design​ 

How important do you think JavaScript is to a website?

🎯 Step by step activity. Let's load a page without JavaScript enabled.

  1. Open your university page in Chrome or Firefox.
  2. Disable JavaScript and reload the page.
  3. Observe what happens (you can compere before and after).

Introduction to responsive web design​ 

JavaScript vs Java

JavaScript is primarily used for client-side web development to make web pages interactive

Java is a general-purpose programming language used for a wide range of applications, including server-side development, Android development, and big data technologies

What is actually JavaScript?

What is actually JavaScript?

Compiled vs Interpreted Languages

N

JavaScript is considered an interpreted language because the code is executed line by line by a JavaScript engine inside the browser at runtime.

What is actually JavaScript?

Object-Oriented Programming (OOP)

JS organizes software design around data, or objects, rather than functions and logic. In other words, it focuses on what developers want to manipulate, rather than how they want to manipulate it.

What is actually JavaScript?

Object-Oriented Programming (OOP)

offers a high degree of flexibility through:

Modularity

allows applications to be broken down into smaller, manageable parts or modules

Inheritance

facilitates code reuse, as one class can inherit properties and methods from another class

DOM Control

 enables interaction with the webpage via the Document Object Model (DOM)

What is actually JavaScript?

My first JavaScript

🎯 My first JS page

  1. Open this project.
  2. Review the HTML code. Notice that the JS code appears in the HTML file.
  3. Test the result produced by the button.
  4. Now, reflect on how the code functions by examining it.

Integrating Script code into HTML

Integrating Script code into HTML

How to make JS work in our HTML pages

Inline

Internal

External

Integrating Script code into HTML

How to make JS work in our HTML pages

👉

Inline


<button onclick="alert('Hello World!')">Click me</button>
<!-- The onlcick executes the code when the button is clicked. -->

<p onload="alert('Welcome to my website!')">
<!-- The onload event is triggered when the entire content of the webpage has been loaded. -->

<p onmouseover="this.style.color='red';">Hover over me!</p>
<!-- The onmouseover event is triggered when a user moves their mouse over an HTML element.-->

<p onmouseout="this.style.color='black';">Hover over me!</p>
<!--The onmouseout event is activated when a user moves their mouse away from an HTML element.-->

<input type="text" onkeydown="console.log('You pressed a key!')">
<!--The onkeydown event is triggered whenever a key is pressed down.-->

page.html

Internal

Integrating Script code into HTML

How to make JS work in our HTML pages

👉

<!DOCTYPE html>
<html>
	<head>
      <script>
        function myFunction() {
          document.getElementById("demo").innerHTML = "Paragraph changed.";
        }
	  </script>

	</head>
	<body> 
	...
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>

	</head>
	<body> 
		...
     <script>
        function myFunction() {
          document.getElementById("demo").innerHTML = "Paragraph changed.";
        }
	  </script>
	</body>
</html>

Introduction to CSS

How to make CSS work in our HTML pages

👉

External

<!DOCTYPE html>
<html>
	<head>
	   <script src="main.js">
       </scritp>
	</head>
	<body>
	...
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
	...
     <script src="main.js">
     </scritp>
	</body>
</html>

page.html

page.html

function ...

main.js

Explaining the connection between pages and internal menu

Basics of web design 2023/2024

Teacher  Juan Romero Luis

Apr 26, 2024

Unit 6

Interactivity

(II)

bit.ly/BWD23U6

What can JavaScript do?

What can JavaScript do?

Write HTML content

🎯 Writing content using document.write()

  1. Take a look at this example.
    1. Read the HTML and the JS code. What do you think is happening?
  2. Add a hyperlink pointing at https://udit.es using the same method, document.write()
  3. Try to include a different web link.

What can JavaScript do?

React to user events

 🎯 Reacting to user events with JS

  1. Take a look at this example.
    1. Read the HTML and the JS code. Where is the JS code included? What do you think is happening?
  2. Modify the JS code so that the alert message displays your name.  

What can JavaScript do?

Modify HTML elements

🎯 Modify HTML elements using JS

  1. Take a look at this example.
    1. Read the HTML and the JS code. Why do you think it is not working?
  2. Try to spot the mistake and change it to make the button work. Don’t forget to click on run to apply the changes.

What can JavaScript do?

Validate data input

🎯 Validating data input using JS

  1. Take a look at this example.
    1. Test the input, then check the HTML file.
  2. Adjust the values to ensure validation for numbers between 10 and 20.

What can JavaScript do?

Change or modify attributes

🎯 Changing HTML attributes with JS

  1. Take a look at this example.
    1. Test the input, then check the HTML file. What do you think is happening?
  2. Change the value of the src attribute to these images to achieve a similar substitution effect:
    1. Picture 1
    2. Picture 2

What can JavaScript do?

HTML JavaScirpt API

Access to Hardware and Storage

Data Access and Organization

Automation and Data Presentation

N

What results JS produces?

What results JS produces?

Alert box

What results JS produces?

HTML Output

What results JS produces?

HTML Element

What results JS produces?

Display Console

The basic syntax of JavaScript

The basic syntax of JavaScript​

Statements

var x = 10; 
// This is a statement that declares a variable x and assigns the value 10 to it.

Each statement corresponds to a command for the browser, as if you were instructing the browser to "do this".

The basic syntax of JavaScript​

Statements

👉

Closing statements

var x = 10; 
var y = 9

Each statement is separated by a semicolon ( ; ). It is not mandatory but highly recomended.

The basic syntax of JavaScript​

Block of statements

function greetUser() {
  var name = 'John';
  console.log('Hello, ' + name);
}
//In this function, the statements within the curly brackets '{ }' form a block that's executed together when the function is called.

Statements can be structured into blocks, initiated with curly brackets '{ }'. These brackets are used to cluster multiple statements that need to be executed collectively.

The basic syntax of JavaScript​

Block of statements

function checkNumber(number) {
    if (number > 10) {
        return "The number is greater than 10.";
    } else if (number < 10) {
        return "The number is less than 10.";
    } else {
        return "The number is exactly 10.";
    }
}
//In this function (an example of grouped statements) if the input number is greater than 10, it returns "The number is greater than 10.". If the number is less than 10, it returns "The number is less than 10.". If the number is exactly 10, it returns "The number is exactly 10.".

The basic syntax of JavaScript​

Writing considerations

👉

Case sensitivity

JavaScript is case-sensitive.

var lastname = "Romero Luis";
var lastName = "Pérez González";
document.getElementById('change') //This is correct
document.getelementbyid('change') //This won't work

The basic syntax of JavaScript​

Writing considerations

👉

camelCase

CamelCase is a naming convention in which each word in a compound word is capitalized, except possibly the first word.

var my_variable = 5 + 3;
var myVariable = 2 * 2;

The basic syntax of JavaScript​

Writing considerations

👉

Whitespace

JavaScript ignores multiple spaces. You can add white space to your script to make it more readable.

var foo =                    'hello world';
var foo = 'hello world';

The basic syntax of JavaScript​

Writing considerations

👉

Parentheses indicate priority

Just like in mathematics, parentheses () are used to change the order of operations and indicate priority.

2 * 3 + 5 // equals 11, multiplication occurs first
2 * (3 + 5) // equals 16, due to parenthesis, the sum occurs first

The basic syntax of JavaScript​

Comments

// This is a single-line comment

/*
This is
a multi-line
comment
*/

The basic syntax of JavaScript

🎯 Activity: Use AI to understand JS code

Your goal is to analyze and comment on the JavaScript by explaining every statement included in the JS file:

  1. Open this example.
  2. Attempt to understand its functionality independently.
  3. Open Gemini or ChatGPT and request it to explain the JavaScript code in detail.
  4. Once you finish, comment the JS file to explain the code.