ULTIMATE 教育 Web サイトを一から構築しました — 3 日目
多くの人が、これにどのくらいの時間を費やすのかと私に尋ねました。 2週間か3週間くらいかなと思ってました。しかし、この疑問をきっかけに、自分が Web サイトにどれくらいの時間を費やしているのかを再考するようになりました。ホームページを見るだけで8時間も費やしてしまいました。そこで、以前のように細かい部分にはこだわらず、急いでコンテンツを作成することにしました。多くの注意を無駄にしてしまいました。では、早速プロセスに移りましょう。
19 時間目: 化学コンテンツ ページの作成
まず、Chemistry/3/ ディレクトリ内に periodicity-of-elements-qa.html ファイルを作成します。このページには、元素の周期性に関する質問と回答が含まれます。
<!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>
ログイン後にコピー
これは基本的なスタイルにすぎませんが、要素が読みやすく、あまり邪魔にならず、Web サイト全体で一貫していることを保証するために、ヘッダーとメイン コンテンツにいくつかの変更が加えられています。
また、読みやすさを向上させるために、表、ブロック引用符、コード ブロックに CSS を追加しました。
左側の目次をインタラクティブにするスクリプトも追加したいと思いました。そこで、次のスクリプトを body タグの最後に追加しました:
<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>
ログイン後にコピー
このスクリプトは、メイン要素の見出しからネストされた目次を自動的に生成し、シームレスに動作します。スクリプトは、以前に作成した目次の別タグを自動的に設定します。
最後に、これらのスクリプトとリンク タグを head タグ内に追加することで、LaTeX の数式と方程式のサポートを追加しました。
<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>
ログイン後にコピー
これで、コンテンツ ページが完成しました。デザインが非常にミニマルで、コンテンツの邪魔にならず、必要な機能がすべて備わっているのが気に入っています。
自分でコンテンツをコピーするのではなく、ライブバージョンでどのように表示されるかを確認したい場合は、ここを参照してください: 要素の周期性 - 質問と回答
21 時間目から 25 時間目: 化学コンテンツ ページの完成
Chemistry/3/ フォルダー内に periodicity-of-elements-notes.html ファイルを作成します。これには要素の周期性に関するメモが含まれます。
<!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>
ログイン後にコピー
これは非常に基本的なスタイルですが、今のところは問題ありません。
次に、以前と同様に目次の JavaScript を追加し、要素のプロパティのテーブルを生成するスクリプトを追加しました。
document.addEventListener('DOMContentLoaded', function () {
let elementInput = document.getElementById('要素入力');
let CalculateBtn = document.getElementById('calculate-btn');
let calculatorOutput = document.getElementById('calculator-output');
const 要素データ = {
"H": {
"Hfg_298_15K": -241.8、
"Hfg_0K": -217.8、
"エントロピー_298_15K": 130.7、
「統合熱容量_0_to_298_15K」: 25.7、
「熱容量_298_15K」: 28.8、
"Electronic_Energy_Levels": [1216.5, 1025.7],
「イオン化エネルギー」: 13.6、
「電子親和性」: 0.75
}、
"彼"： {
"Hfg_298_15K": 0、
"Hfg_0K": 0、
"エントロピー_298_15K": 126.1、
「統合熱容量_0_to_298_15K」: 20.8、
「熱容量_298_15K」: 20.8、
"Electronic_Energy_Levels": [159850, 169084, 171133],
「イオン化エネルギー」: 24.6、
「電子親和性」: -0.08
}、
「リー」: {
"Hfg_298_15K": 159.3、
"Hfg_0K": 155.3、
「エントロピー_298_15K」: 29.1、
「統合熱容量_0_to_298_15K」: 22.8、
「熱容量_298_15K」: 24.8、
"Electronic_Energy_Levels": [14908, 17159],
「イオン化エネルギー」: 5.39、
「電子親和性」: 0.61
}、
"なれ"： {
"Hfg_298_15K": 324.3、
"Hfg_0K": 315.3、
「エントロピー_298_15K」: 9.5、
「統合熱容量_0_to_298_15K」: 16.8、
「熱容量_298_15K」: 16.7、
"Electronic_Energy_Levels": [21978, 38178],
「イオン化エネルギー」: 9.32、
「電子親和性」: -0.20
}、
"B": {
"Hfg_298_15K": 565、
"Hfg_0K": 561.5、
「エントロピー_298_15K」: 5.9、
「統合熱容量_0_to_298_15K」: 11.1、
「熱容量_298_15K」: 11.1、
"電子エネルギーレベル": [38144, 38178],
「イオン化_エネルギー」: 8.30、
「電子親和力」: 0.28
}、
"C": {
"Hfg_298_15K": 716.7、
"Hfg_0K": 711.2、
「エントロピー_298_15K」: 5.7、
「統合熱容量_0_to_298_15K」: 8.5、
「熱容量_298_15K」: 8.5、
"Electronic_Energy_Levels": [10193, 21648],
「イオン化エネルギー」: 11.3、
「電子親和性」：1.26
}、
"N": {
"Hfg_298_15K": 472.7、
"Hfg_0K": 472.7、
"エントロピー_298_15K": 153.3、
「統合熱容量_0_to_298_15K」: 29.1、
「熱容量_298_15K」: 29.1、
"Electronic_Energy_Levels": [19233, 28838],
「イオン化エネルギー」: 14.5、
「電子親和性」: -0.07
}、
"お": {
"Hfg_298_15K": 249.2、
"Hfg_0K": 246.7、
"エントロピー_298_15K": 161.1、
「統合熱容量_0_to_298_15K」: 29.4、
「熱容量_298_15K」: 29.4、
"電子エネルギーレベル": [15867, 22698],
「イオン化エネルギー」: 13.6、
「電子親和性」：1.46
}、
"F": {
"Hfg_298_15K": 79.4、
"Hfg_0K": 77.2、
"エントロピー_298_15K": 158.8、
「統合熱容量_0_to_298_15K」: 30.2、
「熱容量_298_15K」: 30.2、
"電子エネルギーレベル": [404, 40889],
「イオン化エネルギー」: 17.4、
「電子親和性」：3.40
}、
「ね」: {
"Hfg_298_15K": 0、
"Hfg_0K": 0、
"エントロピー_298_15K": 146.3、
「統合熱容量_0_to_298_15K」: 20.8、
「熱容量_298_15K」: 20.8、
"電子エネルギーレベル": [134041, 136541, 138892],
「イオン化エネルギー」: 21.6、
「電子親和性」: -0.08
}、
「な」:{
"Hfg_298_15K": 107.3、
"Hfg_0K": 107.7、
"エントロピー_298_15K": 153.7、
「統合熱容量_0_to_298_15K」: 44.4、
「熱容量_298_15K」: 44.4、
"Electronic_Energy_Levels": [16956, 17293],
「イオン化_エネルギー」: 5.14、
「電子親和性」: 0.54
}、
「MG」:{
"Hfg_298_15K": 147.7、
"Hfg_0K": 146.2、
"エントロピー_298_15K": 32.7、
「統合熱容量_0_to_298_15K」: 24.9、
「熱容量_298_15K」: 24.9、
"電子エネルギーレベル": [24581, 30994],
「イオン化エネルギー」: 7.65、
「電子親和性」: -0.30
}、
「アル」:{
"Hfg_298_15K": 324.3、
"Hfg_0K": 324.1、
「エントロピー_298_15K」: 28.3、
「統合熱容量_0_to_298_15K」: 24.4、
「熱容量_298_15K」: 24.4、
"電子エネルギーレベル": [25057, 33951],
「イオン化エネルギー」: 5.99、
「電子親和性」: 0.43
}、
「シ」:{
"Hfg_298_15K": 450.0、
"Hfg_0K": 447.6、
「エントロピー_298_15K」: 18.8、
「統合熱容量_0_to_298_15K」: 20.2、
「熱容量_298_15K」: 20.2、
"Electronic_Energy_Levels": [6209, 14300],
「イオン化_エネルギー」: 8.15、
「電子親和性」：1.39
}、
"P":{
"Hfg_298_15K": 314.6、
"Hfg_0K": 314.6、
"エントロピー_298_15K": 163.2、
「統合熱容量_0_to_298_15K」: 27.3、
「熱容量_298_15K」: 27.3、
"Electronic_Energy_Levels": [11828, 19553],
「イオン化エネルギー」: 10.5、
「電子親和性」: 0.75
}、
"S":{
"Hfg_298_15K": 278.3、
"Hfg_0K": 275.2、
"エントロピー_298_15K": 167.7、
「統合熱容量_0_to_298_15K」: 29.2、
「熱容量_298_15K」: 29.2、
"Electronic_Energy_Levels": [21394, 29394],
「イオン化エネルギー」: 10.4、
「電子親和性」：2.08
}、
「CL」:{
"Hfg_298_15K": 121.3、
"Hfg_0K": 119.1、
"エントロピー_298_15K": 165.2、
「統合熱容量_0_to_298_15K」: 33.3、
"熱容量_298_15K": 33.3、
"電子エネルギーレベル": [882, 8823],
「イオン化エネルギー」: 13.0、
「電子親和性」：3.62
}、
「アル」: {
"Hfg_298_15K": 0、
"Hfg_0K": 0、
"エントロピー_298_15K": 154.8、
「統合熱容量_0_to_298_15K」: 20.8、
「熱容量_298_15K」: 20.8、
"電子エネルギーレベル": [93144, 93751, 95282],
「イオン化エネルギー」: 15.8、
「電子親和性」: -0.08
}、
"K":{
"Hfg_298_15K": 89.2、
"Hfg_0K": 89.2、
"エントロピー_298_15K": 160.3、
「統合熱容量_0_to_298_15K」: 46.2、
「熱容量_298_15K」: 46.2、
"Electronic_Energy_Levels": [12985, 13042],
「イオン化_エネルギー」: 4.34、
「電子親和性」: 0.50
}、
「カ」:{
"Hfg_298_15K": 178.2、
"Hfg_0K": 177.3、
"エントロピー_298_15K": 41.6、
「統合熱容量_0_to_298_15K」: 25.9、
「熱容量_298_15K」: 25.9、
"電子エネルギーレベル": [15315, 23652],
「イオン化_エネルギー」: 6.11、
「電子親和性」: -0.02
}、
"Sc":{
"Hfg_298_15K": 0、
"Hfg_0K": 0、
"エントロピー_298_15K": 33.2、
「統合熱容量_0_to_298_15K」: 3.80、
「熱容量_298_15K」: 25.52、
"電子エネルギーレベル": [0, 11519.99],
「イオン化エネルギー」: 6.561、
「電子親和性」: 0.189
}、
「ティ」:{
"Hfg_298_15K": 473.00、
"Hfg_0K": 470.00 、
"エントロピー_298_15K": 180.30、
「統合熱容量_0_to_298_15K」: 7.54、
「熱容量_298_15K」: 24.43、
「電子エネルギーレベル」: [0, 170.132, 386.874, 6556.833, 6598.765, 6661.006, 6742.756, 6842.962, 7255.355, 8436.618, 8492.421, 8602.34]、
「イオン化エネルギー」: 6.828、
「電子親和性」: 0.087
}、
「ティ」:{
"Hfg_298_15K": 473.00、
"Hfg_0K": 470.00 、
"エントロピー_298_15K": 180.30、
「統合熱容量_0_to_298_15K」: 7.54、
「熱容量_298_15K」: 24.43、
「電子エネルギーレベル」: [0, 170.132, 386.874, 6556.833, 6598.765, 6661.006, 6742.756, 6842.962, 7255.355, 8436.618, 8492.421, 8602.34]、
「イオン化エネルギー」: 6.828、
「電子親和性」: 0.087
}、
};
CalculateBtn.addEventListener('click', function() {
selectedElement = elementInput.value.trim(); にします。
if (!selectedElement) {
alert('元素記号を入力してください。');
戻る;
}let NormalizedElement = selectedElement.charAt(0).toUpperCase() selectedElement.slice(1).toLowerCase();
calculatorOutput.innerHTML = '<div>
<p>電卓用に、目次を動的に生成するロジックと各要素の値を計算するロジックとともに、多くのコンテンツを追加しました。ノアは、元素とその共有結合半径と結合長を計算するための基本的な計算機を統合できないかと私に尋ねました。ページの準備ができました。見たいのですが、ここにあります:<br>
要素の周期性 - メモ</p>
<p>これでその日のコーディングは終了です。確かに、少し急いでいるように感じます。私が何をしたのか、なぜやったのかを正確に説明することはできません。そのほとんどを覚えていないからです。基本的な変更点だけを覚えています。</p>
</div>
ログイン後にコピー
以上がULTIMATE 教育 Web サイトを一から構築しました — 3 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
<🎜>：庭を育てる - 完全な突然変異ガイド
3週間前
By DDD
KB5055612を修正する方法Windows 10にインストールできませんか？
3週間前
By DDD
<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
Nordhold：Fusion System、説明
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Java チュートリアル
1668
14
1668
14
CakePHP チュートリアル
1426
52
1426
52
Laravel チュートリアル
1328
25
1328
25
PHP チュートリアル
1273
29
1273
29
C# チュートリアル
1255
24
1255
24
JavaScriptエンジン：実装の比較
Apr 13, 2025 am 12:05 AM
さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
Python vs. JavaScript：学習曲線と使いやすさ
Apr 16, 2025 am 12:12 AM
Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
C/CからJavaScriptへ：すべてがどのように機能するか
Apr 14, 2025 am 12:05 AM
C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptとWeb：コア機能とユースケース
Apr 18, 2025 am 12:19 AM
Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScript in Action：実際の例とプロジェクト
Apr 19, 2025 am 12:13 AM
現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptエンジンの理解：実装の詳細
Apr 17, 2025 am 12:05 AM
JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：コミュニティ、ライブラリ、リソース
Apr 15, 2025 am 12:16 AM
PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
Python vs. JavaScript：開発環境とツール
Apr 26, 2025 am 12:09 AM
開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
