今天是第五天我們可以寫一個javascript網頁程式管理系統，由於現在資安相當重要，因此我們要寫一個關於資安的javascript網頁程式管理系統，以下是程式碼
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>資安管理系統</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>資安管理系統</h1>
<div id="login-section">
<h2>用戶登入</h2>
<label for="username">用戶名:</label>
<input type="text" id="username" placeholder="請輸入用戶名">
<label for="password">密碼:</label>
<input type="password" id="password" placeholder="請輸入密碼">
<button onclick="login()">登入</button>
<p id="login-message"></p>
</div>
<div id="admin-section" style="display:none;">
<h2>管理員專區</h2>
<p>歡迎，<span id="admin-name"></span></p>
<p>您可以管理用戶權限。</p>
<button onclick="logout()">登出</button>
</div>
<div id="user-section" style="display:none;">
<h2>用戶專區</h2>
<p>歡迎，<span id="user-name"></span></p>
<p>您已成功登入，這裡是用戶專區。</p>
<button onclick="logout()">登出</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding: 50px;
}
.container {
max-width: 400px;
margin: auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #333;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
p {
color: #555;
}
// 模擬用戶資料庫
const users = [
{ username: 'admin', password: hashPassword('admin123'), role: 'admin' },
{ username: 'user1', password: hashPassword('user1234'), role: 'user' }
];
// 登入功能
function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 查找用戶
const user = users.find(u => u.username === username && u.password === hashPassword(password));
if (user) {
if (user.role === 'admin') {
document.getElementById('admin-section').style.display = 'block';
document.getElementById('admin-name').innerText = user.username;
} else {
document.getElementById('user-section').style.display = 'block';
document.getElementById('user-name').innerText = user.username;
}
document.getElementById('login-section').style.display = 'none';
} else {
document.getElementById('login-message').innerText = '登入失敗，用戶名或密碼錯誤！';
}
}
// 密碼簡單哈希（模擬加密）
function hashPassword(password) {
let hash = 0;
for (let i = 0; i < password.length; i++) {
hash = ((hash << 5) - hash) + password.charCodeAt(i);
hash = hash & hash; // 轉為32位整數
}
return hash;
}
// 登出功能
function logout() {
document.getElementById('admin-section').style.display = 'none';
document.getElementById('user-section').style.display = 'none';
document.getElementById('login-section').style.display = 'block';
document.getElementById('login-message').innerText = '';
}
JavaScript 是一種客戶端腳本語言，通常在瀏覽器中執行。它可以讓網頁變得互動和動態。除了在瀏覽器中執行，JavaScript 也可以在伺服器端（如使用 Node.js）運行。
JavaScript 允許開發者使用 var、let 和 const 來宣告變數：
let name = 'John'; // 字串類型 (string)
const age = 25; // 數字類型 (number)
var isStudent = true; // 布林值 (boolean)
let：用於宣告變數，變數的範圍在區塊內（區塊範圍）。const：宣告常數，值不能被修改。var：傳統變數宣告方式，具有函數範圍。函數是一段可以被重複使用的代碼塊。它可以接受輸入（參數）並返回結果。
function greet(name) {
return 'Hello, ' + name;
}
let message = greet('Alice'); // 'Hello, Alice'
ES6 引入了箭頭函數，語法更加簡潔：
const greet = (name) => `Hello, ${name}`;
JavaScript 有各種條件語句和迴圈來控制程式的流程：
if (age > 18) {
console.log('成人');
} else {
console.log('未成年');
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
JavaScript 是一種動態型別語言，這意味著變數的型別是靈活的，可以在不同的時候持有不同的資料類型。
let variable = 42; // 變數現在是數字
variable = 'Hello'; // 現在變成字串
JavaScript 是物件導向語言，幾乎所有東西都是物件。物件是包含屬性和方法的集合。
let person = {
name: 'John',
age: 30,
greet: function() {
console.log('Hello, I am ' + this.name);
}
};
person.greet(); // 'Hello, I am John'
JavaScript 常用於處理用戶事件（如按鈕點擊、鍵盤輸入等）。例如：
document.getElementById('myButton').addEventListener('click', function() {
alert('Button clicked!');
});
這段程式碼等待用戶點擊一個按鈕，當點擊發生時會彈出一個訊息。
JavaScript 可以操作 HTML 元素，稱為 DOM（Document Object Model） 操作。這可以讓網頁變得互動。
使用 document.getElementById() 或 querySelector() 可以選取 HTML 元素：
let heading = document.getElementById('myHeading');
heading.textContent = '新的標題';
JavaScript 也可以動態更改元素的樣式：
document.getElementById('myHeading').style.color = 'blue';
JavaScript 常用於處理用戶交互，如點擊按鈕、滑鼠移動、鍵盤輸入等。
document.getElementById('myButton').addEventListener('click', function() {
console.log('按鈕被點擊了');
});
JavaScript 支援非同步請求，允許我們從伺服器獲取數據而不重新載入整個網頁，這是實現動態網頁的重要部分。
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('發生錯誤:', error));
JavaScript 隨著 ES6 (ECMAScript 6) 的引入變得更強大，以下是一些重要的新特性：
let 和 const：改進了變數宣告，避免 var 帶來的問題。
箭頭函數：更簡潔的函數表達式。
模板字串：使用反引號 ` 來嵌入變數到字串中。
let name = 'Alice';
let message = `Hello, ${name}!`; // 使用模板字串
解構賦值：方便地從物件或陣列中提取值。
const person = { name: 'Bob', age: 25 };
const { name, age } = person; // 解構賦值
Promise 和 async/await：提供更好的非同步程式處理方式。
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.error('錯誤:', error);
}
}
JavaScript 是一門多功能的語言，讓開發者能夠創建動態的網頁應用程式。它的語法相對簡單，並且擁有許多強大的功能，如事件處理、非同步請求、DOM 操作等。隨著 ES6 和後續更新，JavaScript 更加現代化和高效，成為網頁開發不可或缺的一部分。
iThome鐵人賽
看影片追技術