PDF থেকে DOM উপাদান নির্বাচন এবং বৈশিষ্ট্য পরিবর্তন সম্পর্কিত ১ থেকে ১৫ পর্যন্ত কোডগুলো এখানে কার্ড আকারে দেওয়া হলো।
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Prompt Sample</title>
</head>
<body>
<p>test sample</p>
<button type="button" value="button" id="mybtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">Button</button>
<script>
function butotnClick(){
// Use appPrompt/appAlert instead of native prompt/alert
appPrompt('input the name', 'name').then(name => {
if (name !== null) {
appAlert('Input name is: ' + name);
} else {
appAlert('Input cancelled.');
}
});
}
let button = document.getElementById('mybtn');
button.addEventListener('click', butotnClick);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Confirm Sample</title>
</head>
<body>
<p>サンプルページです।</p>
<button type="button" value="button" id="mybtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">Button</button>
<script>
function butotnClick(){
// Use appConfirm/appAlert instead of native confirm/alert
appConfirm('move the other side. ok?').then(check => {
if (check) {
appAlert('Confirmation Result: OK');
} else {
appAlert('Confirmation Result: Cancelled');
}
});
}
let button = document.getElementById('mybtn');
button.addEventListener('click', butotnClick);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>getElementById</title>
</head>
<body>
<p>my office</p>
<p id="place">minatoku roppongi</p>
<p id="shopname">office roppongi</p>
<p>beautiful</p>
<button onClick="getElement();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">get the elements</button>
<script>
function getElement() {
let element = document.getElementById('place');
appAlert('স্থান: ' + element.textContent);
element = document.getElementById('shopname');
appAlert('দোকানের নাম: ' + element.textContent);
}
</script>
</body>
<html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>getElementsByClassName</title>
<style type="text/css">
div, p{
padding:20px;
margin:10px;
width:30%;
}
.box {
border:1px solid #ff0000;
}
</style>
</head>
<body>
<p>record of out</p>
<div class="box">
<p>lunch of today in other store</p>
<p class="box">place minamiaoyama</p>
<p class="box">store: restranteminamiaoyama</p>
</div>
<button onClick="getElements();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">get the element</button>
<script>
function getElements() {
let elements = document.getElementsByClassName('box');
let len = elements.length;
for (let i=0; i < len; i++) {
// Change border color for all elements with class 'box'
elements.item(i).style.border="2px solid #0000ff";
}
}
</script>
</body>
<html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>getElementsByName</title>
</head>
<body>
<p>select the hobby</p>
<label><input type="radio"
name="hobby" value="Sports">Sports</label>
<label><input type="radio"
name="hobby" value="Music" checked>Music</label>
<label><input type="radio" name="hobby" value="Travel">Travel</label>
<button onClick="getElements();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">get the elements</button>
<script>
function getElements() {
let elements = document.getElementsByName('hobby');
let len = elements.length;
for (let i=0; i < len; i++) {
if (elements.item(i).checked) {
appAlert(elements.item(i).value+' is checked');
} else {
appAlert(elements.item(i).value + ' is not checked');
}
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>querySelector</title>
</head>
<body>
<p>go to eat lunch</p>
<div class="shop">
<p id="place">chuoku chuou</p>
<p id="shopname">restrante chuo</p>
</div>
<p>good</p>
<button onClick="getElement();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">get the elements</button>
<script>
function getElement() {
let element = document.querySelector('#shopname');
appAlert('Text: ' + element.textContent);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>querySelectorAll のサンプル</title>
</head>
<body>
<p>go to shopping</p>
<div class="shop">
<p>shinjyuku ochiai</p>
<p>legend ochiai</p>
</div>
<p>beauty</p>
<button onClick="getElement();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">get the elements</button>
<script>
function getElement() {
let elements = document.querySelectorAll('.shop p');
let len = elements.length;
for (let i=0; i < len; i++) {
appAlert('Text:' + elements.item(i).textContent);
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>innerHTML</title>
</head>
<body>
<p>book store</p>
<div id="shopinfo">
Book store shinagawa
</div>
<p>wonderful store</p>
<button onClick="setTextToElement();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">new text</button>
<script>
function setTextToElement(){
let element = document.getElementById('shopinfo');
// Set content including HTML tags
element.innerHTML = 'minamiaoyama<b>book oosaki</b>store';
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Get Property</title>
</head>
<body>
<p>today have the lunch outside</p>
<div id="shopinfo">
<a href="http://www.example.com/">restrante aoyama</a>
<div class="shopaddress">Tokyo minatoku </div>
</div>
<p>so good</p>
<button onClick="getElement();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">属性を取得</button>
<script>
function getElement() {
let element = document.getElementById('shopinfo');
// Access property using dot notation
appAlert('href:' + element.children[0].href);
appAlert('class:' + element.children[1].className);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Set Property</title>
</head>
<body>
<p>Shibuya 109</p>
<div id="shopinfo">
<a href="http://www.example.com/">Shibuya 109 </a>
<div class="shopaddress">tokyoto shibuyaku</div>
</div>
<p>see you</p>
<button onClick="setElement(); " class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">attribute</button>
<script>
function setElement() {
let element = document.getElementById('shopinfo');
// Set property using dot notation
element.children[0].href = 'http://www.example.jp/';
element.children[0].target = '_blank';
appAlert('href:' + element.children[0].href);
appAlert('target:' + element.children[0].target);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Get Attribute</title>
</head>
<body>
<p>go to have a dinner</p>
<div id="shopinfo">
<a href="http://www.example.com/">bistro yokohama</a>
<div class="shopaddress">kanagawaken yokohamashi</div>
</div>
<p>so good</p>
<button onClick="getElement();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">get the attr</button>
<script>
function getElement() {
let element = document.getElementById('shopinfo');
// Get attribute using .getAttribute()
appAlert('href' + element.children[0].getAttribute('href'));
appAlert('class' + element.children[1].getAttribute('class'));
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性値の設定</title>
</head>
<body>
<p>today we go to the shopping</p>
<div id="shopinfo">
<a href="http://www.example.com/">shopa</a>
<div class="shopaddress">tokyoto-ootaku</div>
</div>
<p>good place</p>
<button onClick="setElement();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">setting the attr</button>
<script>
function setElement(){
let element = document.getElementById('shopinfo');
// Set attribute using .setAttribute()
element.children[0].setAttribute('target', '_blank');
element.children[1].setAttribute('class', 'address');
appAlert('target:' + element.children[0].getAttribute('target'));
appAlert('class: ' + element.children[1].getAttribute('class'));
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Remove Attribute</title>
</head>
<body>
<p>go to the playland</p>
<div id="shopinfo">
<a href="http://www.example.com/" target="_black" class="address">playland</a>
<div>Tokyo minatoku</div>
</div>
<button onClick="getElement();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">remove the value</button>
<script>
function getElement() {
let element = document.getElementById('shopinfo').children[0];
// Remove attributes
element.removeAttribute('target');
element.removeAttribute('class');
let attrs = element.attributes;
for(let i=0; i < attrs.length; i++) {
appAlert('name:' + attrs.item(i).name);
appAlert('value:' + attrs.item(i).value);
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Set Style Property</title>
<style type="text/css">
p{
color:#0000ff;
}
</style>
</head>
<body>
<p id="address" style="font-weight:bold;">東京都港区南青山</p>
<button onClick="setElement();" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">set the style</button>
<script>
function setElement() {
let element = document.getElementById('address');
// Set style property using dot notation (camelCase)
element.style.width = '200px';
element.style.border = '1px solid #ff0000';
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Get Computed Style</title>
<style type="text/css">
p{
color:#0000ff;
}
</style>
</head>
<body>
<p id="address" style="font-weight:bold;">東京都港区南青山</p>
<button onClick="setElement(); " class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">get the style</button>
<script>
function setElement() {
let element = document.getElementById('address');
let style = window.getComputedStyle(element);
// Get computed style value
appAlert('color:' + style.getPropertyValue('color'));
appAlert('font-weight:' + style.getPropertyValue('font-weight'));
}
</script>
</body>
</html>PDF থেকে বিভিন্ন ইভেন্ট হ্যান্ডলিং সম্পর্কিত ১৬ থেকে ৩৭ পর্যন্ত কোডগুলো এখানে কার্ড আকারে দেওয়া হলো।
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Inline Event</title>
</head>
<body>
<p>push the button</p>
<!-- Inline event handler -->
<input type="button" value="button" onclick="appAlert('Hello')" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Function Event</title>
</head>
<body>
<p>push the button</p>
<script>
function buttonClick(){
let d = new Date();
appAlert(d.toString());
}
</script>
<input type="button" value="button" onclick="buttonClick()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Onclick Property</title>
</head>
<body>
<p>push the button</p>
<input type="button" value="button" id="mybutton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
function butotnClick(){
let d = new Date();
appAlert(d.toString());
}
let button = document.getElementById('mybutton');
// Assign function to property
button.onclick = butotnClick;
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Anonymous Function Event</title>
</head>
<body>
<p>push the button</p>
<input type="button" value="button" id="mybutton1" class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<input type="button" value="button2" id="mybutton2" class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
let button1 = document.getElementById('mybutton1');
button1.onclick = function(){
let num = Math.floor(Math.random() * 6) + 1;
appAlert('sikoro num is' + num);
};
let button2 = document.getElementById('mybutton2');
button2.onclick = () => {
let num = Math.floor(Math.random() *6) + 1;
appAlert('sikoro num' + num);
};
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Add Event Listener</title>
</head>
<body>
<p>push the button</p>
<input type="button" value="button" id="mybutton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
function butotnClick(){
let d = new Date();
appAlert(d.toString());
}
let button = document.getElementById('mybutton');
// Modern event handling
button.addEventListener('click', butotnClick);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Multiple Listeners</title>
</head>
<body>
<p>push the button</p>
<input type="button" value="button" id="mybutton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
function dispHello() {
appAlert('Hello');
}
function dispThankyou() {
appAlert('Thank you');
}
function dispBye() {
appAlert('Bye');
}
let button = document.getElementById('mybutton');
// All functions execute on click
button.addEventListener('click', dispHello);
button.addEventListener('click', dispThankyou);
button.addEventListener('click', dispBye);
button.addEventListener('click', dispHello);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Event Info</title>
</head>
<body>
<p>push the button</p>
<input type="button" value="button" id="xxx" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
let button = document.getElementById('xxx');
button.addEventListener('click', function(event) {
appAlert('bubbles:' + event.bubbles);
appAlert('cancelable:' + event.cancelable);
appAlert('currentTarget:' + event.currentTarget);
appAlert('eventPhase:' + event.eventPhase);
appAlert('target:' + event.target);
appAlert('timeStamp:' + event.timeStamp);
appAlert('type:' + event.type);
appAlert(' is Trusted :' + event.isTrusted);
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Prevent Default</title>
</head>
<body>
<p>not change</p>
<div class="border p-4 rounded-lg bg-gray-100">
<input type="checkbox" id="checkA">
<label for="checkA">Java</label>
<input type="checkbox" id="checkB">
<label for="checkB">PHP</label>
</div>
<script>
let checkb = document.getElementById('checkB');
checkb.addEventListener('click', function(event) {
appAlert('not change');
// Prevents the default action (checking the box)
event.preventDefault();
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Event Dispatch</title>
</head>
<body>
<p>push the button</p>
<div>
<input type="button"
id="btnA" value="buttonA" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<input type="button" id="btnB" value="buttonB" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
</div>
<script>
let btnA = document.getElementById('btnA');
let btnB = document.getElementById('btnB');
btnA.addEventListener('click', function(event) {
appAlert('buttonA (real click):' + event.isTrusted);
});
// Create and dispatch synthetic event
let newevent = new Event('click');
btnB.addEventListener('click', function (event) {
appAlert('buttonB (dispatched):' + event.isTrusted); // isTrusted should be false
});
btnB.dispatchEvent(newevent);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Stop Propagation</title>
<style>
div {
background-color:#E5E5E5;
border:5px solid #8f8f8f;
padding:20px;
}
#outer{
width:300px;
}
#inner{
margin:20px;
text-align:center;
background-color: #ffffff;
}
</style>
</head>
<body>
<p>push the button</p>
<div id="outer">
Outer Div
<div id="inner">
Inner Div
<input type="button" value="buttonA" id="btnA" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<input type="button" value="buttonB" id="btnB" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
</div>
</div>
<script>
let outer = document.getElementById('outer');
let inner = document.getElementById('inner');
let btna = document.getElementById('btnA');
let btnb = document.getElementById('btnB');
outer.addEventListener('click', function() {
appAlert('outer clicked');
});
inner.addEventListener('click', function(event) {
appAlert('inner clicked (prevents propagation)');
event.stopPropagation();
});
btna.addEventListener('click', function(){
appAlert('buttonA clicked (propagates to inner)');
});
btnb.addEventListener('click', function (event) {
appAlert('buttonB clicked (stops propagation)');
event.stopPropagation();
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Click Event</title>
</head>
<body>
<p>push the button</p>
<input type="button" value="button" id="btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
function butotnClick(){
appAlert('Click');
}
let button = document.getElementById('btn');
button.addEventListener('click', butotnClick);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Double Click Event</title>
</head>
<body>
<p>push the button</p>
<input type="button" value="button" id="xxx" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
function butotnDoubleclick() {
appAlert('Double Click');
}
let button = document.getElementById('xxx');
button.addEventListener('dblclick', butotnDoubleclick);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Click/DblClick</title>
</head>
<body>
<p>push the button</p>
<input type="button" value="button" id="btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
let button = document.getElementById('btn');
// Note: When using both, a dblclick will trigger the click handler twice
button.addEventListener('click', function(){
appAlert('Click (Single)');
});
button.addEventListener('dblclick', function(){
appAlert('Double Click (Double)');
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mouse Down/Up</title>
</head>
<body>
<input type="button" value="button" onmousedown="mouseDown()" onmouseup="mouseUp ()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
function mouseDown () {
appAlert('MouseDown');
}
function mouseUp() {
appAlert('MouseUp');
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mouse Enter/Leave</title>
<style type="text/css">
#mybox{
width:600px;
height:200px;
border:1px solid #000000;
transition: background-color 0.3s;
}
</style>
</head>
<body>
<p class="textcolor">マウスに合わせて背景色を変えます</p>
<div id="mybox"></div>
<script>
let mybox = document.getElementById('mybox');
function mouseEnter() {
mybox.style.backgroundColor = '#8f8f8f';
}
function mouseLeave () {
mybox.style.backgroundColor = '#ffffff';
}
mybox.addEventListener('mouseenter', mouseEnter);
mybox.addEventListener('mouseleave', mouseLeave);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mouse Coords</title>
<style type="text/css">
#mybox{
width:600px;
height:200px;
border:1px solid #000000;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<p class="textcolor">get the possition</p>
<div id="mybox"></div>
<script>
function mouseClick(event) {
appAlert('offsetX:' + event.offsetX);
appAlert('offsetY: ' + event.offsetY);
appAlert('clientX: ' + event.clientX);
appAlert('clientY:' + event.clientY);
appAlert('pageX: ' + event.pageX);
appAlert('pageY: ' + event.pageY);
appAlert('screenX: ' + event.screenX);
appAlert('screenY: ' + event.screenY);
}
let mybox = document.getElementById('mybox');
mybox.addEventListener('click', mouseClick);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mouse Key Info</title>
<style type="text/css">
#mybox{
width:600px;
height:200px;
border:1px solid #000000;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<p class="textcolor">get the key (Click box while holding Alt/Ctrl/Shift)</p>
<div id="mybox"></div>
<script>
function mouseClick(event) {
if (event.altKey) {
appAlert('Push Alt Key');
}
if (event.ctrlKey) {
appAlert('Push Control Key');
}
if (event.shiftKey) {
appAlert('Push Shift Key');
}
if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
appAlert('No modifier key pressed.');
}
}
let mybox = document.getElementById('mybox');
mybox.addEventListener('click', mouseClick);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Key Down/Up</title>
<style type="text/css">
#memo {
width:600px;
height:200px;
border:1px solid #000000;
}
</style>
</head>
<body>
<p class="textcolor">key push</p>
<textarea id="memo"></textarea>
<script>
function keyDown(event) {
appAlert('KeyDown:' + event.key);
}
function keyUp(event) {
appAlert('KeyUp');
}
let textarea = document.getElementById('memo');
textarea.addEventListener('keydown', keyDown);
textarea.addEventListener('keyup', keyUp);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Keyboard Info</title>
<style type="text/css">
#memo {
width:600px;
height:200px;
border:1px solid #000000;
}
</style>
</head>
<body>
<p class="textcolor">push the keys</p>
<textarea id="memo" placeholder="Type here"></textarea>
<script>
function keyDown(event) {
// Displays key and code information
appAlert('code:' + event.code + ', key:' + event.key);
}
let textarea = document.getElementById('memo');
textarea.addEventListener('keydown', keyDown);
</script>
</body>
</html><!DOCTYPE behtml>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Change Event</title>
</head>
<body>
<p class="textcolor">
<label>name: <input type="text" id="nametext" class="p-1 border rounded"></label>
</p>
<p class="textcolor">
<label>place:
<select id="address" class="p-1 border rounded">
<option value="">selection</option>
<option value="tokyo">tokyo</option>
<option value="osaka">osaka</option>
<option value="kanagawa">kanagawa</option>
</select>
</label>
</p>
<p class="textcolor">
<input type="radio" id="sales" name="div" value="sales" checked>
<label for="sales">sales</label><br>
<input type="radio" id="develop" name="div" value="develop">
<label for="develop">develop</label><br>
<input type="radio" id="human" name="div" value="human">
<label for="human">human</label><br>
</p>
<script>
function inputChange (event) {
appAlert('Change Event Value: ' + event.currentTarget.value);
}
let text = document.getElementById('nametext');
text.addEventListener('change', inputChange);
let address = document.getElementById('address');
address.addEventListener('change', inputChange);
let radiosales = document.getElementById('sales');
radiosales.addEventListener('change', inputChange);
let radiodevelop = document.getElementById('develop');
radiodevelop.addEventListener('change', inputChange);
let radiohuman = document.getElementById('human');
radiohuman.addEventListener('change', inputChange);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Input Event</title>
</head>
<body>
<p class="textcolor">
<label>নাম:<input type="text" id="nametext" class="p-1 border rounded"></label>
</p>
<p class="textcolor">
<label>from:
<select id="address" class="p-1 border rounded">
<option value="">selected</option>
<option value="niigata">nigata</option>
<option value="iwate">iwate</option>
<option value="aomori">aomori</option>
</select>
</label>
</p>
<p class="textcolor">
<input type="radio" id="sales" name="div" value="economics" checked>
<label for="economics">economic</label><br>
<input type="radio" id="develop" name="div" value="education">
<label for="education">education</label><br>
<input type="radio" id="human" name="div" value="engineering ">
<label for="engineering ">engineering</label><br>
</p>
<script>
function inputChange (event) {
// input event fires immediately on value change
appAlert('Input Event Value: ' + event.currentTarget.value);
}
let text = document.getElementById('nametext');
text.addEventListener('input', inputChange);
let address = document.getElementById('address');
address.addEventListener('input', inputChange);
let radiosales = document.getElementById('sales');
radiosales.addEventListener('input', inputChange);
let radiodevelop = document.getElementById('develop');
radiodevelop.addEventListener('input', inputChange);
let radiohuman = document.getElementById('human');
radiohuman.addEventListener('input', inputChange);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Prevent Copy/Paste</title>
<style type="text/css">
textarea{
width:500px;
height:100px;
border:1px solid #000000;
}
</style>
</head>
<body>
<p class="textcolor">Try to copy or paste in the box.</p>
<textarea id="memo"></textarea>
<script>
function copy (event) {
appAlert('not Copy');
event.preventDefault();
}
function cut(event) {
appAlert('not Cut');
event.preventDefault();
}
function paste (event) {
appAlert('not Paste');
event.preventDefault();
}
let memoarea = document.getElementById('memo');
memoarea.addEventListener('copy', copy);
memoarea.addEventListener('cut', cut);
memoarea.addEventListener('paste', paste);
</script>
</body>
</html>PDF থেকে উইন্ডো পদ্ধতি এবং ফর্ম উপাদান সম্পর্কিত ৩৮ থেকে ৪৯ পর্যন্ত কোডগুলো এখানে কার্ড আকারে দেওয়া হলো।
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Load Event</title>
</head>
<body>
<!-- Note: zoo.jpg is assumed to be missing, but it tests the load event -->
<img src="https://placehold.co/100x100/374151/FFFFFF?text=Image" id="zoo">
<p id="status" class="textcolor">Image loading status...</p>
<script>
function loadFinished() {
let zooImg = document.getElementById('zoo');
document.getElementById('status').textContent = 'Image loaded! Width: ' + zooImg.naturalWidth + ', Height: ' + zooImg.naturalHeight;
}
window.addEventListener('load', loadFinished);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Window Open</title>
</head>
<body>
<input type="button" value="Google" id="mybtn1" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md mr-2">
<input type="button" value="New Window (Blank)" id="mybtn3" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
let button1 = document.getElementById('mybtn1');
button1.addEventListener('click', () => {
// Opens Google in a new tab/window
window.open('https://www.google.co.jp/');
});
let button3 = document.getElementById('mybtn3');
button3.addEventListener('click', () => {
// Opens a blank window/tab
window.open('');
});
// btn2 (test.html) is omitted as it requires a multi-file setup
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>setTimeout</title>
</head>
<body>
<input type="button" value="click" id="btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
// Wait 3 seconds, then show message
window.setTimeout(function(){
appAlert('time out (3 seconds)');
}, 3000);
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>setInterval</title>
</head>
<body>
<input type="button" value="Start Interval" id="btnStart" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md mr-2">
<input type="button" value="Stop Interval" id="btnStop" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
let count = 5;
let timerId;
let btnStart = document.getElementById('btnStart');
let btnStop = document.getElementById('btnStop');
btnStart.addEventListener('click', function(){
if (timerId) {
appAlert('Interval already running!');
return;
}
appAlert('Starting interval...');
timerId = window.setInterval(function() {
appAlert(count + 'sec passed');
count += 3;
}, 3000);
});
btnStop.addEventListener('click', function(){
if (timerId) {
window.clearInterval(timerId);
timerId = null;
appAlert('Interval stopped.');
} else {
appAlert('Interval is not running.');
}
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Window Size 1</title>
</head>
<body>
<input type="button" value="সাইজ পান" id="btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<ul class="textcolor">
<li>window.outerWidth </li>
<li>window.outerHeight </li>
<li>window.innerWidth </li>
<li>window.innerHeight </li>
</ul>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
appAlert('outerWitch: ' + window.outerWidth);
appAlert('outerHeight:' + window.outerHeight);
appAlert('innerWidth: ' + window.innerWidth);
appAlert('innerHeight:' + window.innerHeight);
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Window Size 2</title>
</head>
<body>
<h1 class="textcolor">widow height width </h1>
<input type="button" value="get the size" id="btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<ul class="textcolor">
<li>window.innerWidth </li>
<li>window.innerHeight </li>
<li>document.documentElement.clientWidth </li>
<li>document.documentElement.clientHeight </li>
</ul>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
appAlert('innerWidth: ' + window.innerWidth);
appAlert('innerHeight:' + window.innerHeight);
const htmlelement = document.documentElement
appAlert('clientWidth: ' + htmlelement.clientWidth);
appAlert('clientHeight:' + htmlelement.clientHeight);
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Window Resize</title>
</head>
<body>
<h1 class="textcolor">windows height width </h1>
<p class="textcolor">change the height and width</p>
<input type="button" value="open new window" id="btnOpen" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md mr-2">
<input type="button" value="resize window" id="btnChange" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
<script>
let newwindow;
let btnOpen = document.getElementById('btnOpen');
let btnChange = document.getElementById('btnChange');
btnOpen.addEventListener('click', function(){
// This will open a new, blank window for demonstration
newwindow = window.open('', 'mywindow', 'width=600, height=400');
if(newwindow) {
newwindow.document.write('Test Page
This is a test page that will be resized.
');
} else {
appAlert("Popup blocked! Please allow popups for this page.");
}
});
btnChange.addEventListener('click', function(){
if (newwindow && !newwindow.closed) {
// Resize the newly opened window
newwindow.resizeTo(300, 300);
newwindow.focus();
} else {
appAlert("New window is not open. Click 'open new window' first.");
}
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Textbox Value</title>
</head>
<body>
<p class="textcolor">
<label>name<input type="text" id="nameText" class="p-1 border rounded"></label>
<input type="button" value="Check" id="checkButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded-lg shadow-md ml-2">
</p>
<p id="msg" class="textcolor"></p>
<script>
function butotnClick() {
let nameText = document.getElementById('nameText');
let msg = document.getElementById('msg');
msg.innerText = 'your name is ' + nameText.value;
}
let nameText = document.getElementById('nameText');
nameText.value = 'name'; // Default value
let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Textarea Value</title>
</head>
<body>
<div>
<label class="textcolor">sentence<br>
<textarea cols="40" rows="5" id="reviewTextarea" class="p-1 border rounded"></textarea>
</label>
</div>
<div>
<input type="button" value="Check" id="checkButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded-lg shadow-md mt-2">
</div>
<p id="msg" class="textcolor"></p>
<script>
function butotnClick(){
let reviewTextarea = document.getElementById('reviewTextarea');
let msg = document.getElementById('msg');
msg.innerText = reviewTextarea.value;
}
let reviewTextarea = document.getElementById('reviewTextarea');
reviewTextarea.value = 'please write the sentence'; // Default value
let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Checkbox</title>
</head>
<body>
<div class="textcolor">
<label><input type="checkbox" id="check1">dinner</label>
<label><input type="checkbox" id="check2">breakfast</label>
</div>
<div>
<input type="button" value="Check" id="checkButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded-lg shadow-md mt-2">
</div>
<script>
function butotnClick(){
let checkbox1 = document.getElementById('check1');
let checkbox2 = document.getElementById('check2');
if (checkbox1.checked) {
appAlert('with dinner');
} else {
appAlert('not dinner');
}
if (checkbox2.checked) {
appAlert('with breakfast');
} else {
appAlert('not breakfast');
}
}
let checkbox2 = document.getElementById('check2');
checkbox2.checked = true;
let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Radio Button (Name)</title>
</head>
<body>
<div class="textcolor">
<label><input type="radio"
name="fruit" value="orange">orange</label>
<label><input type="radio"
name="fruit" value="lemon">lemon</label>
<label><input type="radio" name="fruit" value="strawberry">strawbery</label>
</div>
<div>
<input type="button" value="Check" id="checkButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded-lg shadow-md mt-2">
</div>
<script>
function butotnClick(){
let checkValue = '';
let fruitRadio = document.getElementsByName('fruit');
let len = fruitRadio.length;
for (let i=0; i < len; i++) {
if (fruitRadio.item(i).checked) {
checkValue = fruitRadio.item(i).value;
break;
}
}
appAlert('selected is ' + checkValue);
}
let fruitRadio = document.getElementsByName('fruit');
fruitRadio[0].checked = true;
let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Radio Button (Form Elements)</title>
</head>
<body>
<div class="textcolor">
<form id="travelbox">
<label><input type="radio" name="travel" value="okinawa">okinawa</label>
<label><input type="radio" name="travel" value="hokkaidou">hokkaido</label>
<label><input type="radio" name="travel" value="kyoto">kyoto</label>
</form>
</div>
<div>
<input type="button" value="Check" id="checkButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded-lg shadow-md mt-2">
</div>
<script>
function butotnClick(){
let travelbox = document.getElementById('travelbox');
// Access selected radio value via form.elements[name].value
let checkValue = travelbox.elements['travel'].value;
appAlert('selected is ' + checkValue);
}
let travelbox = document.getElementById('travelbox');
travelbox.elements[1].checked = true; // Set hokkaidou as checked by default
let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>
</body>
</html>