割烹エディターの開発メモ1
小説家になろうの活動報告を彩るためのエディター【割烹エディター】を開発した時のメモです。
主にJavascript関係の実装や備忘録を記録していきます。
Javascriptとは
ウェブページにて複雑な機能をできるようにするプログラミング言語。これを使うことでHTMLやCSSを操作したりできる。ウェブページをリッチにすることができて、ウェブページに動きを付けることができる。
2015年に大きく仕様が変わり書き方が変わった。
ES5とES6のその前後で変更点が多く、なるべくES6に沿った書き方が推奨されている。
'use strict'; #ES6のJavasciptで実行する宣言
古いJavascriptでも動くので、この宣言を入れておくと新しいモードで実行される。新しくJavascriptを書く場合は予期せぬ動きを避けるため、この宣言を入れるほうが良い。
できること
・変数を宣言してユーザーの動きに応じて中身を変えることができる。
・ウェブページでユーザーが行った動作を検知して、それに応じたイベントを設定することができる。
・ようするにユーザーの動きに応じた画面構築ができる。
基本的な使い方
・書き方1(直書き)
<script>
//ここにJavascriptを記述
</script>
HTMLの中にscriptタグを作ってその中に記述する。
・書き方2(外付け)
<script src="script.js" defer></script>
#deferはHTMLパース完了後に実行されるようにするためのもの
#他にasyncと指定することもでき、非同期にダウンロード、実行される。
#デフォルトでは到達時点で実行されるので、なるべくどちらか指定するほうがよい。
srcで外部のファイルから呼び出す。
※基本的に外付けで書くのがよい。HTMLは構造を表すもの、CSSは装飾を定義するものという役割があるので、それぞれ侵略しないようにするのがマナー。
・変数/定数
let x = 1; 変数を定義 変更可能
const a =1; 定数を定義 変更不可
ES5ではvarだったがES6では変数と定数に分けられた。変数スコープもできたのでvarは使用しない方がいい。
できる限りconstで宣言するのがよいとのこと。
・関数
functionで関数を作ることができる
function myFunction() {
処理;
}
myFunction();#呼び出し
function myFunction2(x) {
処理;
return x*2;
}
console.log(myFunction2(1));#値を受け渡し可能
#匿名関数 名前のない関数
function() {
alert('hello');
}
#イベントの中で走らすためによく使われる。
const myButton = document.querySelector('button');
myButton.onclick = function() {
alert('hello');
}
・演算子
四則演算
+
- *
/ += -= *= /=
・比較演算
===
!==
<
>
<=
>=
===に注意。==ではない(これは厳密ではない比較で非推奨)
・文字操作
#宣言
'' #シングルコーテーション
"" #ダブルクォーテーション
`` #バッククォート テンプレート文字が使えるので変数が入る場合はオススメ
\ #エスケープ
+ 連結
value.toString(); #数値なんかの文字列への変換
string.length; #tring.length; #文字列の長さ
string[0]; #特定の文字の切り出し
string.indexOf('find'); #文字検索 ない場合は-1
string.slice(0,3); #切り出し
string.toLowerCase(); #小文字化
string.toUpperCase(); #大文字化
string.replace('moz','van'); #置換(1回だけ) 全部適用させる場合は正規表現
・配列
let arry = ['パン', '牛乳', 'チーズ', 'ハム', '麺'];
[]でくくると配列に。文字列、数値、オブジェクト、その他の変数、さらには別の配列ですら格納することができる。
arry[0]; #配列へのアクセス
random[2][2]; #多次元配列へのアクセス
arry.length; #配列長
#配列の簡単作成
let myData = '札幌,仙台,東京,名古屋,大阪,博多';
let myArray = myData.split(',');
let myNewString = myArray.join(','); #もとに戻す
#配列の追加
myArray.push('横浜');
#配列の削除
myArray.pop();#最後が削除
・DOM操作
・条件分岐
if (条件式1) {
条件式1が true の場合;
} else if (条件式2) {
条件式1が false 条件式2が true の場合;
} else {
それ以外の場合;
}
#elseif, elseはなくてもいい
#論理演算子
&& #and
|| # or
#3項演算子 if elseを簡単化したもの
( 条件式 ) ? こちらのコードを実行する : 代わりにこちらのコードを実行する
・ループ処理
#forループ
for (let i = 1 ; i < 10 ; i++) {
処理;
}
#whileループ
while (終了条件) {
実行するコード;
}
do {
実行するコード;
} while (終了条件)
#ループを抜ける
break;
#次のループに行く
continue;
参考
良ければサポートお願いします。サポート費用はサーバー維持などの開発費に使わせていただきます。