超初級！WEBプログラミングをはじめよう

by phiilo

Slide 1

Slide 1 text

超初級！ WEBプログラミングをはじめよう JavaScript編

Slide 2

Slide 2 text

細かい話・難しい話はありません難しいことを難しいまま言うやつ、あれ、馬鹿だよね　by タモリ　 (というか、俺そんなに詳しくないし)　

Slide 3

Slide 3 text

ですが...ちょっと前置き

Slide 4

Slide 4 text

JavaScriptとは？最近はいろーんな事ができますが、基本的にはDOM操作を行うクライアントサイドのスクリプト言語として認知されていると思います。ブラウザみんながいつも見ている、 Document Object Model(テキストとか画像)を操作するための簡単なプログラミング言語

Slide 5

Slide 5 text

Webページが表示される仕組み(簡略) 住所(ほげほげ.jp) index.html HTTP通信 fuji.jpg PCのブラウザから WEBページを閲覧

Slide 6

Slide 6 text

データがローカルにあればネットもサーバーも不要ブラウザ index.html ドラッグ & ドロップするだけ fuji.jpg

Slide 7

Slide 7 text

実際にやってみましょう

Slide 8

Slide 8 text

準備するもの・Mac／PC ・テキストエディタ・GoogleChrome ・ネット・無い人はメモしてください

Slide 9

Slide 9 text

準備するデータテキストエディタに下記を記述し index.htmlという名前を付けて保存。 ←この（タグ）に挟む感じ

あとはドラッグ & ドロップするだけ

Slide 10

Slide 10 text

JS で DOMを操作する？？

DOM

Slide 11

Slide 11 text

JS のお作法

DOM

Slide 12

Slide 12 text

JS のお作法(試しにアラートを出す) alert("HelloWorld");

Slide 13

Slide 13 text

意味不明な方へ alert("HelloWorld"); ( )　カッコは関数。alert( ) は警報を出せという命令 "　"　ダブルクォーテーションは文字列(データ型) '　'　シングルクォーテーションも文字列 ;　セミコロンは行の終わりつまり　関数の中で文字列"HelloWorld"を扱え、という命令

Slide 14

Slide 14 text

いろいろな注意 alert("HelloWorld"); ・半角／全角に注意。必ず半角で記述すること・セミコロンなど忘れがち・タグ、カッコ閉じるの忘れがち半角' 全角’ 左が正しいクォーテーション

Slide 15

Slide 15 text

色々あるので、よく挟むやつの紹介（日本式） [ ]　大カッコ { }　中カッコ ( )　小カッコ <> 不等号記号それぞれ記述によって役割がいろいろなので割愛プログラミングを書いていくとすぐに慣れます。

Slide 16

Slide 16 text

画像のリサイズ var VALUE = 100; window.onload = function(){ var ELEMENTS= document.getElementsByTagName("img"); ELEMENTS[0].width = VALUE; }

Slide 17

Slide 17 text

画像(HTML)の出力 document.write(‘<img src="1.jpg">’);

Slide 18

Slide 18 text

半永久的に画像出力する(ブラクラ) for(;;){ document.write(‘<img src="1.jpg">’); }

Slide 19

Slide 19 text

やっぱ画像出力*10 for(i=0; i<10; i++){ document.write(‘<img src="1.jpg">’); }

Slide 20

Slide 20 text

やっぱ画像出力*10 for(i=0; i<10; i++){ document.write(‘<img src="1.jpg">’); }

Slide 21

Slide 21 text

はじめに覚えて遊ぶプログラミングの基本(共通) ・変数・演算子・for文・if文これらだけでも色々できるはず。 JSはブラウザにぶっ込むだけでできるけど、他の言語は作法が面倒だし初学者は挫折しやすい。

Slide 22

Slide 22 text

変数は箱 var NAME; (JSの場合) =で代入 var NAME = "花嶋"; NAME ・文字列・HTML ・URL ・ソースコード・色々 ※注意点上書きできる。使える場所に指定がある(スコープ)。

Slide 23

Slide 23 text

演算子 + - * /　　たしざん、ひきざん、かけざん、わりざん < > == || && 　比較演算子(右と左をくらべるやつ) 半角で記述してね

Slide 24

Slide 24 text

for文(くりかえし文) for(さんすう){ ※ここに記述; } if(var i = 0; i < 10; i++){ 10回くりかえすやつ }

Slide 25

Slide 25 text

if文(条件文) if(条件式){ ※ここに記述; } true(真)またはfalse(偽)で分岐する時はelseを追記

Slide 26

Slide 26 text

ちょっとだけテクニカルな色々 funciton(){　//関数 } [ ]　//配列とか多次元配列 JSON { 'a001', '君の縄' }　//ジェイソンデータ ajax tower (おすすめのリファレンス) https://www.ajaxtower.jp/js/

Slide 27

Slide 27 text

完