Day15
Day15
www.aloinfotech.in
Linking JavaScript to Html
Inline JavaScript
<body>
<script>
console.log('Hello from inline JavaScript!');
</script>
</body>
External JavaScript
<body>
<script src="script.js"></script>
</body>
DOM manipulation
DOM (Document Object Model) manipulation in JavaScript allows you to dynamically change the
content, structure, and style of your HTML documents.
• getElementById
• getElementsByClassName
• getElementsByTagName
• style Property
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
</head>
<body>
<h1 id="main-heading">Hello, World!</h1>
<p class="text">This is a paragraph.</p>
<p class="text">This is another paragraph.</p>
<button onclick="changeContent()">Change Content</button>
<script>
// Access elements
const heading = document.getElementById('main-heading');
const paragraphs = document.getElementsByClassName('text');
const firstParagraph = document.querySelector('.text');
const allParagraphs = document.querySelectorAll('.text');
// Modify content
function changeContent() {
heading.textContent = 'Hello, JavaScript!';
firstParagraph.textContent = 'This paragraph has been changed.';
}
// Modify Style
function changeStyle() {
const heading = document.getElementById('main-heading');
heading.style.color = 'blue';
heading.style.fontSize = '3em';
heading.style.textAlign = 'center';
}
</script>
</body>
</html>
Events in JavaScript
Events in JavaScript are actions or occurrences that happen in the browser that can be detected
and responded to. Events are a crucial part of making web pages interactive.
Event Types
Mouse Events: click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove
Keyboard Events: keydown, keyup, keypress
Form Events: submit, reset, focus, blur, change, input
Window Events: load, resize, scroll, unload
Touch Events: touchstart, touchmove, touchend
React
React is a popular JavaScript library for building user interfaces, particularly single-page applications
Developed by Facebook, React allows developers to create large web applications that can update and
v npm start
This command will start the development server and automatically open your new React application
in the default web browser. The default URL is http://localhost:3000.
Folder Structure Explanation:
public/:
.gitignore: Specifies files and directories that should be ignored by version control (e.g., node_modules).
package.json: Manifest file that lists the project dependencies and scripts.
README.md: Project documentation that includes information about the project, how to install and run it, and
other relevant details.
src/:
Contains all the source code for your React application.
assets/: Stores images, fonts, or any other static resources used in your application.
components/: Contains reusable UI components. Each component is usually stored in its own
directory with its own styles and tests.
pages/: Contains top-level components that represent different pages of your application. Each
page may consist of multiple components.
services/: Includes API services, utility functions, or any other services used throughout your
application.
styles/: Stores CSS or SCSS stylesheets for your components and pages.
App.js: The root component of your application, which typically sets up routes and renders other
components.
index.js: The entry point of your application where React is initialized and the app is rendered into
the DOM.
Exporting and Importing components, functions, or any other values between files is
essential for organizing and reusing code across your application
Exporting
You can export values (functions, variables, components, etc.) from a file using the export
keyword.
Importing
You can import exported values into another file using the import statement.
Named Imports: Importing specific exported values by their names.