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

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

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

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

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

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

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

実際にやってみましょう

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

準備するデータテキストエディタに下記を記述し index.htmlという名前を付けて保存。 <html> ←この（タグ）に挟む感じ <img src="fuji.jpg"> </html> あとはドラッグ &
ドロップするだけ

JS で DOMを操作する？？ <html> <img src="fuji.jpg"> </html> DOM

JS のお作法 <html> <script> </script> <img src="fuji.jpg"> </html> DOM

JS のお作法(試しにアラートを出す) <html> <script> alert("HelloWorld"); </script> <img src="fuji.jpg"> </html>

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

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

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

画像のリサイズ <html> <script> var VALUE = 100; window.onload = function(){
var ELEMENTS= document.getElementsByTagName("img"); ELEMENTS[0].width = VALUE; } </script> <img src="1.jpg"> </html>

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

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

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

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

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

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

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

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

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

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

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

phiilo

More Decks by phiilo

Other Decks in How-to & DIY

Featured

Transcript