TRUNK CAMP 全 4 全全 jQuery 全全全全全全全 TRUNK TRAINING
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
TRUNK CAMP全 4 回で jQuery プラグイン開発TRUNK TRAINING
AGENDA・デザインとは・デザイナー、フロントエンジニアの仕事と年収・ Javascript(JQuery) とは・基本的な書き方・変数・演算・条件分岐・繰り返し処理・イベントハンドラ・本日の課題
デザインについて
デザイン ≠ アート
センスないから、デザイナーに向いてない
デザインは伝える（課題を解決する）ことデザインとアートの違いは、クライアントがいるかいないか。デザインは、クライアントがどんな課題をかかえていて、どうやってクリエイティブの力で解決するかを考え、実践すること。web ページであれば、どんな人が、どんな時に見るのかを考えてデザインする
センスは身に付けることができる1. 王道を知る2. 流行を知る3. 「共通項」や「一定のルール」を見つける
DESIGN
SKILL MIND
DESIGN
SKILL MIND
HAPPY（ FUN ）
UI/UXUser Interfase / User Experience
UI デザインは当たり前、今求められるのは UX デザインプロダクトを通してユーザーにどんな体験をさせたいか
ユーザーの体験をデザインする↓
ユーザーの時間軸を変える
UX タイムスパン
デザイナーの仕事と年収
IT 業界でデザイナーと呼ばれる人はたくさんいる・グラフィックデザイナー・ DTP デザイナー・ web デザイナー・ UX デザイナー・ UI デザイナー・コーダー・フロントエンドエンジニア
仕事内容も幅が広い・ web サイト設計、ワイヤーフレーム作成・ web ページデザイン・広告クリエイティブ作成・ html/css/javascript コーディング・プレゼン・
優秀なデザイナーの共通点・アウトプットの質が高い（コーディング、クリエイティブ）・論理的に考える力（左脳で考える）・課題を発見する力・アイデア、提案力・情報キャッチアップ・コミュニケーション
デザイナーのキャリアプラン・ディレクター・クリエイティブディレクター・プロジェクトマネージャー・グラフィックデザイナー・フロントエンドエンジニア・起業して社長
年収も幅が広い誰でもデザイナーになれる時代。年収の幅は、 250 〜 1000 万。お金が欲しいなら、フロントエンドエンジニアがオススメ。
デザイナーはめちゃめちゃ楽しい
Javascript(jQuery) とは
javascriptweb ページにインタラクティブな機能を追加、ウェブブラウザの機能向上のために、 1995 年に Brendan Eich が開発した言語。
javascript の歴史Javascript の標準化・ＥＣＭＡ（ European Computer Manufacture Association ） Internationalが、 ECMAScript （ ECMA-262 ）規格を策定1990 年代・ web は、 C や JAVA 主流・ Javascript は型の仕様がない、制御構造が不足しているため、エンジニアやデザイナーはJavascript を軽視していた。・ 1997 年： ECMAScript 1・ 1998 年： ECMAScript 2・ 1999 年： ECMAScript 32000 年代前半・機能が強化。 web の標準になり、ほとんどの web で使われるように・セキュリティへの考慮が不十分で、 Javascript の脆弱性をつくウイルスが出現・ 2000 年： ECMAScript 42000 年代後半・重要な技術として再認識され、急速な発展・ Ajax,Jquery の出現・ 2009 年： ECMAScript 5
javascript の歴史現在：・処理の高速化・様々なライブラリの開発が進む・サーバーサイド言語としての Javascript・ 2015 年 6 月： ECMAScript 6 （ ES6 とか ES2015 って言われる）・需要： http://news.mynavi.jp/news/2015/01/08/221/・「 web がある限り残り続ける言語」と言われている・
javascript について
Javascript はオブジェクト指向プログラミング言語である
Object ??オブジェクトとは、物体を、属性 ( データ ) と操作 ( メソッド ) の集合として定義し、コンピュータで扱えるようにしたもの。「 Javascript は DOM 操作である」とも言われる
DOM ??DOM （ Document Object Model ）：ページにある、 p タグとか div タグのこと
jQuery について
javascript をラクに書くためライブラリjavascript だと数 10 行なのに、 jQuery だと数行になることもある
例えば、・クリックしたら画像が入れ替わる・マウスオーバーした要素がアニメーションのように動く・フォームの中の要素を動的に変更する・スクロール量によって見た目や数値を変更する
TOOL
Chrome Developer Tool
書き方
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
を読み込んで、script タグ内もしくは、 js ファイルにプログラムを書く
前提
$(function(){
// ここに jQuery の処理を書くalert(“Hello world!”);
});
書き方
$(function(){
// $(“selector”).method();
$(‘.background’).css(‘background’,’red’);
});
書き方
演算子算術演算子、比較演算子、論理演算子、文字列演算子
算術演算子
+ ：足す- ：ひく* ：かける/ ：割る% ：余り$(function(){
alert(1200 + 400 * 509 / 3 - 500);
});
比較演算子
== ：等しい場合に true!= ：等しくない場合に true=== ：厳密に等しい場合に true!== ：厳密に等しくない場合に true> ：より小さい場合に true>= ：以上の場合 true
$(function(){
alert(40000 == 40000);
});
論理演算子
&& ：且つ|| ：または! ： false のときに true
$(function(){
alert( 400 == 400 && 300 == 300 );
});
文字列演算子
文字列を組み合わせる$(function(){
alert( “Hello” + “world”);
});
変数var
データを一時的に固有名詞をつけて値を記憶しておくもの。値に入るものは、文字列、実数、整数など。
変数とは
$(function(){
var hello = “Hello”
alert(hello);
});
書き方
$(function(){
var hello = 300
alert(hello);
});
書き方
条件分岐if (){ }else{}
データを一時的に固有名詞をつけて値を記憶しておくもの。値に入るものは、文字列、実数、整数など。条件が true か false で処理を変えるとき使用する。
条件分岐とは
$(function(){
var a = 3;var b = 4;
if(a < b){ // true のとき alert(“a は b ”より大きい );}else{ // false のとき alert(“a は b ”より小さい );}
});
書き方
繰り返し処理for(){ }
処理を複数回繰り返す場合に使用する。繰り返し ( ループ ) 処理とは
/* for (初期値 ; 条件式 ; 増減式 ) {/* 繰り返し処理/* }
$(function(){
for(var i=0;i>10,i++){alert(i);i++;}
});
書き方
イベントハンドラclick,load,hover,touchmove,scroll,resizeなど
通常、 Javascript はページ読み込み時に実行されるが、イベントハンドラを定義すると、どのタイミングで処理を実行するか定義することができる。
イベントハンドラとは
$(function(){
$(“button”).click(function(){
$(“div”).css({‘background’,’blue’});
});
});
書き方
課題
<style> .target{ color:block; } .active{ color:red; }</style>
<button> これはボタンです </button>
<div class=“target”> これはターゲットです </div>
準備
button をクリックしたら、”.target” に” .active” という class を追加する処理を書いてください
1.
button をクリックしたら、“.target” の幅 (width) を alert で出してください2.