■目次
JavaScript基本文法正規表現を扱う一定時間後に処理する定期的に処理するjQueryなしでHTMLを操作するPromiseライブラリを作成する
■JavaScript
モダン JavaScript チートシート | Modern JS Cheatsheet https://mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html 【JavaScript】分からない部分まとめてみたら最強だった件 - Qiita https://qiita.com/TeppeiMimachi/items/b3528b4f37b06383b3cc 2021年に知っておきたいJavaScript最適化技術34選 - Qiita https://qiita.com/baby-degu/items/396edbaefea64140a5d0
■基本文法
■変数
var test1 = "テスト1"; document.write(test1);
■ブロックスコープを持つ変数 変数の有効範囲を限定できるので、安全なプログラムになる
let test2 = "テスト2"; document.write(test2);
■定数 定数は内容を変更できない
const TEST3 = "テスト3"; document.write(TEST3);
■関数1
function hello1(name) { document.write("こんにちは" + name + "さん"); } hello1("テスト4");
■関数2 書き方が変わっても意味はまった同じ
let hello2 = function(name) { document.write("こんにちは" + name + "さん"); } hello2("テスト5");
■アロー関数 関数を引数で渡すときに使うとコード量を減らせる
function hello3(getname) { document.write("こんにちは" + getname() + "さん"); } //hello3(function() { return "テスト6"; }); //hello3(() => { return "テスト6"; }); hello3(() => "テスト6" );
■オブジェクトのプロパティ(値)
let object1 = { red: 255, green: 125, blue: 0 }; document.write(object1.red + ", " + object1.green + ", " + object1.blue);
■オブジェクトのメソッド(関数)
let object2 = { red: 125, green: 255, blue: 0, //code: function() { code() { return this.red + ", " + this.green + ", " + this.blue; } }; document.write(object2.code());
■コンストラクタ関数
function Object3(r, g, b) { this.red = r; this.green = g; this.blue = b; this.code = function() { return this.red + ", " + this.green + ", " + this.blue; } }; let object3 = new Object3(125, 0, 255); document.write(object3.code());
■クラス constructor、getter、setter にも対応している
class Object4 { constructor(r, g, b) { this.red = r; this.green = g; this.blue = b; } /* setCodeRed(r) { this.red = r; } getCodeRed() { return this.red; } */ set red(r) { this._red = r; } get red() { return this._red; } code() { return this.red + ", " + this.green + ", " + this.blue; } }; let object4 = new Object4(0, 125, 255); /* object4.setCodeRed(100); document.write(object4.getCodeRed()); */ object4.red = 100; document.write(object4.red); document.write(object4.code());
■クラスの継承とオーバーライド
class Object5 extends Object4 { code() { return "[" + this.red + ", " + this.green + ", " + this.blue + "]"; } }; let object5 = new Object5(0, 0, 0); object5.red = 200; document.write(object5.red); document.write(object5.code());
■スクリプトファイルの読み込み 動的に外部ファイルを読み込める http(s)経由でなければエラーになるので注意 Object6.js
//export default function() { export default { return { red: 200, green: 200, blue: 200, code() { return this.red + ", " + this.green + ", " + this.blue; } }; }
<script type="module"> import Object6 from './Object6.js'; let object6 = new Object6(); document.getElementById('object6').textContent = object6.code(); </script> <span id="object6"></span>
■正規表現を扱う
■正規表現
if (href.match(/refirio\.net/i)) { 〜処理〜 }
■正規表現で後方参照
var matches = href.match(/\?shop_id=(.*?)$/); var data = matches[1];
■正規表現で置換
var text = text.replace(/<br>/g, ''); var text = text.replace(/\n/g, '<br>');
■一定時間後に処理する
以下のように指定すると、一定時間後に処理が実行される 時間はミリ秒で指定するので、500だと0.5秒後となる
setTimeout(function() { 〜処理〜 }, 500);
■定期的に処理する
以下のように指定すると、一定時間ごとに処理が実行される 時間はミリ秒で指定するので、500だと0.5秒ごととなる timer は、後述する clearInterval で使用できる
var timer = setInterval(function() { 〜処理〜 }, 500);
また、setTimeout によって定期的な処理を終了させることができる
clearInterval(timer);
■jQueryなしでHTMLを操作する
【JavaScript入門】querySelector()によるHTML要素の取得方法まとめ! | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト https://www.sejuku.net/blog/70581 もうjQueryには頼らない!素のJavaScriptでDOMを操作するための基礎知識 - WPJ https://www.webprofessional.jp/dom-manipulation-vanilla-javascript-no-jquery/ jQueryからネイティブJavaScriptへ置き換えの第一歩 - Qiita https://qiita.com/nayuneko/items/b3ad3d6bc2687bcdb0f6 非jQuery環境ではどう書んだっけ?チートシート - Qiita https://qiita.com/tatesuke/items/261ad51426d11b4efe26 jQueryは使わない!ネイティブJavaScriptで実装してみた10選 ← kannart WEB HACKS https://blog.kannart.co.jp/coding/1199/
■Promise
とほほのPromise入門 - とほほのWWW入門 http://www.tohoho-web.com/ex/promise.html 4歳娘「パパ、Promiseやasync/awaitって何?」〜Promise編〜 - Qiita https://qiita.com/Yametaro/items/0d29df53d9ac2a779595 【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita https://qiita.com/impl_s/items/8ffbe865b8c53a75cfe3
■ライブラリを作成する
オリジナルのJavaScriptライブラリを公開しよう https://zenn.dev/yusuke99/books/fcd96342f5cb1b468799