メディアデザイン実習J 2013 Vol.1.5
-
Upload
irie-taichi -
Category
Education
-
view
147 -
download
1
description
Transcript of メディアデザイン実習J 2013 Vol.1.5
メディアデザイン実習J vol.1.5�2013/4/23
�
�\¶8tµ¥´!• ÙćéËG¢!• ÙćéË3r!• óăðýć!!WebÛÏèĆWebÛćðßĆWebÍóā!• �¸´Á�È�Ûćîć��µ�´-½Åµ�!• ÛćîćËY;ªÇ!
開発環境を構築しよう
• IDEĉj��\X(Ċ!– Eclipse!– Aptana!– VisualStudio!– Xcode!
!• æÕßèÒçÎâ!– c�ÒçÎâ!– Fraise!(Smultron)!
(1) 何で書くか?
(2) サーバー環境(実行環境)
ĄćÔĂÛćîć�XAMPP!/!MAMPĉUDĊ�AptanaĉUDĊ�
!:X(�
VM!ware!+!UbuntuĉUDĊ�!
ローカル リモート
ăąâĂÛćîć�§¢ÅÏąâćìåèĉ1�Ċ�
!ÖĀÐéÛćîć�
Amazon!EC2!§¢ÅÖĀÐéĉ1�Ċ�NiFy!C4SAĉ1�Ċ�
!PaaSĉÍóāØćÝÿąößèĊ�
Google!App!EngineĉUD�Ċ�Windows!Azure!HerokuĉUD�Ċ�
�
��½³u@�² Ç�´Æ��« Ç�
Aptanaによる開発環境の構築
Eclipseôćß·MS]µIDE!¥ÈË'H¶m�²�¤¹#�µ�!
!Ûćîć�q!
HTML5!+!javascript·'a]µ�\¶¸��!!âćùêĂ�q!
Windows³ÁÙøąé��¤Ç�
受講者のためのサイト
hSp://zokei.koekatamarin.com/�
• X(Lf=��• X(·�2�• w|·�>�• �\E�·Q2!�
「何から始めるか?」
恐れる必要はない!!
H4·HK·�³©°¢Æm�²¾Ç��óĄ×Āùą×¶�¡Å«��HK·�³vQªÇ#�¸+��!¬È³Ád���µ�¥´¸�{¨��¶n¢��ĉ�¶n¥�´¨`�¶o�³Ê�Ç�´��·¸�óĄ×Āøć�Ç�Ç�Ċ�
3�¶F°¥´¸�!ª¦¢g�®°³¨ÃČ�
'H]¶¸���½³Ë�e¨²m�Ç��
1. _:Ë�¶��[ªÇ�2. óĄ×Āú´[�ËÏûćÞªÇ!3. {¨�zx%·Ä�µÁ·ËG¢�4. óĄ×ĀúËG¢�5. æßèªÇ�6. �NªÇ�7. çÜÏąË <ªÇ�8. Ûćîć�³��ªÇ�9. óĄüćÝÿąªÇ!10. �O��²ÐíÐí�čĉĎoĎĊċ!
「どう進めるか?」
それでは、いよいよ
.html と .js (1)
.html�
.js�
.css�
<link!type="text/css"!rel="stylesheet"!href="style.css"!/>�
<script!type="text/javascript"!src="app.js"></script>!
"º�¨²�!}¾�¿�
.html�
<script!type="text/javascript">!!!!!document.write(”<p>Hello!World!</p>");!</script>�
<style!type="text/css">!p!{!��fontgsize:!18px;!��color:!#00f;!}!</style>!
.html と .js (2)
�ñÌÏĂ�Å}¾�½µ¢²Á�!HTMLñÌÏĂ·�¶G�²��²Á ©¥´�
JavaScriptÙćé�
CSSÙćé�
<!DOCTYPE!html>!<head>!!!!!<mtle>Sample</mtle>!</head>!<body>!!<script!type="text/javascript">!!!!!document.write(”Hello!World!");!</script>!!</body>!
(1)!ñÌÏĂË�¤Ç´ ·G E� (2)!ñÌÏĂË�¤µ�´ ·G E�
<!DOCTYPE!html>!<head>!!!!!<mtle>Sample</mtle>!</head>!<body>!!<script!type="text/javascript"!src="app.js"></script>!!</body>!
document.write(”Hello!World!");!!
index.html� index.html�
app.js�
• gTµÙćéµÅ¥È³Á½�OK!• �¢µÇ´HTML�P¢µÇ!• SEO¶��!• ûąæêąß9�p¯Ç�
• ���±¢¨�…�
�»±�¸<head>�¶G ½¨Ã��
.html と .js (3)
Hello World !
document.write(”Hello!World!");!
*�JSñÌÏø�"º�§È´¥É³3r§ÈÇ�
"º�§È´¥É¶��§ÈÇ�
document.body.appendChild(document.createTextNode("Hello!World!"));!
Body·.th´¨²��§ÈÇ�
window.onload!=!funcmon!()!{!!!document.body.innerHTML!=!"Hello!World!";!}!
Body·.th´¨²��§ÈÇ�
alert('Hello!World!')!
ãÏÍĄ×�sb§ÈÇ�
console.log('Hello!World!')!
ÙąáćĂ��§ÈÇ�
• éåèÝąâåÖß!éåè!.!³±µ£!
基本文法
I��7,!=!&W.FH.I��.�V.6.0R~Z.1556;�
�5^�.!¢(“ÚćĂ”).�Ç(“÷ćĂ”);�
ĉAcmonScript´ ©³ª�Ċ�
ÓòÞÑÖè·ÏûćÞ�
ûáåé·ÏûćÞ�
• A´��)B(·��)�sb§ÈÇ!
!!• A´��C/�(¬·½½)sb§ÈÇ�
変数と文字列
alert(A);!
Alert(‘A’);!
Alert(“A”);!
var!A!=!‘Hello!World!’;!!!alert(A);!alert(‘A’);!alert(“A”);!
3$sb¨½ª�
配列 (1)
var!ManU!=![!!!!!‘�5^�’,!!!!!‘ĄðąĆñÌąĆõĂÝć’,!!!!!‘ÐÑÏąĆĂćëć’,!];!
0� 1� 2�
øąäÑßâćĆþêÏæåéË2l¨²¾Ç�
var!ManU!=![!!!!!‘�5^�’,!!!!!‘ĄðąĆñÌąĆõĂÝć’,!!!!!‘ÐÑÏąĆĂćëć’,!];!!!!!var!player!=!ManU[0];!!alert(player);!!!!
配列 (2)
�5^�Ë�Æ�¨²¾Ç�
��5^��´sb§ÈÇ�
var!ManU!=![!!!!!‘�5^�’,!!!!!‘ĄðąĆñÌąĆõĂÝć’,!!!!!‘ÐÑÏąĆĂćëć’,!];!!!!!ManU[0]!=!‘ãëćĆÐÑĂôåÖ’;!!var!player!=!ManU[0];!!alert(player);!!!!!
�5ËÐÑĂôåÖ¶k A��
�ãëćĆÐÑĂôåÖ�´sb§ÈÇ�
オブジェクト
var!ManU!=!{!!!!!LM:!‘�5^�’,!!!!!FW:!‘ĄðąĆñÌąĆõĂÝć’,!!!!!CAM:!‘ÐÑÏąĆĂćëć’,!};!!alert(ManU.CAM);!!!!!var!posimon!=!‘CAM’;!!alert(ManU[posimon]);!!!
ManUÓòÞÑÖè·CAM´��óĄïæÎË"¼!→�ÐÑÏąĆĂćëć�´sb§ÈÇ�
óĄïæÎË)B³?2ªÇ→ ©iJ�sb§ÈÇ�
�ÓòÞÑÖè��javascript·'HĈ!!ÓòÞÑÖè·�·çćâ¶ÍÖàߪÇÀ¶�éåèÝąâåÖß³óĄ×ĀúËy�¨²�¢��
<body>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<form><div>
日本代表の<select> <option>(ポジションを選択)</option> <option value="FW">フォワード</option> <option value="CAM">セントラルミッドフィルダー</option> <option value="LM">左ミッドフィルダー</option> <option value="RM">右ミッドフィルダー</option> <option value="LDM">左ボランチ</option> <option value="RDM">右ボランチ</option> <option value="LB">左サイドバック</option> <option value="LCB">左センターバック</option> <option value="RCB">右センターバック</option> <option value="RB">右サイドバック</option> <option value="GK">ゴールキーパー</option></select>の選手って、誰だっけ?
</div></form>
<div id="answer">それは、<span></span>です。</div>
<script>$(function(){ var team = { FW: '前田遼一', CAM: '本田圭佑', LM: '香川真司', RM: '岡崎慎司', LDM: '遠藤保仁', RDM: '長谷部誠', LB: '長友佑都', LCB: '今野泰幸', RCB: '栗原勇蔵', RB: '内田篤人', GK: '川島永嗣' }; $('select').change(function(){ var player = ''; var position = ''; $('select option:selected').each(function(){ position = $(this).attr('value'); player = team[position]; }); $('#answer').show(); $('#answer span').text(player); }).trigger('change'); $('#answer').hide();});
</script>
</body>