フロントエンド - JavaScript/jQuery - Hello World!

fr-sato commented 10 years ago

■目的

jQueryで簡単なプログラムを書いてみます。

■課題

以下のソースを基にHTMLファイルを作成して下さい。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>

<!-- header -->
<header>
  <h1>jQueryサンプル</h1>
</header>

<!-- content -->
<article>
  <p id="msg">サンプルです。</p>
</article>

<!-- footer -->
<footer>
  Copyright 2014
</footer>

</body>
</html>

作成したHTMLファイルをブラウザで開いた時にHello World!とアラートが表示されるようにして下さい。
その際、以下の事を考慮、調べて実装して下さい。

出力する文字列を変数に格納
- 変数や型が何か分からなければ調べて下さい
文字列をアラートで表示

fr-itaya commented 10 years ago

本課題は16：00開始、工数見積6時間と致します。よろしくお願いします！

fr-itaya commented 10 years ago

出力する文字列を変数に格納：JavaScriptで実装
- 変数
- データに付けるラベル。
- JavaScriptでは変数は次の様に宣言してから使う。 var 変数名;
- 変数の宣言と値の代入はまとめて行うことも可能。 var 変数名 = 値;
- 型
- JSで使えるデータ型は次の通り。
  - 数値
  - 文字列
  - 真偽値 ( true / false )
  - オブジェクト
  - 配列
  - 関数
  - 組み込みオブジェクト
  - undefined(未定義)
  - null(何もない)
文字列をアラートで表示：jQueryで実装
- 書式　$(セレクタ).メソッド(引数);
- $(document).ready(function(){…});は$(function(){…}); と省略して記述できる
- document：htmlファイルを指している
- jQueryでセレクタと言うとhtml(css)のタグになる事が多い。documentは特殊な部類。
- readyメソッド：DOMが全て読み込まれ操作・解析可能になった時点で実行
- ※画像の読み込みには関与しない
- DOM：Document Object Modelの略。HTMLやXMLをアプリケーション側から利用するためのAPI。
- つまりJSからHTMLを解析・操作できる機能。

fr-sasaki commented 10 years ago

問題ないのでクローズします！

fr-itaya / training

フロントエンド - JavaScript/jQuery - Hello World! #46

■目的

■課題