読者です 読者をやめる 読者になる 読者になる

10分でwebプログラミング初心者

f:id:surume_Reflection:20170417010823p:plain

プログラミングの難しい点は環境作りにある

初心者が最初につまづくであろう物がプログラミング環境の準備だ
バージョンがOSが前提ライブラリがモジュールが…

人間が紙に命令や手続きを書いて実行するのをプログラムと呼ぶのであれば
純粋なプログラミングに本来環境は必要ないと言える プログラム - Wikipedia



PCブラウザで見ているのであれば環境も必要ない

ブラウザのURL欄に以下を記述する事で実行できる
簡単だからぜひ手書きで実行してみてほしい

javascript:alert(“HelloWorld!!”);

javascript:までを手書きで書いて、実行部分のalert("HelloWorld!!");を書く
JavaScript疑似プロトコルと呼ばれる物でブックマークレットなどを作れる。


サンプル:こんにちわ世界

www.lifehacker.jp

※ブックマークのURL欄に記入



開発者ツール!!

F12を押してコンソール欄に
alert("HelloWorld!!");を入力Enter

開発者ツールって名前、プログラミングしてる感がありますねw
なんとここでプログラム言語のJavaScriptが使えます。
ブックマークレットjavascript:を抜かせばここから実行可能です。
f:id:surume_Reflection:20170417002745p:plain
ブラウザ時計表示サンプル:

(function(){function displayClock(){var nowDate = new Date();var h = nowDate.getHours();var m = nowDate.getMinutes();var s = nowDate.getSeconds();var textDate = right('0'+h,2)+':'+right('0'+m,2)+':'+right('0'+s,2);document.getElementById('divzumeclock').innerHTML = textDate;};function right(str,n){return str.split('').reverse().slice(0,n).reverse().join('');};window.scroll(0,0);if(document.getElementById('divzumeclock')){document.getElementById('divzumeclock').style.display = 'block';document.getElementById('divzumeclose').style.display = 'block';return;}var clk = document.createElement('div');if(document.all){var width = document.body.clientWidth;}else{var width = '100%';}clk.style.width = width;clk.style.height = '100%';clk.setAttribute('id','divzumeclock');document.body.insertBefore(clk,document.body.firstChild);clk.style.fontSize = '120px';clk.style.padding = '100px 0px 0px 0px';clk.style.textAlign = 'center';clk.style.opacity = 0.8;clk.style.filter = 'alpha(opacity=80)';clk.style.zIndex = 998;clk.style.backgroundColor = 'white';clk.style.position = 'absolute';clk.style.left = 0;clk.style.top = 0;var cls = document.createElement('div');if(document.all){cls.innerHTML = '<a href=\'\'>X</a>';}else{cls.innerHTML = '<a href=\'\'>X</a> ';}if(cls.attachEvent){cls.attachEvent('onclick',function(){document.getElementById('divzumeclose').style.display='none';document.getElementById('divzumeclock').style.display='none';return false;});}else{cls.addEventListener('click',function(event){document.getElementById('divzumeclose').style.display='none';document.getElementById('divzumeclock').style.display='none';event.preventDefault();},false);}cls.style.width = width;cls.style.height = '50px';cls.setAttribute('id','divzumeclose');document.body.insertBefore(cls,document.body.firstChild);cls.style.fontSize = '30px';cls.style.textAlign = 'right';cls.style.zIndex = 999;cls.style.position = 'absolute';cls.style.left = 0;cls.style.top = 0;setInterval(displayClock,250);})();



実際に開発していく

プログラミングは基本、複雑な物を除けば分岐繰り返しのみです


情報爆発が広告界で問題になってそうですが
こういった学習サイトが多く点在しています。
ドットインストールがシンプルでおすすめです。

www.sejuku.net