JavaScript
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*JavaScript
[[JavaScript/Syntax]]｜[[JavaScript/BOM]]｜[[JavaScript/D...
~
JavaScriptとは、SunMicrosystems社とNetscapeCommunications...
HTMLが文書の構造、CSSが文書の表現を定義するものだとすれ...
世に登場したのは1995年ですが、Ajax（Asynchronous JavaSc...
-https://ja.wikipedia.org/wiki/JavaScript
-https://www.w3schools.com/js/default.asp
~
言語を学ぶということは「新たな思考回路を身につける」とい...
-[[The RedMonk Programming Language Rankings>Google:The R...
-[[StackOverflow Most Popular Technologies>Google:StackOv...
-[[TIOBE Index>https://www.tiobe.com/tiobe-index/]]
-[[PYPL｜PopularitY of Programming Language index>http://...
~
~
***CONTENTS
#contents2_1
~
**JavaScriptを利用するには
JavaScript を利用するには、以下の３つの方法があります。
-HTMLのタグ内に直接書く
<input type="button" onClick="alert('Hello World!');" va...
-HTML内（＜/body＞直前あるいはhead内）に、scriptタグを用...
<script>
// <!-- ←注） HTMLとしてはコメント扱いになっている
function 関数名（引数）{ 処理 }
function 関数名（引数）{ 処理 }
：
// //-->
</script>
-HTMLから独立した別のファイルに書いて参照する（ 拡張子は ...
--sample.html（head内あるいは＜/body＞直前に以下の１行を...
<script src="script.js" defer></script>
--script.js（独立した新規テキストファイルに、関数を列挙し...
function 関数名（引数）{ 処理 }
function 関数名（引数）{ 処理 }
：
-結論から言うと
''３つめの方法を採用するのがベストです''。関数(プログラム...
//ページのテンプレート作成の段階で、＜head＞部に参照情報...
文書構造はHTML、デザインはCSS、そして振る舞いはJavaScri...
-[[入門サンプル>JavaScript/Sample]]
~
~
**開発環境
***TextEditor
JavaScriptファイル は、HTMLやCSSと同様にプレーンなテキス...
~
***ブラウザ搭載の JavaScript コンソール
JavaScript は、Webページが持つ機能のひとつとして、ブラウ...
以下、ブラウザでコンソールを表示する方法を紹介します。
-Firefoxの場合
--メニュー＞ツール＞Web開発＞開発ツールを表示＞と進んで
コンソール ＞ JS と ロギング に チェックをつけて下さい。
--ショートカット： [command]+[option]+[i]（Windowsは [F12...
--実際には、以下のようなイメージです。
#image(console.jpg)
この例では「script.js の17行目26文字目にある getElemensBy...
-Chromeの場合
--メニュー＞表示＞開発/管理＞JavaScriptコンソール
--ショートカット： [command]+[option]+[i]（Windowsは [F12...
-試しに（コンソールへの文字列の出力）
以下のスクリプトを書いたHTMLをブラウザで開くと、
コンソールにHello World! と表示されるはずです。
<script>
console.log("Hello World!");
</script>
~
~
**JavaScriptプログラミングのキーワード
***イベントとイベントハンドラ
JavaScriptのプログラムの多くは、何らかのアクションに対す...
-イベント
イベントとは、マウスのクリック、キーの押下、タイマーの割...
-イベントハンドラ
イベントに反応して動作する処理プログラム（関数）を意味し...
-<input type="button" onClick = "MyFunction()">を例にとる...
--イベント: ボタンのクリック
--イベントハンドラ: MyFunction()
~
***オブジェクト・プロパティー・メソッド
JavaScript は[[オブジェクト指向言語（Object-Oriented Prog...
オブジェクト指向プログラミングでは、それを「プロパティ...
-プロパティー：オブジェクトの「状態」を表す「データ」
-メソッド：オブジェクトの「操作」を表す「処理」
例えば「車」を例にとると、それは以下のような「データ」と...
-プロパティー：車の名前、型式、重量、色、現在位置、スピー...
-メソッド：エンジン始動、エンジン停止、走る、止まる、点灯...
従来の「手続き型プログラミング」では、「データ（変数また...
実は、私たち「生き物」も、またそれを構成する単位である...
~
***BOM・DOM
BOM（Browser Object Model）と DOM（Document Object Model ...
JavaScriptは、Browser Object のひとつである Window オブジ...
''プロパティーとメソッドの違いは、語の最後に ( ) の有無で...
''オブジェクトとプロパティー、またオブジェクトとメソッド...
以下、プロパティーとメソッドの例です。
-window.innerWindth：ブラウザウインドウの幅（プロパティ）
-window.alert()：ブラウザに警告ダイアログを表示する（メソ...
-document.title：HTML文書のタイトル（プロパティー）
-elem = document.createElement( タグ名 )：新たな要素を作...
-document.body.appendChild( elem )：要素を body に加える...
-具体的な書き方、事例については以下をご覧ください。
--[[JavaScript/BOM]]
--[[JavaScript/DOM]]
--[[JavaScript/Sample]]
~
~
**JavaScriptの実行タイミングを見極める
***HTMLファイルの中に <script>タグを書く場合
スクリプトが＜head＞内にあると、ページのコンテンツよりも...
そこで、この場合の解決方法としては、＜/body＞タグ（終了...
<html>
：
<body>
：
<script>
// Do Something
</script>
</body>
</html>
~
***外部ファイルとして読む場合
プログラミングの基本的な感覚からすると、JavaScript は外部...
そこで、その回避策としてよく用いられるのが、window.onlo...
window.onload = function() {
[ ここに、DOM構築直後に実行すべきプログラムを書く ]
}
//''付記''
//さらなるスピードアップのために、以下のようなコードが書...
// document.addEventListener('DOMContentLoaded', function...
// [ ここに、はじめに実行すべきプログラムを書く ]
// }
~
***Async と Defer
HTML5の新しい仕様として、JavaScriptfの外部ファイルを読み...
-同期的読込 (デフォルト)
<script src="script.js"></script>
--script タグに defer も async も付けない場合、HTML パー...
-async属性｜非同期
<script src="script.js" async></script>
--非同期で読み込まれる
--JSファイル読み込み完了後に内容が実行される
--実行順序が保証されていない
-defer属性｜遅延
<script src="script.js" defer></script>
--非同期で読み込まれる
--JSファイル読み込みが完了してもすぐには実行されない
--HTML解析後にJSファイルが実行される
--実行順序が保証されている
~
~
~
終了行:
*JavaScript
[[JavaScript/Syntax]]｜[[JavaScript/BOM]]｜[[JavaScript/D...
~
JavaScriptとは、SunMicrosystems社とNetscapeCommunications...
HTMLが文書の構造、CSSが文書の表現を定義するものだとすれ...
世に登場したのは1995年ですが、Ajax（Asynchronous JavaSc...
-https://ja.wikipedia.org/wiki/JavaScript
-https://www.w3schools.com/js/default.asp
~
言語を学ぶということは「新たな思考回路を身につける」とい...
-[[The RedMonk Programming Language Rankings>Google:The R...
-[[StackOverflow Most Popular Technologies>Google:StackOv...
-[[TIOBE Index>https://www.tiobe.com/tiobe-index/]]
-[[PYPL｜PopularitY of Programming Language index>http://...
~
~
***CONTENTS
#contents2_1
~
**JavaScriptを利用するには
JavaScript を利用するには、以下の３つの方法があります。
-HTMLのタグ内に直接書く
<input type="button" onClick="alert('Hello World!');" va...
-HTML内（＜/body＞直前あるいはhead内）に、scriptタグを用...
<script>
// <!-- ←注） HTMLとしてはコメント扱いになっている
function 関数名（引数）{ 処理 }
function 関数名（引数）{ 処理 }
：
// //-->
</script>
-HTMLから独立した別のファイルに書いて参照する（ 拡張子は ...
--sample.html（head内あるいは＜/body＞直前に以下の１行を...
<script src="script.js" defer></script>
--script.js（独立した新規テキストファイルに、関数を列挙し...
function 関数名（引数）{ 処理 }
function 関数名（引数）{ 処理 }
：
-結論から言うと
''３つめの方法を採用するのがベストです''。関数(プログラム...
//ページのテンプレート作成の段階で、＜head＞部に参照情報...
文書構造はHTML、デザインはCSS、そして振る舞いはJavaScri...
-[[入門サンプル>JavaScript/Sample]]
~
~
**開発環境
***TextEditor
JavaScriptファイル は、HTMLやCSSと同様にプレーンなテキス...
~
***ブラウザ搭載の JavaScript コンソール
JavaScript は、Webページが持つ機能のひとつとして、ブラウ...
以下、ブラウザでコンソールを表示する方法を紹介します。
-Firefoxの場合
--メニュー＞ツール＞Web開発＞開発ツールを表示＞と進んで
コンソール ＞ JS と ロギング に チェックをつけて下さい。
--ショートカット： [command]+[option]+[i]（Windowsは [F12...
--実際には、以下のようなイメージです。
#image(console.jpg)
この例では「script.js の17行目26文字目にある getElemensBy...
-Chromeの場合
--メニュー＞表示＞開発/管理＞JavaScriptコンソール
--ショートカット： [command]+[option]+[i]（Windowsは [F12...
-試しに（コンソールへの文字列の出力）
以下のスクリプトを書いたHTMLをブラウザで開くと、
コンソールにHello World! と表示されるはずです。
<script>
console.log("Hello World!");
</script>
~
~
**JavaScriptプログラミングのキーワード
***イベントとイベントハンドラ
JavaScriptのプログラムの多くは、何らかのアクションに対す...
-イベント
イベントとは、マウスのクリック、キーの押下、タイマーの割...
-イベントハンドラ
イベントに反応して動作する処理プログラム（関数）を意味し...
-<input type="button" onClick = "MyFunction()">を例にとる...
--イベント: ボタンのクリック
--イベントハンドラ: MyFunction()
~
***オブジェクト・プロパティー・メソッド
JavaScript は[[オブジェクト指向言語（Object-Oriented Prog...
オブジェクト指向プログラミングでは、それを「プロパティ...
-プロパティー：オブジェクトの「状態」を表す「データ」
-メソッド：オブジェクトの「操作」を表す「処理」
例えば「車」を例にとると、それは以下のような「データ」と...
-プロパティー：車の名前、型式、重量、色、現在位置、スピー...
-メソッド：エンジン始動、エンジン停止、走る、止まる、点灯...
従来の「手続き型プログラミング」では、「データ（変数また...
実は、私たち「生き物」も、またそれを構成する単位である...
~
***BOM・DOM
BOM（Browser Object Model）と DOM（Document Object Model ...
JavaScriptは、Browser Object のひとつである Window オブジ...
''プロパティーとメソッドの違いは、語の最後に ( ) の有無で...
''オブジェクトとプロパティー、またオブジェクトとメソッド...
以下、プロパティーとメソッドの例です。
-window.innerWindth：ブラウザウインドウの幅（プロパティ）
-window.alert()：ブラウザに警告ダイアログを表示する（メソ...
-document.title：HTML文書のタイトル（プロパティー）
-elem = document.createElement( タグ名 )：新たな要素を作...
-document.body.appendChild( elem )：要素を body に加える...
-具体的な書き方、事例については以下をご覧ください。
--[[JavaScript/BOM]]
--[[JavaScript/DOM]]
--[[JavaScript/Sample]]
~
~
**JavaScriptの実行タイミングを見極める
***HTMLファイルの中に <script>タグを書く場合
スクリプトが＜head＞内にあると、ページのコンテンツよりも...
そこで、この場合の解決方法としては、＜/body＞タグ（終了...
<html>
：
<body>
：
<script>
// Do Something
</script>
</body>
</html>
~
***外部ファイルとして読む場合
プログラミングの基本的な感覚からすると、JavaScript は外部...
そこで、その回避策としてよく用いられるのが、window.onlo...
window.onload = function() {
[ ここに、DOM構築直後に実行すべきプログラムを書く ]
}
//''付記''
//さらなるスピードアップのために、以下のようなコードが書...
// document.addEventListener('DOMContentLoaded', function...
// [ ここに、はじめに実行すべきプログラムを書く ]
// }
~
***Async と Defer
HTML5の新しい仕様として、JavaScriptfの外部ファイルを読み...
-同期的読込 (デフォルト)
<script src="script.js"></script>
--script タグに defer も async も付けない場合、HTML パー...
-async属性｜非同期
<script src="script.js" async></script>
--非同期で読み込まれる
--JSファイル読み込み完了後に内容が実行される
--実行順序が保証されていない
-defer属性｜遅延
<script src="script.js" defer></script>
--非同期で読み込まれる
--JSファイル読み込みが完了してもすぐには実行されない
--HTML解析後にJSファイルが実行される
--実行順序が保証されている
~
~
~
ページ名:
