アプリ映像6 (JavaScript3 & jQuery)

2013/3/23 16:42 | Category アプリ開発実践フェーズ | Comment (0)

■jQuery基礎

(7)さまざまなセレクタを使用する[1]　【jQuery01.html】

$( “#para a”).click( function(){
/* $( “#ttl”).css( “color”, “#00f”); */
$( “#nav li:eq(0)”).css( “color”, “#f60″); //0番目のliの色を変える！
} );

(8)さまざまなセレクタを使用する[2]　【jQuery01.html】

▼0番目のliの色を変える！
$( “#nav li:eq(0)”).css( “color”, “#f60″);

▼奇数番目のliの色を変える！
$( “#nav li:odd”).css( “color”, “#f60″);

▼偶数番目
$( “#nav li:even”).css( “color”, “#f60″);

▼指定した項目よりも小さい less than
$( “#nav li:lt(2)”).css( “color”, “#f60″);

指定した項目よりも大きい greater than
$( “#nav li:gt(1)”).css( “color”, “#f60″);

(9)メソッドを使用する　【jQuery01.html】

▼テキストの変更
$( “#ttl”).text( “デジタルハリウッド関連のスクール”);

▼htmlの追加
$( “#ttl”).html( “

デジタルハリウッド関連のスクール

“);

▼htmlの置き換え
$( “#ttl”).replaceWith( “

デジタルハリウッド関連のスクール

“);

var schoolName = $( “#nav li:eq(0)”).text();
$( “#ttl”).text( schoolName);

(10)jQueryを記述する準備[1] 【jQuery02.html】
(11)jQueryを記述する準備[2] 【jQuery02.html】
(12)show()メソッドを使用する　【jQuery02.html】
(13)アニメーション関連のメソッドを使用する　【jQuery02.html】
(14)アコーディング表現を行う　【jQuery02.html】

(15)アニメーションをメッセージを表示する[1] 【jQuery03.html】
(16)アニメーションをメッセージを表示する[2] 【jQuery03.html】
(17)アニメーションをメッセージを表示する[3] 【jQuery03.html】

(18)プラグイン(ページスクローラー)を使用する[1]　【plugin/index.html】

coliss jQUery プラグイン
　　ページスクローラー

　「コリス　ページスクローラー」で検索。

アプリ映像5 (JavaScript3 & jQuery)

2013/3/22 18:02 | Category アプリ開発実践フェーズ | Comment (0)

　アプリ専攻映像トレーニング 5回目。

■JavaScript基礎

(24)配列を使用する【js15-2.html】

var weekDay = new Array();

weekDay[0] = “(日)”;
weekDay[1] = “(月)”;
weekDay[2] = “(火)”;
weekDay[3] = “(水)”;
weekDay[4] = “(木)”;
weekDay[5] = “(金)”;
weekDay[6] = “(土)”;

(25)getElementById()メソッドを使用する[1] 【cafe.html】

(26)getElementById()メソッドを使用する[2] 【cafe2.html】

function rollOver(){
document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s_on.jpg”);
}

function rollOut(){
　　document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s.jpg”);
}

(27)画像のプリロードを行う【cafe3.html】

var preImg = new Image();
preImg.src = “img/photo01_s_on.jpg”;

(28)JavaScriptを外部化する/イベントハンドラで動かす　【cafe3.html】

■jQuery基礎

(1)jQueryの概要

　jQueryは、「JavaScriptライブラリ」や「フレームワーク」と呼ばれるものの１つです。

フレームワーク・・・枠組み・骨組み

　JavaScriptライブラリと呼ばれるモノには、他にも
　「prototype.js」や「Ext JS」「dojo」などがあります。

(2)jQueryを使用する準備　【start1.html】

　公式サイト　http://jquery.com　からダウンロード

　映像内 : 1.8.2

(3)JavaScriptをjQueryに置き換える[1]　【start2.html】

jQuery( function(){
} );

　ショートカットの $ で置き換える。
jQuery( function(){
} );

(4)JavaScriptをjQueryに置き換える[2]　【start2.html】

　メソッドチェーン

(5)JavaScriptをjQueryに置き換える[3]　【start2.html】

●JavaScript
document.getElementById( “cafeImg”).onmouseover = function(){
document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s_on.jpg”);
}

document.getElementById( “cafeImg”).onmouseout = function(){
document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s.jpg”);
}

　●jQuery基本
$( “img[ src='img/photo01_s.jpg']“).hover( function(){
$( “img[ src='img/photo01_s.jpg']“).attr( “src”, “img/photo01_s_on.jpg”);
},function(){
$( “img[ src='img/photo01_s_on.jpg']“).attr( “src”, “img/photo01_s.jpg”);
});

●jQuery簡略化
$( “img[ src='img/photo01_s.jpg']“).hover( function(){
$( this).attr( “src”, “img/photo01_s_on.jpg”);
},function(){
$( this).attr( “src”, “img/photo01_s.jpg”);
});

(6)JavaScriptをjQueryに置き換える[4]　【start4.html】

// 画像のプリロード
$( ““).attr( “src”, “img/photo01_s_on.jpg”);
// 今から、img要素を作りますヨ！

　●start3.html のJavaScriptでの記述の消したシンプルなモノ。
　　→ start4.html

(7)さまざまなセレクタを使用する[1]　【jQuery01.html】

アプリ映像4(JavaScript2)

2013/3/21 17:44 | Category アプリ開発実践フェーズ | Comment (0)

　アプリ専攻映像トレーニング 4回目。

answerBox キャメルケース

(10)引数を引用する

function jumpURL( URL){
location.href = URL;
}

onclick=”jumpURL( ‘http://www.dhw.co.jp’);”

(11)JavaScriptを外部化する

　jump.js

(12)windowsオブジェクトを使用する

window.alert( “windowオブジェクトを使用しています！”);

(13)さまざまなゥインドウを開く

window.confirm( “JavaScriptの学習は進んでいますか？【 OK – yes、Cancel – no 】”);

window.prompt( “入力欄にお名前をお書きください。”, “ここに入力してください。”);

(14)変数を使用する【js10-1.html】

var answerBox = window.confirm( “JavaScriptの学習は進んでいますか？【 OK – yes、Cancel – no 】”);

document.write( answerBox);

(15)if文を使用する[1] 【js10-2.html】

if( answerBox == true){ /* if( answerBox){ でもＯＫ！ */
document.write( “

その調子です！さらに学習を進めて生きましょう。

“);
}
else{
document.write( “

一歩一歩ゆっくりと学習を進めて生きましょう。

“);
}

(16)if文を使用する[2] 【js11.html】

　●入力欄の内容に沿って、メッセージを表示！

var yourName = window.prompt( “入力欄にお名前をお書きください。”, “ここに入力してください。”);

if( yourName == “ここに入力してください。”){
document.write( “

お名前の入力をお忘れになったようですね。

“);
}
else{
document.write( “

お名前の入力をありがとうございます。

“);
}

(17)if文を使用する[3] 【js11-2.html】

キャンセルの場合の処理
else if( yourName == “” || yourName == null){ /* null : キャンセルボタンを押した場合 */

入力された名前の表示
document.write( “

ようこそ” + yourName + “さん！条件分岐の理解も進んできましたね！

“);

(18)イベントハンドラを使用した関数を実行する【js12.html】
window.onload = function(){
処理
}

(19)for文を使用する[1] 【js13.html】

(20)for文を使用する[2] 【js14.html】

　※Dreamweaber 挿入パネルの表示
　『ウィンドウ』→『挿入』　で右側に表示。
　ドラッグして、上メニューの下に配置。

(21)for文を使用する[3] 【js14.html】

　※(20)のoption要素を、1960から2012までループさせて、フォームを作る！

for( i = 1960 ; i <= 2012 ; i++){
document.write( "

“);
}

(22)Dateオブジェクトを使用する[1] 【js15-1.html】

var currentDate = new Date();
var myFullYear = currentDate.getFullYear();

document.write( “西暦 : ” + myFullYear + “年
“);

(23)Dateオブジェクトを使用する[2] 【js15-1.html】

　月、日、曜日の取得。
var myMonth = currentDate.getMonth() + 1; //月 0:1月～11:12月
var myDate = currentDate.getDate();
var myDay = currentDate.getDay();

アプリ映像3(JavaScript)

2013/3/20 17:13 | Category アプリ開発実践フェーズ | Comment (0)

■JavaScript基礎

(1)JavaScriptの概要
　前回

(2)JavaScriptで使用する用語について
　オブジェクト指向
　　命令を送る対象

　メソッド
　　オブジェクトに対しての命令

　ブロバティ
　　オブシェクトの持つ性質

(3)JavaScriptの記述の準備

http-equiv=”cotent-script-type”　????

(4)documentオブジェクトを使用

document.write( “

はじめてのJavaScript

ドキュメントに文字を表示します！

“);

(5)JavaScript非対応のブラウザに対しての記述

※文字を選択して、ctrl+T で、自動的に

で囲んでくれる！

(6)プロバティを使用する

//ブラウザのURLのオブジェクトに対して
location.href = “http://www.dhw.co.jp”;

　※おぉ～、特定のページに飛ばすには、この方法が正解だったのか！

(7)イペントハンドラを使用する[1]

JavaScriptによって、ページを移動します。

(8)イペントハンドラを使用する[2]

JavaScriptによって、ページを移動します。

(9)JavaScriptを関数化する

JavaScriptによって、ページを移動します。

(10)引数を引用する

　※一括して、リストに変換！
　全部、選択して、下のプロパティ・インスペクタの真ん中あたりの、『リスト』ボタンをクリック！

アプリ映像トレーニング再開

2013/3/19 20:55 | Category アプリ開発実践フェーズ | Comment (0)

途中で行けなくなっていたアプリ開発映像トレーニングを再開。

2.2. CSS3の特徴

sample2.html

　●拡大
transform:

sample3.html

　●角丸
　　border-radius:

sample4.html
　　border-radius:50%; /* %だと、楕円みたいなる */

sample5.html

　CSS3 : キーフレーム

　方法はだいたい理解したので、
　落ち着いた所で、ひとつひとつ、静止画で分解してみよう！

animation-name: loading;
@-webkit-keyframes loading{
0%{ -webkit-transform: rotateY(20deg) rotateX(15deg) scale(1.0); opacity:0.7; }
20%{ -webkit-transform: rotateY(30deg) rotateX(10deg) scale(0.9); opacity:0.6; }
40%{ -webkit-transform: rotateY(40deg) rotateX(20deg) scale(0.9); opacity:0.5; }
50%{ -webkit-transform: rotateY(0deg) rotateX(10deg) scale(1.0); opacity:0.4; }
60%{ -webkit-transform: rotateY(40deg) rotateX(10deg) scale(0.9); opacity:0.5; }
80%{ -webkit-transform: rotateY(30deg) rotateX(20deg) scale(0.9); opacity:0.6; }
100%{-webkit-transform: rotateY(20deg) rotateX(15deg) scale(1.0); opacity:0.7; }
}

●JavaScriptの概要

アプリ開発実践フェーズ0, 1, 2

2013/1/12 15:37 | Category アプリ開発実践フェーズ | Comment (0)

ようやく2013年になって、初めて『アプリ開発実践フェーズ』の映像トレーニングを受講。

■0-1.Webデザイナーのためのアプリ開発講座

★先生の執筆サイト

●HTML5アプリ作ろうぜ！

http://www.atmarkit.co.jp/fwcr/design/index/index_html5app.html

●HTML5 + UX : HTML5とUXの総合情報フォーラム

http://www.atmarkit.co.jp/ait/subtop/ux/

●アットマーク / @IT

http://www.atmarkit.co.jp/

– - – - – - -

「Stay hungry, stay foolish」

1章 … 1_HTML5.pdf

■1-1.HTML5とは？

　・Webアプリケーション開発向け機能の強化
　　　→ API群が豊富
　　　　・Canvas　… 絵が描ける
　　　・WebStrage … データが保存できる
　　　　・IndexDB … データベースが使える
　　　　・Web Worker … マルチタスクが使え、処理が早くなる
　　　・Sockets API … 送ったデータが自動的に表示？ facebookの表示とかかな？
　　　　・Geolocatoin API … 経度、緯度が取得できる。
　　　　・File API … 外部ファイルを簡単に使える。
　　　　・AppCache … 最初キャッシュを見に行く指示が出来る。

　狭義のHTML5, 広義のHTML5(Web Fonts, Web Worker)

■1-2.HTML4とHTML5の違い

　・<nav>$lt;article><section><footer>
　・<!DOCTYPE html> だけでいい。

　・<input type=range> … スライダー
　
… スライダー

■1-3.HTML5 APIとは？
　1.サイト系
　2.アプリ系

■1-4.特徴的な機能と紹介・説明

●HTML5のブラウザ対応
・HTML5 & CSS3 Support (PC)

http://www.findmebyip.com/litmus/

・HTML5 スマホ対応

http://mobilehtml5.org/

■2-1.CSS3とは？

●CSS3では、こんな事が出来る。