💻 Web開発を始めたい人へ！「JS」って何かをざっくり解説！
勉強ちゃん
Web開発をするには、いろいろな技術（スキル）を学ぶ必要があります。
たとえば（Java向けの場合）：
- HTML（画面構成）
- CSS（画面デザイン）
- JavaScript（JS）（画面操作）
- Java（バックエンド）
- SQL（データベースを操作するための言語）
今回は**画面操作「JS」**について、わかりやすく説明します！
🔍JS（JavaScript）とは？
JavaScriptは、Webページに動きをつけるプログラミング言語です。
たとえば、こんな動き
- ボタンをクリックしたら、文字が変わさせます。
- 入力した内容をチェックして、エラーを出します。
- スライドショーやメニューを動かします。
HTMLが「骨組み」、CSSが「デザイン」だとしたら、
JavaScriptは「動き・操作」を担当する役割です。
🔀 内部JSと外部JS
JavaScriptは、HTMLに次の2つの方法で書くことができます：
1. 内部JavaScript（HTMLの中に直接書く）
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener('load', function() {
document.getElementsByTagName("h1")[0].innerText="hello html world";
})
</script>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<h1>hello html!</h1>
</body>
</html>上記のコードはブラウザで下記のような表示されます
- 少ないJSコードの場合、書くときに便利です。
- ただし、多いコードはごちゃごちゃになるので非推奨です。
2. 外部JavaScript（.jsファイルにかく）
.jsファイルを作って、HTMLからリンクします。
sample.jswindow.addEventListener('load', function() {
document.getElementsByTagName("h1")[0].innerText="hello html world";
})sample.html
<!DOCTYPE html>
<html>
<head>
<script>
</script>
<script src="sample.js"></script>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<h1>hello html!</h1>
</body>
</html>
上記のコードはブラウザで下記のような表示されます
- スクリプトをファイルで分けて管理しやすいです。
- 大規模な開発では基本的に外部ファイルを使います。
🧩 JavaScriptの役割
| 機能 | 説明例 |
|---|---|
| ユーザーの操作対応 | ボタンを押すと画面が変わる処理 |
| データの検証 | フォームの入力チェック |
| アニメーション | スライド・フェードなどの動き |
| 外部と通信 | サーバーと通信してデータを取得（ ajax） |
| DOM操作 | HTMLの内容を動的に変更 |
🛠️ JSの基本要素一覧（一部）
| 要素名 | 説明 |
|---|---|
let / const/ var | 変数作成 |
| 演算子 | 算術演算子：+-*/ など 比較演算子：== != など 論理演算子：&& || など |
if文 | 条件分岐 |
for文 | 繰り返し処理 |
function | 関数 |
document.getElementById() | HTML要素をIDから取得 |
addEventListener() | イベントを追加 |
| … | … |
✨ まとめ
- JavaScriptはWebページを動かす言語です。
- HTMLとCSSと一緒に使うことで、動的なページが作れます。
次はJavaの知識を、お役に立てればうれしいです。
ABOUT ME
職業：Web開発エンジニア
こんにちは！
このブログでは、ITのお仕事で学んだ知識や、 日本での生活で学んだ知識を紹介しています。
お役に立てればうれしいです 😊
こんにちは！
このブログでは、ITのお仕事で学んだ知識や、 日本での生活で学んだ知識を紹介しています。
お役に立てればうれしいです 😊