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

使ってみた残念な資料

Transcript

1. 超初級！ WEBプログラミングを はじめよう JavaScript編
2. 細かい話・難しい話はありません 難しいことを難しいまま言うやつ、 あれ、馬鹿だよね　by タモリ　 (というか、俺そんなに詳しくないし)　
3. ですが...ちょっと前置き
4. JavaScriptとは？ 最近はいろーんな事ができますが、 基本的にはDOM操作を行うクライアントサイドの スクリプト言語として認知されていると思います。 ブラウザ みんながいつも見ている、 Document Object Model(テキストとか画像)を 操作するための簡単なプログラミング言語
5. Webページが表示される仕組み(簡略) 住所(ほげほげ.jp) index.html HTTP通信 fuji.jpg PCのブラウザから WEBページを閲覧
6. データがローカルにあれば ネットもサーバーも不要 ブラウザ index.html ドラッグ & ドロップす るだけ fuji.jpg
7. 実際にやってみましょう
8. 準備するもの ・Mac／PC ・テキストエディタ ・GoogleChrome ・ネット ・無い人はメモしてください
9. 準備するデータ テキストエディタに下記を記述し index.htmlという名前を付けて保存。 <html> ←この（タグ）に挟む感じ <img src="fuji.jpg"> </html> あとはドラッグ & ドロップするだけ
10. JS で DOMを操作する？？ <html> <img src="fuji.jpg"> </html> DOM
11. JS の お作法 <html> <script> </script> <img src="fuji.jpg"> </html> DOM
12. JS の お作法(試しにアラートを出す) <html> <script> alert("HelloWorld"); </script> <img src="fuji.jpg"> </html>
13. 意味不明な方へ <script> alert("HelloWorld"); </script> ( )　 カッコは関数。alert( ) は警報を出せという命令 "　"　ダブルクォーテーションは文字列(データ型) '　'　 シングルクォーテーションも文字列 ;　 セミコロンは行の終わり つまり　関数の中で文字列"HelloWorld"を扱え、という命令
14. いろいろな注意 <script> alert("HelloWorld"); </script> ・半角／全角に注意。必ず半角で記述すること ・セミコロンなど忘れがち ・タグ、カッコ閉じるの忘れがち 半角' 全角’ 左が正しいクォーテーション
15. 色々あるので、よく挟むやつの紹介（日本式） [ ]　 大カッコ { }　 中カッコ ( )　 小カッコ <> 不等号記号 それぞれ記述によって役割がいろいろなので割愛 プログラミングを書いていくと すぐに慣れます。
16. 画像のリサイズ <html> <script> var VALUE = 100; window.onload = function(){ var ELEMENTS= document.getElementsByTagName("img"); ELEMENTS[0].width = VALUE; } </script> <img src="1.jpg"> </html>
17. 画像(HTML)の出力 <html> <script> document.write(‘<img src="1.jpg">’); </script> </html>
18. 半永久的に画像出力する(ブラクラ) <html> <script> for(;;){ document.write(‘<img src="1.jpg">’); } </script> </html>
19. やっぱ画像出力*10 <html> <script> for(i=0; i<10; i++){ document.write(‘<img src="1.jpg">’); } </script> </html>
20. やっぱ画像出力*10 <html> <script> for(i=0; i<10; i++){ document.write(‘<img src="1.jpg">’); } </script> </html>
21. はじめに覚えて遊ぶプログラミングの基本(共通) ・変数 ・演算子 ・for文 ・if文 これらだけでも色々できるはず。 JSはブラウザにぶっ込むだけでできるけど、 他の言語は作法が面倒だし初学者は挫折しやすい。
22. 変数は箱 var NAME; (JSの場合) =で代入 var NAME = "花嶋"; NAME ・文字列 ・HTML ・URL ・ソースコード ・色々 ※注意点 上書きできる。使える場所に指定がある(スコープ)。
23. 演算子 + - * /　　たしざん、ひきざん、かけざん、わりざん < > == || && 　比較演算子(右と左をくらべるやつ) 半角で記述してね
24. for文(くりかえし文) <script> for(さんすう){ ※ここに記述; } </script> if(var i = 0; i < 10; i++){ 10回くりかえすやつ }
25. if文(条件文) <script> if(条件式){ ※ここに記述; } </script> true(真)またはfalse(偽)で分岐する時はelseを追記
26. ちょっとだけテクニカルな色々 funciton(){　//関数 } [ ]　//配列とか多次元配列 JSON { 'a001', '君の縄' }　//ジェイソンデータ ajax tower (おすすめのリファレンス) https://www.ajaxtower.jp/js/
27. 完