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
200
Other Decks in How-to & DIY
See All in How-to & DIY
Terra Charge|EVコンセントご利用ガイドブック / Terra Charge EV Charger Guidebook
contents
0
250
ちょっと待てぃ!!ボタンをキーボード化 #M5Stack #M5JPTour2023 #相席食堂
n0bisuke2
0
390
属人化しない為の勉強会作り / To make tech meetups with less personal dependencies
lovee
0
190
一番やさしいDJ入門 2024
stefafafan
5
1.2k
2023年度にやりたいこと(めぐろLT会 #2)
funain
0
370
Wear OSでwatch face作成~令和になってもCanvas芸?~
cibmc
1
590
2023_nekoLT_MZFact
mizmiz1229
1
390
ブックマークチームでアクセシビリティを広める際に直面した問題と、如何にして立て直していったか
lunastera
0
640
Last CoLab
yumechi
1
110
メイカーフェア東京、深セン、台北、サンフランシスコにみるFactory Automationみ/製造業み
takasumasakazu
0
840
スカウト返信率を倍にするためにやったこと / 2024-01-29
tamago3keran
1
720
AWSのユーザーコミュニティプログラムのご紹介 (JAWS-UG札幌支部編)
awsjcpm
1
410
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
92
4.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
We Have a Design System, Now What?
morganepeng
42
6.7k
In The Pink: A Labor of Love
frogandcode
137
21k
Designing Experiences People Love
moore
135
23k
Making the Leap to Tech Lead
cromwellryan
122
8.4k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
Happy Clients
brianwarren
91
6.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
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/
完