この記事の内容について
フロントエンドの第一歩としてJavaScriptの基礎学習を始めました。アウトプットとして、JavaScriptのオブジェクトやDOM操作などをまとめていこうと思います！
私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。
JavaScript 基礎編
JavaScript 応用編
Git Hub リンク
カウントアップダウン
仕様
- 画面には数字とボタンが配置されている
- +1ボタンを押すと画面上の数字が1加算される
- -1ボタンを押すと画面上の数字が1減少する
- クリアボタンを押すと画面上の数字が0に戻る
- 数字は0から始まり、10までカウント可能(10でボタンを押すとアラート表示)
- 数字が0の時、-1ボタンを押すとアラートを表示
HTMLの作成
count_up.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CountUp</title>
</head>
<body>
<div class="counter">0</div>
<button class="countup" type="button">+1</button>
<button class="countdown" type="button">-1</button>
<button class="countclear" type="button">クリア</button><br>
<br>
<a href="/index.html">トップページに戻る</a>
<script src="count_up.js"></script>
</body>
</html>
JavaScriptの作成
count_up.js
const countupButton = document.querySelector('.countup');
const countdownButton = document.querySelector('.countdown');
const countclearButton = document.querySelector('.countclear');
countupButton.addEventListener('click', () => {
const counter = document.querySelector('.counter');
const currentCount = parseInt(counter.textContent);
if (currentCount === 10) {
alert('10以上のカウントはできません');
return;
}
counter.textContent = currentCount + 1;
});
countdownButton.addEventListener('click', () => {
const counter = document.querySelector('.counter');
const currentCount = parseInt(counter.textContent);
if (currentCount === 0) {
alert('0以下のカウントはできません');
return;
}
counter.textContent = currentCount - 1;
});
countclearButton.addEventListener('click', () => {
const counter = document.querySelector('.counter');
counter.textContent = 0;
});
スクロール操作アプリ
仕様
- 「上に戻るボタンは最初は非表示」
- 画面を縦にスクロールすると「上に戻る」ボタンが表示される
- 一番上まで戻ると「上に戻る」ボタンが非表示になる
- 「上に戻る」ボタンをクリックすると、画面の一番上まで自動でスクロールする
htmlの作成
scroll.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>scroll</title>
<link rel="stylesheet" href="/css/scroll.css">
</head>
<body>
<div class="content"></div>
<button type="button" class="moveToTop">上に戻る</button>
<script src="/js/scroll.js"></script>
</body>
</html>
CSSの作成
scroll.css
.content {
height: 2000px;
}
.moveToTop {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}
JavaScriptの作成
scroll.js
window.addEventListener('scroll', () => {
const button = document.querySelector('.moveToTop');
if (window.scrollY >= 1000) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
});
const button = document.querySelector('.moveToTop');
button.addEventListener('click', () => {
// スクロールの位置を操作する
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
});
簡易メモアプリ
仕様
- テキスト入力欄と追加ボタンが画面に配置されている
- テキストを入力し、追加ボタンを押下すると、リストの一番下に追加される
- テキストの追加後、フォームからテキストは消える
- テキストを入力せず、ボタンを押すとアラームが出る
htmlの作成
memo.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>memo_app</title>
</head>
<body>
<input type="text" class="new-memo">
<button type="button" class="add-memo">メモ追加</button>
<ul class="memo-list">
<li>メモです</li>
</ul>
<a href="index.html">トップページに戻る</a>
<script src="/js/memo.js"></script>
</body>
</html>
JavaScriptの作成
memo.js
const addMemoButton = document.querySelector('.add-memo');
addMemoButton.addEventListener('click', () => {
const newMemoInput = document.querySelector('.new-memo');
if (!newMemoInput.value) {
alert('文字を入力してください');
return;
}
const newMemo = document.createElement('li');
newMemo.textContent = newMemoInput.value;
const memoList = document.querySelector('.memo-list');
memoList.append(newMemo);
newMemoInput.value = '';
});