IORI online School

JavaScript、html、css の無料学習サイト

JavaScriptで学ぶオブジェクト指向

JavaScriptで学ぶオブジェクト指向 目次 非オブジェクト指向のプログラム オブジェクト指向プログラミング オブジェクト指向プログラムを拡張する オブジェクト指向プログラムをさらに拡張 本講座ではJavaScriptを利用して、オブジェクト指向を学習する。 オ…

【JavaScript 上級講座】オブジェクト指向とクラス設計

[JavaScript 上級講座]オブジェクト指向とクラス設計 目次 非オブジェクト指向で記述したプログラム オブジェクト指向とクラス設計 オブジェクト指向プログラムと非オブジェクト指向プログラムの比較 オブジェクト指向プログラムの責任分担と拡張性と柔軟性 …

【WEB 入門講座】CSSのセレクタを学習する

[WEB 入門講座]CSSのセレクタを学習する 目次 タグを指定してスタイルを設定する class属性とid属性 まとめ 本講座で、セレクタを学習する。 Web入門講座の目標の1つは、「JavaScriptを学習するために必要な Web知識を習得する事」である。 こんかい学習する…

【WEB 入門講座】marginとpaddingでタグに余白を設定する

[WEB 入門講座]marginとpaddingでタグに余白を設定する 目次 margin(余白)の設定 padding(内側の余白)を設定する 左右上下のmarginとpaddingを設定する まとめ pタグにmargin(余白)とpadding(内側の余白)を 設定する方法を学習する。 Webサイト政策…

【WEB 入門講座】CSSの基礎を学習

[WEB 入門講座]CSSの基礎を学習 目次 はじめてのCSS 色の指定方法と背景色の設定 文字色(color)、文字サイズ(font-size)、枠(border)の設定 まとめ 本講座から、CSSの学習に入る。 最初にCSSを利用するための基本的操作を学習する。 その後、CSSを利用…

【WEB 入門講座】リンクタグと画面移動(相対パスを学習)

[WEB 入門講座]リンクタグと画面移動(相対パスを学習) 目次 リンクタグ 相対パス リンクタグの練習 絶対パス まとめ 本講座では、リンクタグ、絶対パス、相対パスを学習する。 これらはWebサイトを作成するために必要な知識であり、 かつ、プログラミング…

【WEB 入門講座】ブロックレベル要素とインライン要素

[WEB 入門講座]ブロックレベル要素とインライン要素 目次 ブロックレベル要素 インライン要素 まとめ ブロックレベル要素とインライン要素を学習する。 本講座の学習内容は少ない。 しかし、Webサイト作成において、最も重要な講義になると考える。 そのため…

【WEB 入門講座】HTML文書の構造と基本的なタグ

[WEB 入門講座]HTML文書の構造と基本的なタグ 目次 HTMLの基本的な構造 pタグの解説 リストタグ(olタグ、ulタグ、liタグ)の解説 tableタグ、trタグ、tdタグ まとめ 本講座では、HTML文書の構造を学習する。 HTML文書はある構造をもっているので、 まずはそ…

【Web 入門講座】HTMLタグを記述するためのルール

[Web 入門講座]HTMLタグを記述するためのルール 目次 タグとは何か タグを記述するルール 属性と値 まとめ 本講座では「タグの記述ルール」を学習する。 タグとは何か 前講座で記述したファイルの内容を確認する。 001<p>IORI</p> ファイルに、 「<p>IORI</p>」 と記述した…

【Web 入門講座】HTMLとCSSを学習するための準備

[Web 入門講座]HTMLとCSSを学習するための準備 目次 Webサイトを作るために必要な知識 Webサイトを作成する手順 Webブラウザに文字を表示する 当講座は「Web 入門講座」である。 主にWebサイトを作る技術をご紹介する。 学習内容はそれほど深くない。浅い。 …

【JavaScript 上級講座】thisのまとめ(5つの例題でthisを完全制覇)

[JavaScript 上級講座]thisのまとめ(5つの例題でthisを完全制覇) 目次 thisの基礎 関数が持つ関数、call()関数を実行する thisとインナー関数とクロージャ 配列のforEach()関数とthisの関係 プロトタイプチェーンとthis まとめ JavaScriptのthisキーワード…

【JavaScript 上級講座】プロトタイプチェーンとオーバーライド

[JavaScript 上級講座]プロトタイプチェーンとオーバーライド 目次 2つのコンストラクタ関数に、プロトタイプチェーンを構築する オブジェクトと、別定義したコンストラクタ関数とのプロトタイプチェーン プロトタイプチェーンとメソッド プロトタイプチェー…

【JavaScript 上級講座】prototypeオブジェクトと__proto__プロパティ(プロトタイプチェーン)

[JavaScript 上級講座]prototypeオブジェクトと__proto__プロパティ(プロトタイプチェーン) 目次 コンストラクタ関数とメソッドの定義 Objectコンストラクタ関数とオブジェクトの関係 オブジェクトとObjectコンストラクタ関数の関係 コンストラクタ関数とO…

【JavaScript 中級講座】クロージャの学習

[JavaScript 中級講座]クロージャの学習 目次 クロージャを理解するための準備段階 はじめてのクロージャ 少しだけ実践的なサンプルプログラム まとめ 本講座では、クロージャを学習する。 サンプルプログラムを3つ掲載した後、 (少しだけ)実践的なプログ…

【JavaScript 中級講座】windowオブジェクトと即時関数とfilter()関数

