JavaScript Primer
JavaScript is the programming language used to add dynamic behavior to web pages. A high-level, interpreted language, meaning it executes lines of code as they are loaded.
An important technology in the development of the world wide web.
Allows developers to build interactive web pages for a better user experience.
Web browsers have a built-in JavaScript engine so that the code is sent from the server to the browser and the client browser is responsible for executing the code that is sent.
JavaScript is event-driven, meaning it listens for user events like clicking on a button or moving the position of the mouse over an object on the screen.
The Document Object Model(DOM) allows the web page and javascript routines to interact with each other. When a HTML page is loaded the browser creates a map of the page. DOM allows javascript to access that map.
Document method getElementById() allows you to act on a specific HTML element on the web page.
We can use this method to find the HTML element
This example uses the method to "find" an HTML element (with id="hello")
and changes the innerHTML content to contain the value "Hello Google World!":
My first javascript
=========================================================
<!DOCTYPE html>
<html>
<body>
<h1 id="hello">Click the button say hello</h1>
<button type="button" onclick="sayHello()">Click Here</button>
<script>
function sayHello() {
document.getElementById("hello").innerHTML = "Hello Google World!";
}
</script>
</body>
</html>
=========================================================
External Scripts
Use script src to access external Javascript program and bring into your HTML page. Onclick button will call the script file
========================================================
<!DOCTYPE html>
<head>
<script src="https://storage.googleapis.com/cloud-storage-exam/scripts/myScripts.js"></script>
</head>
<html>
<body>
<h2>Example of external JavaScript file use</h2>
<p id="d1">Function calls date.</p>
<button type="button" onclick="myDate()">Click for Date</button>
<p>(myDate function is stored in an external file called "myScripts.js")</p>
</body>
</html>
=========================================================myScripts.js
========================================================
function myDate() {
document.getElementById('d1').innerHTML = Date()";
}
=========================================================
JavaScript can use prompts to allow for user inputs
The prompt() method will open a dialog box and take input from the user keyboard.
========================================================
<!DOCTYPE html>
<html>
<body>
<h1>Example of the prompt method</h1>
<p>Click the button to bring up the prompt dialog box.</p>
<button onclick="myPrompt()">Click Here</button>
<p id="box"></p>
<script>
function myPrompt() {
let pname = prompt("Enter your name");
if (pname != null) {
document.getElementById("box").innerHTML =
"Hello " + pname + "! Welcome to Google";
}
}
</script>
</body>
</html>
=========================================================
Javascript form validation
A key concept in collecting data is trying to prevent obvious errors.
When entering an email field javascript can check for an @ sign in the content because all valid emails will contain this character.
Following validate email field.
Also, you can use the Javascript onmouseover event handler to display a message when the mouse is placed over the field you are validating. This will provide additional details about the entry for that field.
=========================================================
<!DOCTYPE html>
<html>
<body>
<h1>Email Form Validation</h1>
<form id="entForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Enter</button>
<p id="ent-mess" style="color: blue; "></p>
<p id="err-mess" class="error" style="color: red;"></p>
</form>
<script>
const emailInp = document.getElementById('email');
const entMess = document.getElementById('ent-mess');
const errMess = document.getElementById('err-mess');
emailInp.addEventListener('mouseover', function() {
entMess.textContent = 'Use email format of name@site.com';
});
emailInp.addEventListener('mouseout', function() {
entMess.textContent = '';
});
function checkEmail(email) {
const emailPat = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailPat.check(email);
}
document.getElementById('entForm').addEventListener('submit', function(event) {
event.preventDefault();
if (checkEmail(emailInput.value)) {
errMess.textContent = '';
alert('Email is good');
} else {
errMess.textContent = 'Enter email with @';
}
});
</script>
</body>
</html>
====================================================
JSON
JSON, or JavaScript Object Notation, is a data format used to transmit data that is easy to read. It can be used as a universal file to send between different technology platforms not tied to any one language.
It is text based and is used in web applications to read and write data. Files are relatively small so transmission speeds are fast.
The format relies on key/value pairs surrounded by curly braces {}.
Can store strings, numbers, booleans, nulls and arrays.
Using JSON.stringify() method you can convert JavaScript objects into easy readable strings and is supported by major browsers.
================================================
<!DOCTYPE html>
<html>
<body>
<h1>Data properties with JSON</h1>
<p id="data"></p>
<script>
const student = {
name: "John",
grad: 2028,
highschool: "Westhill"
};
// Display JSON
document.getElementById("data").innerHTML = JSON.stringify(student);
</script>
</body>
</html>
=========================================================
No comments:
Post a Comment