鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

JavaScript

属性値(name, valueなど)で要素を指定する / javascriptとjQueryそれぞれ(個人的備忘録)

理解しやすさでいうと、jQueryの方が優っていると思い、習いたての時はjQueryを多用していた。 しかしながら、他の言語を使ってみたり、関数を複数作って長期的に体系化して改善・追加していくようになると、javascriptの方が書き方が美しいのでは? さらに…

JavaScriptを書き始める時の注意点。(個人的超超初歩的覚書)

JSばかり書いている訳ではないので、間が空いてからホームページの拡充などでいざ書こうとした時、ひさっしぶりに運転するゴールド免許ドライバーみたいな気分で書き始めることが良くあります。 そんな時、毎回初心者向けのサイトとかを確認したり、jsが動作…

毎回キャッシュを読み込まずにページをロードするようにしたい

CSSやJavaScriptで、変更したのに、変更がきかない! あああああぁあ〜 なぜ〜〜〜〜〜えぇぇ〜 という思いをした方も多いのではないでしょうか。 エンジニアあるある。 そのたんびに、キャッシュを消して再読み込み! とかするわけですけれど、エンジニアは…

JavaScriptで前後の不要な空白を取り除く(trimメソッド)

JavaScriptで、前後に空白がいつの間にか入っていて思惑通り動作しない場合、 trim() を使って、不要な空白を取り除きましょう。 $text.trim(); でokです! trim($変数) じゃないことに注意です。 そんな基本的なミス、誰もしないって? うーむ、何度もして…

AjaxとMySQLとPHP Laravelで郵便番号から住所検索するボタンを実装する

全体像 めちゃめちゃ大まかには、HTML→データベース→PHP Laravel→JS の順で、それぞれ用意していく必要があります。 もう少しブレイクダウンします。↓ HTMLにフォームを用意し、郵便番号入力欄と住所入力欄と検索ボタンを作る MySQLに、郵便番号と住所のテー…

javascriptの名前空間、モジュールパターン(個人的メモ)

※この記事は、様々なソースをもとに個人的に学んだことを未来の自分が見返す目的で一つにまとめたものです。 2019.12 ES2015に則ってletで変数宣言する場合、グローバル汚染は心配無いようです。 この記事は根本から古い議論になっている可能性があります。 …

javascriptの配列入門(超初心者向け、個人的備忘)

javascriptでの配列について、また調べるのが面倒なので、こちらにまとめておきます。 配列の宣言 普通の配列 var array1 = ['値1', '値2', '値3']; 連想配列 var array2 = { key1:1, key2:2, key3:3 }; 文字などを入れる場合は、 var array3 = { usernam…

npm-scriptとAutoprefixerでvendor prefixの付与を自動化する

vendor-prefixをいちいちCan I useで調べて付与するのは当たり前のように面倒なので、npm scriptを使ってできないか調べて見て、できました。 postcssとAutoprefixerをインストール npm i -D postcss-cli autoprefixer -Dは、package.jsonファイルの「devDep…

初めてのnode-sassとnpm scriptでscssファイルをcssファイルにコンパイルする

前回、npmの初めの一歩を書きました。 tacosvilledge.hatenablog.com 今回は、node-sassとcpxを入れてnpm scriptを使えるようにしたいと思います。 サイトのデザインは、scssで書いた方が、cssで書くよりも効率よく書けるので、 scssで書いたものを、cssにコ…

npmって何? 基本的な使い方は?

npmとは? 参考:npm公式サイト docs.npmjs.com npmは、node package managerの略で、JavaScriptの開発者の問題解決や、コードのリユースに便利なツールである。昨今の開発現場では、数多くのパッケージ(モジュール)を使う。npmでは、数多くあるパッケー…

【JavaScript】 勉強のために電卓を作ってみた

「JavaScriptの初心者は電卓を作るとよい」と聞いて、作ってみました。 参考にしたサイトは、以下2つ。 Javascriptで電卓を作ってみた。ソース付き。 | ヤマヤタケシのブログ これは、フォーム(HTML上での表示)まで、javascriptですべて作っていて、結構高…

【JavaScript備忘】JavaScriptのSwitch文でcaseに条件式を入れたい

If else文を習ったら、大体の場合次は「switch」文ではないかと思います。 Switch文は、caseに値を設定し、その値に一致するかどうかで、実行することを変えるというときに使うのがデフォルトです。 こういうかんじ。 --------------------- var rank = 'C';…

【JavaScript】 headタグ内での宣言文

javascriptを使うときは、headタグ内に、以下を追記します。 <meta http-equiv="Content-Script-Type" content="text/javascript" /> そして、html内に、以下タグを追加し、なかにjavascriptを追記します。 <script type="text/javascript"> (ここにスクリプトを記述) </script> 外部読み込みする場合は、src属性を追加する。 <script type="text/javascript" src="xxx.js"></script> この際、タグ内に記述しても出力されない。</meta>…