// Insert script element
var script = document.createElement(‘script’);
script.src = ‘externalScript.js’;
document.head.appendChild(script);
// Writing basic JavaScript code
var name = ‘John’;
var age = 25;
console.log(‘Name: ‘ + name);
console.log(‘Age: ‘ + age);
// Working with elements and events
var button = document.getElementById(‘myButton’);
button.addEventListener(‘click’, function() {
console.log(‘Button clicked’);
});
// Structuring JavaScript code (embedded vs external JavaScript file source)
// externalScript.js
function showMessage() {
console.log(‘Hello, world!’);
}
showMessage();
// Creating JavaScript functions
function addNumbers(a, b) {
return a + b;
}
// Calling a JavaScript function
var result = addNumbers(3, 5);
console.log(‘Result: ‘ + result);
// Parsing arguments to JS function
function greetUser(name) {
console.log(‘Hello, ‘ + name + ‘!’);
}
greetUser(‘Alice’);
// Handling events with functions
function handleButtonClick() {
console.log(‘Button clicked’);
}
button.addEventListener(‘click’, handleButtonClick);
// Working with Document Object Model (DOM)
var element = document.getElementById(‘myElement’);
console.log(‘Element content: ‘ + element.textContent);
!Changing Element Styles
var element = document.getElementById(‘myElement’);
element.style.color = ‘red’;
element.style.backgroundColor = ‘yellow’;
- Creating and appending new elements:
var newElement = document.createElement(‘div’);
newElement.textContent = ‘New element’;
document.body.appendChild(newElement);
- Form validation:
var form = document.getElementById(‘myForm’);
form.addEventListener(‘submit’, function(event) {
var input = document.getElementById(‘myInput’);
if (input.value === ”) {
event.preventDefault();
console.log(‘Input cannot be empty’);
}
});
- AJAX request using
fetch
:
fetch(‘https://api.example.com/data’)
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.log(‘Error:’, error);
});
Leave A Comment