Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
超初級!WEBプログラミングをはじめよう
Search
phiilo
August 27, 2017
How-to & DIY
0
250
超初級!WEBプログラミングをはじめよう
使ってみた残念な資料
phiilo
August 27, 2017
Tweet
Share
More Decks by phiilo
See All by phiilo
パブリッククラウドあれこれ.pdf
phiilo
0
210
Other Decks in How-to & DIY
See All in How-to & DIY
スクフェス福岡前夜祭 LT
pokotyamu
0
110
「赤い芸人」養成講座
mobilebiz
0
950
Chaos V-Ray Render Pool (使い方)
renderpool
0
160
スターバックスの黒板アートを生成AIで描かせてみたら...
scbc1167
0
220
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
1
180
元SREのCREが伝えたい、Mackerelをもっと活用するための実践Tips集 / Mackerel Drink Up #11 do-su-0805
dosu0805
0
120
[너구리랑! 회고 밋업 2023] GTD & PARA -머릿속이 복잡하던 일상에 적용한 정리법 // 토르 님
develop_neoguri
1
110
Notionでの快適メモ術
ayumu11
0
600
衛星通信を使ってLチカしてみた #starlink #iotlt
n0bisuke2
0
350
enebularを活用したNode-REDによるIoTシステム開発と運用
taokiuhuru
0
290
JAWS-UG東北[秋田] -東北エンジニアの祭典- AWSとJAWS-UG
awsjcpm
0
1.2k
IoTと田中の距離 #iotlt #田中 #openai
n0bisuke2
1
190
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
513
39k
Ruby is Unlike a Banana
tanoku
96
10k
Scaling GitHub
holman
457
140k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
What's new in Ruby 2.0
geeforr
337
31k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
A designer walks into a library…
pauljervisheath
199
23k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
The Language of Interfaces
destraynor
151
23k
Transcript
超初級! 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>
やっぱ画像出力*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/
完