0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【JavaScript・学習ログ1】JavaScriptの基本操作

Posted at

目次

1. 記述方法
2. データの種類
3. 出力方法
4. 四則演算
5. 変数について
6. 定数について
7. よくあるエラーの種類

参考:侍テラコヤ『JavaScriptの基礎を学ぼう』https://terakoya.sejuku.net/programs/60/chapters

1. 記述方法

JavaScriptを実行するには下記のような記述方法がある。

①HTMLファイルの中に記述する

短いコード向け。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meda charset="utf-8">
		<title>JavaScriptの練習</title>
	</head>
	<body>

		<script>
			// ここにコードを記述する
		</script>
	</body>
</html>
  • 画面の表示前に処理を実行したい場合 ⇒headタグ内に書く。
  • 画面の表示後に処理を実行したい場合 ⇒bodyタグ内に書く。

②JSファイルを作ってHTMLファイルから読み込む

コードが長くなる場合、機能ごとにファイルを分けたい場合向け。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meda charset="utf-8">
		<title>JavaScriptの練習</title>
	</head>
	<body>

		<script src="script.js"></script>
	</body>
</html>

①と同じくheadでもbodyでも記述可能。

2. データの種類

  • 文字列型
  • 値型
  • 論理型
// 文字列
console.log('こんにちは');
console.log('今日はいい天気ですね');
// 数値
console.log(100);
// 論理
console.log(true);
console.log(false);

3. 出力方法

ブラウザを開いただけではプログラムが正しく実行されているかわからないため、
コンソールにデータを出力し、確認する。
スクリーンショット 2023-10-14 224745.png

4. 四則演算

+ 足す - 引く
* 掛ける / 割る
% 余り
console.log(45 + 18);
console.log(30 - 12);
console.log(15 * 6);
console.log(30 / 3);
console.log(45 % 8);

5. 変数について

文字列や数値などのデータを入れる箱のようなもの。

// 変数の宣言
let userName;
// 値の代入
userName = '太郎';
// 変数の宣言・値の代入
let userNumber = 8;

// コンソールへの出力
console.log(userName);
console.log(userNumber);

再代入する際はletの記述は不要。

命名規則

変数名にはキャメルケース(複合語の各単語の先頭を大文字にする記法)を使用する。
letのような予約語は使えないため注意。

6. 定数について

再代入ができない変数のこと。予期せぬ動作を妨げるメリットが大きいので、基本的にはlet(変数)ではなくこちらconst(定数)を使う。

7. よくあるエラーの種類

種類 原因
構文エラー 記述がJavaScriptのルールに沿っていない
参照エラー 変数のスコープ(有効範囲)を無視して参照している
型エラー データ型を勘違いして使用している
範囲エラー データの許容範囲を超えた使い方をしている

(簡易メモ)

  1. 記述する方法はコードの簡易さや複雑さで使い分けると◎
  2. コンソールにデータを出力する際の記述は console.log()
  3. 『変数let』は再代入可能、『定数const』は不可能。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?