HTMLわかった人向けJavaScript

プログラミング

こんにちは、4年ぶりにJavaScriptを触ったぴのです。

これまでにHTMLとCSSの話をざっくりとしましたが、今回はホームページを動的にするJavaScriptの話をしようと思います。プログラムの基本的な話(if文が何かとか)はしないので、非プログラマの方には難しいかもしれません。

HTMLやCSSよりかは複雑な部分が多いので、ざっくりと解説しながら進めていきます。

JavaScript

概要

JavaScriptはHTMLやCSSに動的な処理を加えます。例えば、ボタンを押すことでリストの数を増やしたり、文字の色を変更できたりします。

基本

だいたいC言語と同じですが、変数が全てvarで宣言されることと、関数の前にfunctionがいることに注意しましょう。

<script>
  if(true){} else {} 
  for(var i=0; i<10; i++) {}
  while(true) {}
  switch (a) {case 0:break;}
  function Func(num) { return num; } 
  var number = 3; //全てvarで宣言
  var del = function () {} //関数も格納可
</script>

関数呼び出し

JavaScriptは基本的に関数で書かれ、HTMLを介してユーザーが関数を呼び出すことで処理を行います。

<script>
  function Click() {}
  function Check() {}
  function Slide() {}
</script>
<body>
  <button onclick="Click()">ボタン</button> //ボタン押下時
  <input id="_check" type="checkbox" onchange="Check()" /> //チェック時
  <input id="_range" type="range" min="0" max="100" onchange="Slide()" /> //スライド時
</body>

HTMLを介さなくてもJavaScriptで直接定義できるものもあります。

<script>
  window.onload = function () {} //ページロード時
  window.onkeydown = function (e) {e.keyCode} //キー押下時
</script>

HTML/CSSとの連携

document.getElementById(“_id”)などを使うことでHTMLの要素にアクセスでき、読み書きが可能になります。テキストや数値だけでなく、文字色やイベント(onclickとか)も弄れます。(以降列挙のため省略していますが、基本的にこれらは関数内に書かれます)

<script>
  var obj = document.getElementById("_id"); //idで要素取得
  var objs = document.getElementByClassName("_class"); //classで複数要素取得
  var objs = document.querySelectorAll("span._class");
  obj.value = 5; //読み書き textContent,checked,style.colorなど
  var item = document.createElement("li"); //要素の生成
  obj.appendChild(item); //要素の追加
  obj.onclick = handler; //イベントハンドラの登録
  function handler(e) { e.target.textContent = "イベント" } //e.target:呼出元要素
  //座標(↑のe)
  e.screenX; //スクリーン左上からのx座標
  e.clientX; //ブラウザ左上からのx座標
  e.pageX; //ページ左上からのx座標
  e.offsetX; //自要素左上からのx座標
</script>

配列・文字列など

使いそうなメソッド類を列挙しておきます。

<script>
  //配列
  var array = [1, 2, 3]; 
  array.length; //要素数
  array.push(4); //要素の追加
  array.pop(); //最後削除
  array.shift(); //先頭削除
  array.indexOf(n); //nを検索
  array.lastIndexOf(n);//後ろから
  array.splice(index, howmany);//indexからhowmany個削除
  var str = array.join(","); //文字列に合体
  array.forEach(function(e,i){ console.log("["+i+"]="+e) }); //foreach
  array.every(function(e){return 0 < e}); //全て条件を満たすならtrue
  array.some(function(e){return 0 < e}); //一つでも条件を満たすならtrue
  array.filter(function(e){return 0 < e}); //条件を満たす要素の配列
  array.sort(function(a, b){return a-b}); //小さい順にソート
  array.sort(function(a, b){return b-a}); //大きい順にソート
  //文字列
  str.charAt(n); //n文字目
  str.indexOf(c); //前からcを検索
  str.lastIndexOf(c); //後からcを検索
  str.startsWith(str); //strから始まるか
  str.substr(start, length); //startからlength分の文字列
  //数学
  Math.floor(f); //切り捨て
  Math.ceil(n); //切り上げ
  Math.min(a,b); //最小
  Math.max(a,b); //最大
  Math.random(); //乱数[0-1)
  Math.PI; //円周率
  //日付
  new Date().getFullYear(); //西暦 
  new Date().getMonth(); //月-1 
  new Date().getDate(); //日  
  new Date().getDay(); //曜日
  new Date().getHour(); //時
  new Date().getMinutes(); //分
  new Date().getSeconds(); //秒
  new Date().getMilliseconds(); //ミリ秒
  new Date().getTime(); //1970/1/1からのミリ秒
  //タイマー
  setTimeout(func, msec); //msec後にfuncを実行 戻り値はtimerId
  clearTimeout(timerId); //↑を停止
  setInterval(func, msec); //msec毎にfuncを実行 戻り値はtimerId
  clearInterval(timerId); //↑を停止  
</script>

オブジェクト

実はオブジェクト指向言語なのでオブジェクトや継承の概念があります。

<script>
  var animal = { walk: function () {}, dash: function () {} } //オブジェクト 
  function People(name) { this.name = name; this.speak = function () {}; } //コンストラクタ
  var people = new People("pino"); //オブジェクト(インスタンス)生成
  People.prototype = animal; //プロトタイプ(継承)
</script>

キャンバス

線を引いたり図形を描いたりできます。

<script>
  var canvas = document.getElementById("_canvas").getContext("2d");
  //設定
  canvas.strokeStyle = "#FF0000"; //線の色
  canvas.fillStyle = "#00FF00"; //塗りつぶしの色
  canvas.lineWidth = 10; //線の幅
  canvas.lineCap = "round"; //線の終端
  canvas.shadowColor = "#000000"; //影の色
  canvas.shadowBlur = 20; //影をぼかす範囲
  //線
  canvas.beginPath(); //線を引く準備
  canvas.moveTo(x, y); //筆を下ろす
  canvas.lineTo(x, y); //筆を動かす
  canvas.closePath(); //筆を始点まで動かす
  canvas.stroke(); //実際に線を引く
  canvas.fill(); //内側を塗りつぶす
  //図形
  canvas.fillRect(x, y, w, h); //矩形面
  canvas.strokeRect(x, y, w, h); //矩形線
  canvas.clearRect(x, y, w, h); //矩形くり抜き
  canvas.arc(x, y, radius, startAngle, endAngle, anticlockwise); //円形「パス」
  canvas.strokeText(text, x, y); //輪郭文字
  canvas.fillText(text, x, y); //塗りつぶし文字
  canvas.drawImage(image, x, y, w, h); //画像表示
  //座標移動
  canvas.save(); //座標の保存
  canvas.translate(x, y); //原点の移動
  canvas.rotate(r); //rラジアン回転
  canvas.restore(); //座標の復元
</script>

おわりに

以上HTMLわかった人向けJavaScriptでした。

実際の挙動の様子をいれてもよかったのですが、あまり長くしたくなかった(&疲れた)ので列挙するだけに留めました。興味がある人は各々自分で書いて確認しましょう。

管理人は昨日4年ぶりにJavaScriptの入門書を読み直したのですが、やはり4年前とは比べ物にならないくらい理解が進みました。成長を感じますね。とはいえ初心者には違いないので、内容に間違い等あればコメントしていただけると嬉しいです。

また、HTMLとCSSは自分用メモのつもりで投稿したのですが、今回の記事と同じ形式にした方が理解が進みそうなのでそのうちまとめ直したいと思います。

よいホームページライフを!

0

コメント

タイトルとURLをコピーしました