Saya Membina Laman Web Pendidikan ULTIMATE dari Gores — Hari 3
Ramai orang bertanya kepada saya, berapa banyak masa yang akan diluangkan untuk perkara ini. Saya seperti mungkin 2 atau 3 minggu. Tetapi, soalan itu, membawa saya untuk memikirkan semula berapa banyak masa yang saya habiskan di tapak web. Saya menghabiskan 8 jam di laman utama sahaja. Jadi, saya telah memutuskan untuk mencipta kandungan dengan cepat, dan tidak menumpukan pada butiran minit, yang saya lakukan pada hari-hari sebelumnya. Saya telah mensia-siakan banyak perhatian anda, sekarang mari kita terus ke prosesnya.
Jam 19: Mencipta Halaman Kandungan Kimia
Saya akan mulakan dengan mencipta fail periodicity-of-elements-qa.html di dalam direktori Chemistry/3/. Halaman ini akan menyertakan soalan dan jawapan tentang topik keberkalaan unsur.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodicity of Elements - Questions and Answers</title>
<!-- styles and scripts -->
</head>
<body>
<header>
<nav>
<div>
<p>As usual, I included a basic HTML boilerplate with links to necessary scripts and styles, along with navigation to main pages. I am using a container div, aside element with the id table-of-contents, which will be populated using javascript, and finally the main tag.</p>
<p>Next, I added the content, formatted with heading tags and some paragraph tags for the main body. For formulas and symbols I used the LaTeX syntax, LaTeX is used because it is the go-to standard:<br>
</p>
<pre class="brush:php;toolbar:false"> <h2>
<p>This contains a lot of content, which is formatted using headings and sub-headings, some lists and tables. I also added an "About the Author" tag for authenticity.</p>
<p>I needed to style this page so that the text can be readable, and it doesn't look too bad. I will add an additional css file into this page, keeping style.css and style-main.css for common elements.</p>
<h2>
Hour 20: Styling the content page and adding JS for dynamic Table of Contents
</h2>
<p>I created an style tag inside the head element, and added basic style to it:<br>
</p>
<pre class="brush:php;toolbar:false"> <style>
header {
background: linear-gradient(135deg, #252525 0%, #303030 100%); /* Subtle gradient for depth */
padding: 1.2rem 0; /* Slightly increased padding */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More pronounced, darker shadow */
position: sticky;
top: 0;
z-index: 1000; /* Increased z-index for better layering */
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for sticky effect */
transform: translateY(0); /* Initial state for smooth sticky animation */
}
header.sticky-active {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Different shadow when sticky */
transform: translateY(-5px); /* Slight lift when sticky */
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px; /* Slightly increased side padding */
}
.logo {
font-size: 2rem; /* Slightly larger logo */
font-weight: 700; /* Bolder logo */
color: #7db4ff; /* Updated logo color, slightly lighter */
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Subtle text shadow for depth */
transition: transform 0.3s ease-in-out;
}
.logo:hover {
transform: scale(1.05); /* Gentle scale on hover */
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 30px; /* Use gap for spacing between list items */
}
nav ul li a {
text-decoration: none;
color: #f0f0f0; /* Slightly brighter text color */
position: relative; /* For the underline effect */
padding-bottom: 4px; /* Space for the underline */
transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
overflow: hidden; /* Clip the pseudo-element */
}
nav ul li a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #7db4ff; /* Same as logo color for consistency */
transform: scaleX(0); /* Initially hidden */
transform-origin: bottom right;
transition: transform 0.4s ease-out;
}
nav ul li a:hover {
color: #90caf9; /* Lighter hover color */
transform: translateY(-2px); /* Slight lift on hover */
}
nav ul li a:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
/* Optional: Add an active state highlight */
nav ul li a.active {
color: #90caf9;
font-weight: 600;
}
nav ul li a.active::before {
transform: scaleX(1);
}
/* Enhancements for Mobile (consider using JavaScript for more advanced mobile menus) */
@media (max-width: 1024px) {
header {
display: hidden;
}
}
:root {
--primary-bg: #f9f9f9; /* Very light grey for a softer white */
--secondary-bg: #ffffff; /* Pure white for content areas */
--text-primary: #212121; /* Dark grey for primary text */
--text-secondary: #757575; /* Medium grey for secondary text */
--accent-color: #2962ff; /* A vibrant blue */
--hover-color: #5393ff; /* Lighter blue for hover states */
--border-color: #e0e0e0; /* Light grey for borders */
--code-bg: #f0f0f0; /* Very light grey for code backgrounds */
--code-text: #333333; /* Dark grey for code text */
--toc-active: #2962ff;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
--transition-fast: 0.15s ease-in-out;
--transition-normal: 0.3s ease-in-out;
}
body {
font-family: 'Roboto', sans-serif; /* A clean and modern sans-serif font */
line-height: 1.6;
margin: 0;
background-color: var(--primary-bg);
color: var(--text-primary);
padding-bottom: 40px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
overflow-x: hidden;
}
/* Custom Scrollbar - Light theme version */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #bdbdbd;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #9e9e9e;
}
.container {
max-width: 1200px;
margin: 50px auto;
padding: 60px;
background-color: var(--secondary-bg);
box-shadow: var(--shadow-md);
border-radius: 8px;
display: grid;
grid-template-columns: minmax(250px, 300px) 1fr;
gap: 40px;
}
#table-of-contents {
padding: 30px;
background-color: var(--secondary-bg);
border-radius: 6px;
position: sticky;
top: 30px;
height: fit-content;
border: 1px solid var(--border-color);
}
/* Custom Scrollbar for Table of Contents */
#table-of-contents::-webkit-scrollbar {
width: 6px; /* Thinner scrollbar */
}
#table-of-contents::-webkit-scrollbar-track {
background: #f1f1f1; /* Light background for the track */
border-radius: 3px; /* Slightly rounded track */
}
#table-of-contents::-webkit-scrollbar-thumb {
background-color: #bdbdbd; /* Medium grey for the thumb */
border-radius: 3px; /* Slightly rounded thumb */
}
#table-of-contents::-webkit-scrollbar-thumb:hover {
background-color: #9e9e9e; /* Darker grey on hover */
}
#table-of-contents > h2 {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 15px;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
text-align: left;
}
#table-of-contents ul {
list-style: none;
padding: 0;
margin: 0;
}
#table-of-contents li {
margin-bottom: 10px;
padding-left: 0;
border-left: 3px solid transparent;
transition: border-left-color var(--transition-fast), color var(--transition-fast);
}
#table-of-contents li:hover,
#table-of-contents li.active {
border-left-color: var(--toc-active);
}
#table-of-contents li.active > a {
color: var(--toc-active);
font-weight: 500;
}
#table-of-contents a {
text-decoration: none;
color: var(--text-secondary);
display: block;
padding: 6px 0;
transition: color var(--transition-fast);
}
#table-of-contents a:hover {
color: var(--hover-color);
}
#table-of-contents ul ul {
margin-left: 15px;
margin-top: 6px;
}
/* Main content styles - Focus on readability */
main {
padding: 40px;
border-radius: 6px;
overflow: hidden;
background-color: var(--secondary-bg);
box-shadow: var(--shadow-sm);
}
main > *:not(:last-child) {
margin-bottom: 2em;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
h1 {
font-size: 2.5rem;
border-bottom: 2px solid var(--accent-color);
padding-bottom: 0.4em;
margin-bottom: 1em;
}
h2 {
font-size: 24px;
border-bottom: 1px solid var(--accent-color);
padding-bottom: 0.3em;
margin-bottom: 0.9em;
color: var(--accent-color);
}
h3 {
font-size: 1.6rem;
margin-bottom: 0.7em;
}
h4 {
font-size: 1.4rem;
margin-bottom: 0.6em;
}
p {
margin-bottom: 1.5em;
color: var(--text-secondary);
orphans: 3;
widows: 3;
word-break: break-word;
}
ul, ol {
margin-left: 25px;
margin-bottom: 1.7em;
}
li {
margin-bottom: 0.7em;
color: var(--text-secondary);
line-height: 1.5;
word-break: break-word;
}
strong {
font-weight: 600;
color: var(--text-primary);
}
em {
font-style: italic;
color: var(--accent-color);
}
a {
color: var(--accent-color);
text-decoration: none;
transition: color var(--transition-fast);
border-bottom: 1px solid transparent; /* Subtle underline on hover */
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2em;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--secondary-bg);
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
word-break: break-word;
}
th {
background-color: #f5f5f5; /* Lighter header background */
font-weight: 600;
color: var(--text-primary);
}
tbody tr:nth-child(even) {
background-color: #fafafa; /* Very light grey for even rows */
}
/* Code blocks - Light theme styling */
pre {
background-color: var(--code-bg);
color: var(--code-text);
padding: 12px 18px;
border-radius: 4px;
overflow-x: auto;
font-family: 'Menlo', monospace;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1.6em;
white-space: pre-wrap;
border: 1px solid var(--border-color);
}
code {
font-family: 'Menlo', monospace;
background-color: #e8e8e8; /* Even lighter background for inline code */
color: var(--code-text);
padding: 3px 6px;
border-radius: 3px;
word-break: break-word;
}
pre code {
background-color: transparent;
padding: 0;
}
/* Horizontal rules - Simpler style */
hr {
border: none;
height: 1px;
background-color: var(--border-color);
margin: 2em 0;
}
/* Blockquotes - Clean separation */
blockquote {
border-left: 3px solid var(--accent-color);
padding: 10px 15px;
margin: 1.5em 0;
font-style: italic;
background-color: #f5f5f5;
border-radius: 3px;
color: var(--text-secondary);
}
blockquote p {
margin-bottom: 0;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.container {
max-width: 90%;
padding: 50px;
grid-template-columns: 1fr;
gap: 30px;
}
#table-of-contents {
position: static;
margin-bottom: 30px;
}
#table-of-contents > h2 {
text-align: center;
}
}
@media (max-width: 768px) {
main {
padding: 30px;
}
h1 {
font-size: 2.2rem;
}
h2 {
font-size: 22px;
}
nav{
display:none;
}
}
@media (max-width: 480px) {
.container {
padding: 30px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 20px;
}
}
</style>
Ini hanyalah penggayaan asas, dengan beberapa perubahan pada pengepala, dan kandungan utama, untuk memastikan, elemen boleh dibaca, tidak terlalu mengganggu dan konsisten di seluruh tapak web.
Saya juga telah menambahkan CSS untuk jadual, petikan blok dan blok kod untuk meningkatkan kebolehbacaan.
Saya juga ingin menambah skrip untuk menjadikan jadual kandungan di sebelah kiri interaktif. Jadi, saya menambah skrip ini di bahagian bawah teg badan:
<script>
// script.js
document.addEventListener('DOMContentLoaded', () => {
const mainContent = document.querySelector('main');
const tableOfContents = document.getElementById('table-of-contents');
if (!mainContent || !tableOfContents) {
console.error('Main content or table of contents element not found.');
return;
}
const headings = mainContent.querySelectorAll('h2, h3, h4');
const tocList = document.createElement('ul');
let currentList = tocList;
const stack = [currentList];
headings.forEach(heading => {
const tagName = heading.tagName;
const id = heading.id;
const text = heading.textContent;
if (id) {
const listItem = document.createElement('li');
const link = document.createElement('a');
link.href = `#${id}`;
link.textContent = text;
listItem.appendChild(link);
if (tagName === 'H2') {
while (stack.length > 1) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
stack.push(document.createElement('ul'));
currentList = stack[stack.length - 1];
listItem.appendChild(currentList);
} else if (tagName === 'H3') {
while (stack.length > 2) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
stack.push(document.createElement('ul'));
currentList = stack[stack.length - 1];
listItem.appendChild(currentList);
} else if (tagName === 'H4') {
while (stack.length > 3) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
}
}
});
// Remove any empty ul elements that might have been created
function removeEmptyLists(list) {
Array.from(list.children).forEach(item => {
if (item.tagName === 'UL' && item.children.length === 0) {
item.remove();
} else if (item.tagName === 'LI') {
const childUl = item.querySelector('ul');
if (childUl) {
removeEmptyLists(childUl);
}
}
});
}
removeEmptyLists(tocList);
const tocTitle = document.createElement('h2');
tocTitle.textContent = 'Table of Contents';
tableOfContents.appendChild(tocTitle);
tableOfContents.appendChild(tocList);
});
</script>
Skrip ini secara automatik menjana jadual kandungan bersarang daripada tajuk dalam elemen utama, yang berfungsi dengan lancar. Skrip secara automatik mengisi teg jadual kandungan, yang saya buat sebelum ini.
Akhir sekali, saya menambah sokongan untuk formula dan persamaan LaTeX dengan menambahkan skrip dan teg pautan ini di dalam teg kepala.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
renderMathInElement(document.body, {
delimiters: [
{ left: "$", right: "$", display: false },
{ left: "$$", right: "$$", display: true }
]
});
});
</script>
Dan dengan itu, halaman kandungan selesai. Saya suka reka bentuknya sangat minimum, tidak mengalihkan perhatian daripada kandungan dan masih mempunyai semua ciri yang diperlukan.
Jika anda ingin melihat caranya, ia kelihatan dalam versi langsung, bukannya hanya menyalin kandungan sendiri, lihat di sini: Periodicity Of Elements - Soal Jawab
Jam 21 hingga 25: Melengkapkan Halaman Kandungan Kimia
Saya akan mencipta fail periodicity-of-elements-notes.html di dalam folder Chemistry/3/. Ini akan mengandungi nota tentang keberkalaan unsur.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodicity of Elements - Notes</title>
<!-- styles and scripts -->
</head>
<body>
<header>
<nav>
<div>
<p>This is the same base HTML structure as the previous file, periodicity-of-elements-qa.html. </p>
<p>Now, for the most time consuming part, copying over the massive text of the notes and formating it with headings, paragraphs, and lists. I've also used LaTeX syntax where appropriate.<br>
</p>
<pre class="brush:php;toolbar:false"> <h1>
Structure of Periodic Table
</h1>
<h2>
<p>I've added the base CSS from before, but I also added new CSS to style the calculator container, did I mention, this page also has a calculator, for interactivity:<br>
</p>
<pre class="brush:php;toolbar:false"> <style for="Calculator">
/* Light Mode Styles */
.calculator-container {
background-color: #f5f5f5; /* Light background */
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
margin: 20px 0;
}
.calculator-controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.calculator-controls input,
.calculator-controls button {
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc; /* Light border */
background-color: #fff; /* White background */
color: #333; /* Dark text */
transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow transition */
}
.calculator-controls input:focus,
.calculator-controls button:focus {
outline: none;
box-shadow: 0 0 5px #3498db; /* Focus highlight (same as dark mode) */
}
.calculator-controls input {
flex: 2;
}
.calculator-controls button {
flex: 1;
}
.calculator-controls button:hover {
background-color: #e0e0e0; /* Slightly darker on hover */
cursor: pointer;
}
#calculator-output {
overflow-x: auto;
}
#calculator-output table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
#calculator-output th,
#calculator-output td {
border: 1px solid #ccc; /* Light border */
padding: 8px;
text-align: left;
}
#calculator-output th {
background-color: #3498db; /* Header color (same as dark mode) */
color: white;
}
#calculator-output tr:nth-child(even) {
background-color: #f0f0f0; /* Slightly darker for even rows */
}
#calculator-output tr:hover {
background-color: #e8e8e8; /* Slightly darker on hover */
}
/* Loading Spinner */
.loading-spinner {
border: 4px solid #ccc; /* Light border */
border-top: 4px solid #3498db; /* Spinner color (same as dark mode) */
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 20px auto;
display: none;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.calculator-container h2 {
margin-top: 0;
color: #333; /* Darker text color for heading */
}
</style>
Ini adalah gaya yang sangat asas, tetapi tidak mengapa buat masa ini.
Kemudian, saya menambah JavaScript untuk jadual kandungan seperti sebelum ini, dan menambah skrip untuk menjana jadual sifat unsur:
<skrip>
document.addEventListener('DOMContentLoaded', fungsi () {
biarkan elementInput = document.getElementById('elemen-input');
biarkan hitungBtn = document.getElementById('calculate-btn');
biarkan calculatorOutput = document.getElementById('kalkulator-output');
const elementData = {
"H": {
"Hfg_298_15K": -241.8,
"Hfg_0K": -217.8,
"Entropy_298_15K": 130.7,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 25.7,
"Kapasiti_Haba_298_15K": 28.8,
"Tahap_Tenaga_Elektronik": [1216.5, 1025.7],
"Tenaga_Pengionan": 13.6,
"Perkaitan_Elektron": 0.75
},
"Dia": {
"Hfg_298_15K": 0,
"Hfg_0K": 0,
"Entropi_298_15K": 126.1,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 20.8,
"Kapasiti_Haba_298_15K": 20.8,
"Tahap_Tenaga_Elektronik": [159850, 169084, 171133],
"Tenaga_Pengionan": 24.6,
"Perkaitan_Elektron": -0.08
},
"Li": {
"Hfg_298_15K": 159.3,
"Hfg_0K": 155.3,
"Entropy_298_15K": 29.1,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 22.8,
"Kapasiti_Haba_298_15K": 24.8,
"Tahap_Tenaga_Elektronik": [14908, 17159],
"Tenaga_Pengionan": 5.39,
"Perkaitan_Elektron": 0.61
},
"Jadilah": {
"Hfg_298_15K": 324.3,
"Hfg_0K": 315.3,
"Entropy_298_15K": 9.5,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 16.8,
"Kapasiti_Haba_298_15K": 16.7,
"Tahap_Tenaga_Elektronik": [21978, 38178],
"Tenaga_Pengionan": 9.32,
"Perkaitan_Elektron": -0.20
},
"B": {
"Hfg_298_15K": 565,
"Hfg_0K": 561.5,
"Entropi_298_15K": 5.9,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 11.1,
"Kapasiti_Haba_298_15K": 11.1,
"Tahap_Tenaga_Elektronik": [38144, 38178],
"Tenaga_Pengionan": 8.30,
"Perkaitan_Elektron": 0.28
},
"C": {
"Hfg_298_15K": 716.7,
"Hfg_0K": 711.2,
"Entropi_298_15K": 5.7,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 8.5,
"Kapasiti_Haba_298_15K": 8.5,
"Tahap_Tenaga_Elektronik": [10193, 21648],
"Tenaga_Pengionan": 11.3,
"Perkaitan_Elektron": 1.26
},
"N": {
"Hfg_298_15K": 472.7,
"Hfg_0K": 472.7,
"Entropi_298_15K": 153.3,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 29.1,
"Kapasiti_Haba_298_15K": 29.1,
"Tahap_Tenaga_Elektronik": [19233, 28838],
"Tenaga_Pengionan": 14.5,
"Perkaitan_Elektron": -0.07
},
"O": {
"Hfg_298_15K": 249.2,
"Hfg_0K": 246.7,
"Entropi_298_15K": 161.1,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 29.4,
"Kapasiti_Haba_298_15K": 29.4,
"Tahap_Tenaga_Elektronik": [15867, 22698],
"Tenaga_Pengionan": 13.6,
"Perkaitan_Elektron": 1.46
},
"F": {
"Hfg_298_15K": 79.4,
"Hfg_0K": 77.2,
"Entropi_298_15K": 158.8,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 30.2,
"Kapasiti_Haba_298_15K": 30.2,
"Tahap_Tenaga_Elektronik": [404, 40889],
"Tenaga_Pengionan": 17.4,
"Perkaitan_Elektron": 3.40
},
"Tidak": {
"Hfg_298_15K": 0,
"Hfg_0K": 0,
"Entropi_298_15K": 146.3,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 20.8,
"Kapasiti_Haba_298_15K": 20.8,
"Tahap_Tenaga_Elektronik": [134041, 136541, 138892],
"Tenaga_Pengionan": 21.6,
"Perkaitan_Elektron": -0.08
},
"Na":{
"Hfg_298_15K": 107.3,
"Hfg_0K": 107.7,
"Entropi_298_15K": 153.7,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 44.4,
"Kapasiti_Haba_298_15K": 44.4,
"Tahap_Tenaga_Elektronik": [16956, 17293],
"Tenaga_Pengionan": 5.14,
"Perkaitan_Elektron": 0.54
},
"Mg":{
"Hfg_298_15K": 147.7,
"Hfg_0K": 146.2,
"Entropi_298_15K": 32.7,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 24.9,
"Kapasiti_Haba_298_15K": 24.9,
"Tahap_Tenaga_Elektronik": [24581, 30994],
"Tenaga_Pengionan": 7.65,
"Perkaitan_Elektron": -0.30
},
"Al":{
"Hfg_298_15K": 324.3,
"Hfg_0K": 324.1,
"Entropi_298_15K": 28.3,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 24.4,
"Kapasiti_Haba_298_15K": 24.4,
"Tahap_Tenaga_Elektronik": [25057, 33951],
"Tenaga_Pengionan": 5.99,
"Perkaitan_Elektron": 0.43
},
"Si":{
"Hfg_298_15K": 450.0,
"Hfg_0K": 447.6,
"Entropi_298_15K": 18.8,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 20.2,
"Kapasiti_Haba_298_15K": 20.2,
"Tahap_Tenaga_Elektronik": [6209, 14300],
"Tenaga_Pengionan": 8.15,
"Perkaitan_Elektron": 1.39
},
"P":{
"Hfg_298_15K": 314.6,
"Hfg_0K": 314.6,
"Entropy_298_15K": 163.2,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 27.3,
"Kapasiti_Haba_298_15K": 27.3,
"Tahap_Tenaga_Elektronik": [11828, 19553],
"Tenaga_Pengionan": 10.5,
"Perkaitan_Elektron": 0.75
},
"S":{
"Hfg_298_15K": 278.3,
"Hfg_0K": 275.2,
"Entropy_298_15K": 167.7,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 29.2,
"Kapasiti_Haba_298_15K": 29.2,
"Tahap_Tenaga_Elektronik": [21394, 29394],
"Tenaga_Pengionan": 10.4,
"Perkaitan_Elektron": 2.08
},
"Cl":{
"Hfg_298_15K": 121.3,
"Hfg_0K": 119.1,
"Entropi_298_15K": 165.2,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 33.3,
"Kapasiti_Haba_298_15K": 33.3,
"Tahap_Tenaga_Elektronik": [882, 8823],
"Tenaga_Pengionan": 13.0,
"Perkaitan_Elektron": 3.62
},
"Ar": {
"Hfg_298_15K": 0,
"Hfg_0K": 0,
"Entropi_298_15K": 154.8,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 20.8,
"Kapasiti_Haba_298_15K": 20.8,
"Tahap_Tenaga_Elektronik": [93144, 93751, 95282],
"Tenaga_Pengionan": 15.8,
"Perkaitan_Elektron": -0.08
},
"K":{
"Hfg_298_15K": 89.2,
"Hfg_0K": 89.2,
"Entropi_298_15K": 160.3,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 46.2,
"Kapasiti_Haba_298_15K": 46.2,
"Tahap_Tenaga_Elektronik": [12985, 13042],
"Tenaga_Pengionan": 4.34,
"Perkaitan_Elektron": 0.50
},
"Ca":{
"Hfg_298_15K": 178.2,
"Hfg_0K": 177.3,
"Entropy_298_15K": 41.6,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 25.9,
"Kapasiti_Haba_298_15K": 25.9,
"Tahap_Tenaga_Elektronik": [15315, 23652],
"Tenaga_Pengionan": 6.11,
"Perkaitan_Elektron": -0.02
},
"Sc":{
"Hfg_298_15K": 0,
"Hfg_0K": 0,
"Entropi_298_15K": 33.2,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 3.80,
"Kapasiti_Haba_298_15K": 25.52,
"Tahap_Tenaga_Elektronik": [0, 11519.99],
"Tenaga_Pengionan": 6.561,
"Perkaitan_Elektron": 0.189
},
"Ti":{
"Hfg_298_15K": 473.00,
"Hfg_0K": 470.00 ,
"Entropy_298_15K": 180.30,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 7.54,
"Kapasiti_Haba_298_15K": 24.43,
"Tahap_Tenaga_Elektronik": [0, 170.132, 386.874, 6556.833, 6598.765, 6661.006, 6742.756, 6842.962, 7255.355, 4255.356 8602.34],
"Tenaga_Pengionan": 6.828,
"Perkaitan_Elektron": 0.087
},
"Ti":{
"Hfg_298_15K": 473.00,
"Hfg_0K": 470.00 ,
"Entropy_298_15K": 180.30,
"Kapasiti_Haba_Bersepadu_0_hingga_298_15K": 7.54,
"Kapasiti_Haba_298_15K": 24.43,
"Tahap_Tenaga_Elektronik": [0, 170.132, 386.874, 6556.833, 6598.765, 6661.006, 6742.756, 6842.962, 7255.355, 4255.356 8602.34],
"Tenaga_Pengionan": 6.828,
"Perkaitan_Elektron": 0.087
},
};
calculateBtn.addEventListener('klik', function() {
biarkan selectedElement = elementInput.value.trim();
jika (!selectedElement) {
alert('Sila masukkan simbol elemen.');
kembali;
}biarkan normalizedElement = selectedElement.charAt(0).toUpperCase() selectedElement.slice(1).toLowerCase();
calculatorOutput.innerHTML = '<div>
<p>Saya telah menambah banyak kandungan, bersama-sama dengan logik untuk menjana jadual kandungan secara dinamik, dan logik untuk mengira nilai bagi setiap elemen, untuk kalkulator. Noah bertanya kepada saya sama ada saya boleh menyepadukan kalkulator asas, untuk unsur dan jejari kovalen dan panjang ikatannya. Halaman itu kini sedia! Ingin melihatnya, sudah sampai di sini:<br>
Kekalaan Unsur - Nota</p>
<p>Ini menandakan tamatnya pengekodan untuk hari itu. Saya tahu, ia berasa agak tergesa-gesa, kerana ia. Saya tidak dapat menerangkan dengan tepat apa yang saya lakukan dan mengapa, kerana saya juga tidak ingat sebahagian besar perkara itu. Saya hanya ingat perubahan asas.</p>
Atas ialah kandungan terperinci Saya Membina Laman Web Pendidikan ULTIMATE dari Gores — Hari 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1672
14
1428
52
1332
25
1277
29
1257
24
Python vs JavaScript: Keluk Pembelajaran dan Kemudahan Penggunaan
Apr 16, 2025 am 12:12 AM
Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.
JavaScript dan Web: Fungsi teras dan kes penggunaan
Apr 18, 2025 am 12:19 AM
Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.
JavaScript in Action: Contoh dan projek dunia nyata
Apr 19, 2025 am 12:13 AM
Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.
Memahami Enjin JavaScript: Butiran Pelaksanaan
Apr 17, 2025 am 12:05 AM
Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.
Python vs JavaScript: Komuniti, Perpustakaan, dan Sumber
Apr 15, 2025 am 12:16 AM
Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.
Python vs JavaScript: Persekitaran dan Alat Pembangunan
Apr 26, 2025 am 12:09 AM
Kedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.
Peranan C/C dalam JavaScript Jurubah dan Penyusun
Apr 20, 2025 am 12:01 AM
C dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.
Dari laman web ke aplikasi: Aplikasi pelbagai JavaScript
Apr 22, 2025 am 12:02 AM
JavaScript digunakan secara meluas di laman web, aplikasi mudah alih, aplikasi desktop dan pengaturcaraan sisi pelayan. 1) Dalam pembangunan laman web, JavaScript mengendalikan DOM bersama -sama dengan HTML dan CSS untuk mencapai kesan dinamik dan menyokong rangka kerja seperti JQuery dan React. 2) Melalui reaktnatif dan ionik, JavaScript digunakan untuk membangunkan aplikasi mudah alih rentas platform. 3) Rangka kerja elektron membolehkan JavaScript membina aplikasi desktop. 4) Node.js membolehkan JavaScript berjalan di sisi pelayan dan menyokong permintaan serentak yang tinggi.
