JavaScript
Title
Question
<span style="color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;">Why JavaScript?</span>
JavaScript Overview-of-JavaScript 00-01 min 10-20 sec
Answers:
<span <span style="background-color: rgb(250, 250, 250);">style="color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"</span>>
JavaScript is widely used in web and application development. It is event-based, interpreted, object-oriented, client-side scripting language used to develop dynamic web pages.
</span>
<span style="background-color: rgb(250, 250, 250);">JavaScript is widely used in web and application development. It is event-based, interpreted, object-oriented, client-side scripting language used to develop dynamic web pages.</span>
<span style="background-color: rgb(250, 250, 250);">
</span>
</span>
Correct! JavaScript makes web pages dynamic and interactive using events and objects.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Add Comment — JavaScript Example</title>
<style>
:root {
--bg: #fafafa;
--card: #ffffff;
--muted: #6b7280;
--accent: #2563eb;
--border: #e6e9ef;
--shadow: 0 6px 20px rgba(32,33,36,0.06);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
body {
background: linear-gradient(180deg, var(--bg), #fff);
margin: 24px;
color: #111827;
-webkit-font-smoothing:antialiased;
}
.container {
max-width: 820px;
margin: 0 auto;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px;
box-shadow: var(--shadow);
}
.original {
background: #fff;
border-radius: 8px;
padding: 12px;
border: 1px dashed #e0e6f0;
margin-bottom: 12px;
white-space: pre-wrap;
}
.meta {
font-size: 13px;
color: var(--muted);
margin-bottom: 8px;
}
.controls {
display:flex;
gap:8px;
align-items:center;
margin-bottom:14px;
flex-wrap:wrap;
}
select, button, input[type="checkbox"] + label {
font-size:14px;
}
select, .btn {
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: white;
}
.btn {
cursor:pointer;
background: linear-gradient(180deg, #fff, #f8fbff);
box-shadow: 0 2px 6px rgba(16,24,40,0.04);
border-color: rgba(37,99,235,0.12);
color: var(--accent);
}
.comment-list {
margin-top: 12px;
display:flex;
flex-direction:column;
gap:10px;
}
.comment {
border-left: 3px solid #cfe0ff;
padding: 10px 12px;
background: linear-gradient(180deg,#ffffff,#fbfdff);
border-radius:8px;
}
.comment .by {
font-weight:600;
font-size:13px;
}
.comment .time {
font-size:12px;
color:var(--muted);
margin-left:8px;
font-weight:400;
}
.comment .text {
margin-top:6px;
font-size:15px;
}
.small {
font-size:13px;
color:var(--muted);
}
footer.note {
margin-top:14px;
font-size:13px;
color:var(--muted);
text-align:center;
}
@media (max-width:520px){
.controls { flex-direction:column; align-items:stretch; }
.controls > * { width:100%; }
}
</style>
</head>
<body>
<main class="container">
<h1 style="font-size:20px;margin-bottom:12px">Add a comment — example</h1>
<section class="card" aria-labelledby="origTitle">
<h2 id="origTitle" class="small" style="margin:0 0 8px 0">Original text (selected):</h2>
<div class="original" id="originalText" role="article" aria-label="Original text">
<span style="background-color: rgb(250, 250, 250);">JavaScript is widely used in web and application development. It is event-based, interpreted, object-oriented, client-side scripting language used to develop dynamic web pages.</span>
<span style="background-color: rgb(250, 250, 250);">
</span>
26-07-25, 11:50 a.m. siya12032008
</div>
<div class="meta">Choose comment style and click <strong>Add comment</strong>.</div>
<div class="controls" role="region" aria-label="Comment controls">
<label for="style" class="small">Comment style:</label>
<select id="style" aria-label="Choose comment style">
<option value="short">Short — one line</option>
<option value="detailed">Detailed — paragraph</option>
</select>
<label style="display:flex;align-items:center
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Add Comment — JavaScript Example</title>
<style>
:root {
--bg: #fafafa;
--card: #ffffff;
--muted: #6b7280;
--accent: #2563eb;
--border: #e6e9ef;
--shadow: 0 6px 20px rgba(32,33,36,0.06);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
body {
background: linear-gradient(180deg, var(--bg), #fff);
margin: 24px;
color: #111827;
-webkit-font-smoothing:antialiased;
}
.container {
max-width: 820px;
margin: 0 auto;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px;
box-shadow: var(--shadow);
}
.original {
background: #fff;
border-radius: 8px;
padding: 12px;
border: 1px dashed #e0e6f0;
margin-bottom: 12px;
white-space: pre-wrap;
}
.meta {
font-size: 13px;
color: var(--muted);
margin-bottom: 8px;
}
.controls {
display:flex;
gap:8px;
align-items:center;
margin-bottom:14px;
flex-wrap:wrap;
}
select, button, input[type="checkbox"] + label {
font-size:14px;
}
select, .btn {
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: white;
}
.btn {
cursor:pointer;
background: linear-gradient(180deg, #fff, #f8fbff);
box-shadow: 0 2px 6px rgba(16,24,40,0.04);
border-color: rgba(37,99,235,0.12);
color: var(--accent);
}
.comment-list {
margin-top: 12px;
display:flex;
flex-direction:column;
gap:10px;
}
.comment {
border-left: 3px solid #cfe0ff;
padding: 10px 12px;
background: linear-gradient(180deg,#ffffff,#fbfdff);
border-radius:8px;
}
.comment .by {
font-weight:600;
font-size:13px;
}
.comment .time {
font-size:12px;
color:var(--muted);
margin-left:8px;
font-weight:400;
}
.comment .text {
margin-top:6px;
font-size:15px;
}
.small {
font-size:13px;
color:var(--muted);
}
footer.note {
margin-top:14px;
font-size:13px;
color:var(--muted);
text-align:center;
}
@media (max-width:520px){
.controls { flex-direction:column; align-items:stretch; }
.controls > * { width:100%; }
}
</style>
</head>
<body>
<main class="container">
<h1 style="font-size:20px;margin-bottom:12px">Add a comment — example</h1>
<section class="card" aria-labelledby="origTitle">
<h2 id="origTitle" class="small" style="margin:0 0 8px 0">Original text (selected):</h2>
<div class="original" id="originalText" role="article" aria-label="Original text">
<span style="background-color: rgb(250, 250, 250);">JavaScript is widely used in web and application development. It is event-based, interpreted, object-oriented, client-side scripting language used to develop dynamic web pages.</span>
<span style="background-color: rgb(250, 250, 250);">
</span>
26-07-25, 11:50 a.m. siya12032008
</div>
<div class="meta">Choose comment style and click <strong>Add comment</strong>.</div>
<div class="controls" role="region" aria-label="Comment controls">
<label for="style" class="small">Comment style:</label>
<select id="style" aria-label="Choose comment style">
<option value="short">Short — one line</option>
<option value="detailed">Detailed — paragraph</option>
</select>
<label style="display:flex;align-items:center
JavaScript is widely used in web and application development. It is an event-based, interpreted, object-oriented, client-side scripting language used to develop dynamic and interactive web pages.
JavaScript is the only language that runs in all web browsers and makes websites interactive and dynamic.t. It is an event-based, interpreted, object-oriented, client-side scripting language used to create dynamic and interactive web pages. It is widely used in web and application development.
Login to add comment