[JavaScript 中級講座]windowオブジェクトと即時関数とfilter()関数 目次 windowオブジェクト hasOwnProperty()関数を利用してプロパティを持っているか確認する windowオブジェクトとhasOwnProperty()関数 即時関数の必要性 即時関数を作る 実践的な即時関…

【JavaScript 中級講座】コンストラクタ関数

[JavaScript 中級講座]コンストラクタ関数 目次 コンストラクタ関数が無いとどうなる? newでオブジェクトを製造する コンストラクタとプロパティ メソッドを定義する コンストラクタ関数の利便性 まとめ 本講座では、JavaScriptのコンストラクタ関数を学習…

【JavaScript 中級講座】配列の関数(forEach , map , filter)

[JavaScript 中級講座]配列の関数(forEach , map , filter) 目次 関数の引数について 配列のforEach()関数を利用する 配列のmap()関数を利用する 配列のfilter()関数を利用する まとめ 本講座では、少し高度な配列の関数を学習する。 学習する関数は、forE…

【JavaScript 中級講座】DOMのイベントに関数を登録する

[JavaScript 中級講座]DOMのイベントに関数を登録する 目次 HTMLタグの操作のタイミング window.onloadに関数を登録する window.onloadに関数を登録してDOM操作を実行する リストへonclickイベントを動的に登録する textareaに入力した文字数をカウントする …

【JavaScript 中級講座】プロパティと関数を動的にオブジェクトへ追加する

[JavaScript 中級講座]プロパティと関数を動的にオブジェクトへ追加する 目次 オブジェクトにプロパティを追加する 文字列を指定してプロパティに値を代入する 変数を利用してオブジェクトのプロパティに値を代入する オブジェクトのプロパティと値を取り出…

【JavaScript 中級講座】値渡しと参照渡し

[JavaScript 中級講座]値渡しと参照渡し 目次 値渡し オブジェクトを作成して変数へ代入する メモリ上にオブジェクトを展開 メモリ上のオブジェクトを理解する 参照渡しを実行する 参照渡しの動作確認 参照渡しの注意点 まとめ 本講座では、値渡しと参照渡し…

【JavaScript 入門講座】配列の関数を学習する

[JavaScript 入門講座]配列の関数を学習する 目次 配列のjoin()関数を利用して文字列を作成 配列の末尾に新しい要素を追加する( push()関数 ) 配列の先頭に新しい要素を追加する( unshift() ) 配列の最後の要素を削除する( pop() ) splice()関数を利用…

【JavaScript 初心者講座】論理演算子の学習

[JavaScript 初心者講座]論理演算子の学習 目次 &&演算子 || 演算子 &&演算子のまとめ ||演算子のまとめ 公倍数を求める まとめ 本講座では、論理演算子を学習する。 「論理」というと難しく聞こえるが、論理的に考えれば比較的簡単ではある。 本講座の最終…

【JavaScript 初心者講座】読み取り専用の変数(const)

[JavaScript 初心者講座]読み取り専用の変数(const) 目次 定数に値を再代入するとエラーになるプログラム constの注意点(配列の要素に値を再代入) constの注意点(オブジェクトのプロパティに値を再代入する) 定数を利用する 読み取り専用変数について …

【JavaScript 練習講座】プログラミング設計

[JavaScript 練習講座]プログラミング設計 目次 HTMLファイルを作成 画面を作成する関数を記述する リストへ追加する処理 文字列を全て削除する 特定の文字列を削除する(準備) 完成品 プログラミング設計 最終講座である。こんかい、簡単なショッピングリ…

【JavaScript 練習講座】特定の子要素の削除と全子要素削除

[JavaScript 練習講座]特定の子要素の削除と全子要素削除 目次 特定の子要素を削除する 一番最初の子要素を削除する 子要素を全て削除する while文を利用して子要素を全て削除する まとめ 本講座では、特定の子要素を削除する方法と、 全ての子要素を削除す…

【JavaScript 練習講座】HTMLタグの子要素の取得と変更

[JavaScript 練習講座]HTMLタグの子要素の取得と変更 目次 子要素を取得して文字列を変更する 特定の子要素のスタイルを変更する リンクタグを追加する まとめ この講座では、タグの子要素に注目する。 「子要素操作の学習」とも言える。 主に、特定の子要素…

【JavaScript 練習講座】DOMを追加する

[JavaScript 練習講座]DOMを追加する 目次 olタグの子要素として、liタグを追加する liタグに文字列を表示させた後、olタグへ追加 DOMの子要素の数を取得する まとめ 本講座では、HTMLタグに別のタグを追加する方法を学習する。 olタグの子要素として、liタ…

【JavaScript 練習講座】入力フォームの入力値を取得する

[JavaScript 練習講座]入力フォームの入力値を取得する 目次 用語解説 テキストボックスの入力値を取得する プルダウンメニューを利用する チェックボックスのチェックされているか確認 まとめ HTMLでは、テキストボックスやチェックボックスなど様々な入力…

【JavaScript 練習講座】DOMのスタイルを変更する

[JavaScript 練習講座]DOMのスタイルを変更する 目次 タグの背景色を変更する 文字の色を変更する タグの表示設定を切り替える まとめ 本講座では、タグのスタイルを変更する方法を学習する。 「タグのスタイル」と一言で言ってみたものの、 「タグのスタイ…

【JavaScript 練習講座】DOM操作基礎

[JavaScript 練習講座]DOM操作基礎 目次 DOM操作とは リンクをクリックするとJavaScriptが実行する DOM操作(タグの文字を変更する) DOM操作(タグを取得した後、タグの文字列を取得する) まとめ 本講座の学習内容は、WEBページの表示を変更する方法である…