varとletの違い 物心ついたときからvarを使わずletを使えばいいとだけ学んでいたのでvarとletの違いをあまり気にしたことがなかった。 letとvarの違いについて以下の通り試して理解を深めたという話。 クイズ形式にしたらおもしろいかと思ってプログラムの結果を隠してみた。 varの関数スコープを確認
実はletのメモリ効率が悪かった - Qiita
varとletの違い 物心ついたときからvarを使わずletを使えばいいとだけ学んでいたのでvarとletの違いをあまり気にしたことがなかった。 letとvarの違いについて以下の通り試して理解を深めたという話。 クイズ形式にしたらおもしろいかと思ってプログラムの結果を隠してみた。 varの関数スコープを確認
【JS】クリック１回目のイベントだけ発生しない【Clipboard.js】
Haml（HTML abstraction markup language）は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。 JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
【JavaScript】 コンストラクターとは？関数とは違うのか？
コンストラクター関数とは、new式を使用して新規オブジェクト（インスタンス）を作成する関数です。 次のスクリプトコードは、コンストラクター関数の定義と使用法の一番簡単な例です このコードでは、次のことをおこなっています。 関数a内で、オブジェクトthisのxプロパティに、値をセットしている。オブジェクトthisをリターンしている。new式で、関数aを呼び出しているこのとき関数aは、コンストラクター関数と呼ばれます。 このコードで何が起こっているのか、順番に見ていきます。 コンストラクター関数をnew式で呼び出すと、コンストラクター関数のprototypeプロパティを継承したthisという名前の新規オブジェクトが作成される。これは、JavaScriptの内部処理でおこなわれます。 参考記事： ■【JavaScript】 new演算子は何をやっている？ 関数内コードで、thisに新規のプロパテ
君はもうJavaScriptの標準入出力を体験したか！？ - コンパイラかく語りき
僕は先日はじめて体験しました（遅い） 自分ができるようになったのを良いことに、自慢気に書いていこうと思います。JavaScriptの標準入出力について。 標準入出力って？？ Web系の人にはピンと来ないかもしれませんね。 ターミナル（コマンドライン）上での入力や出力のことです。 C言語を触ったことがある人は「ああ、あれのことね」って感じかもしれません。あるいは、rubyでも書けるみたいです。 JavaScriptで？？ JavaScriptというか、Node.jsですね。すみません。 公式DL：https://nodejs.org/en/download/ ポイントはreadlineモジュール readlineモジュールというものを使うようです。 qiita.com ひとまず書いてみました。 gistff1ffbb21b92cf3e4d4e ユーザーから入力を受け付け、control＋ｃが
スケジューリング: setTimeout と setInterval
関数をすぐには実行させず、ある時点で実行するようにしたいことがあります。それは “呼び出しのスケジューリング” と呼ばれます。 そのための2つのメソッドがあります。: setTimeout は指定時間経過後、一度だけ関数を実行します。 setInterval は各実行の間は指定した間隔で、定期的に関数を実行します。 それらのメソッドは JavaScript の仕様の一部ではありません。しかしほとんどの環境は内部スケジューラをもち、それらのメソッドを提供します。特に、これらはすべてのブラウザと Node.js でサポートされています。
jQueryで簡単にできる！アニメーションやスライドショーの作り方 | 侍エンジニアブログ
jQueryで簡単にアニメーションを実現したい スライドショーなどのWebコンテンツを作ってみたい jQueryを利用して何か簡単なサンプルデモを作りたい jQueryの学習がある程度進んだら、早速自分でも何かWebコンテンツを作ってみたいと思う人も少なくないでしょう。 そんな時に、まず試してみたい練習サンプルとしてアニメーションの実装や画像を利用したスライドショーを作ってみることをオススメします。なぜなら、それほど難しくないにも関わらず成果物として面白いものが作れるからです。 しかし、いざ始めようと思ってもどこから手を付けて良いのか分からないという人もいるでしょう。 そこで、この記事では初心者でも今日からjQueryを利用した簡単なサンプル開発について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。 一人でも多くの方がjQueryの不安を解消できれば幸い
【jQuery】選んだ画像が拡大表示になるモーダルの作成方法を解説します！ | Webクリエイター自省録
<ul> <li><a href=""><img src="img1.jpg" alt=""></a></li> <li><a href=""><img src="img2.jpg" alt=""></a></li> <li><a href=""><img src="img3.jpg" alt=""></a></li> </ul> <div class="modal"> <div class="bigimg"><img src="" alt=""></div> <p class="close-btn"><a href="">✖</a></p> </div> サンプルでは、「ul」で複数画像が並ぶリストをマークアップしています。 その後に「modal」のクラスをつけたdiv要素を置き、その中に「bigimg」のクラスを付けたdiv要素を入れ、さらにその子要素として「img」タグを記述します。
jQueryでランダム抽選プログラムの作り方を解説 | キノコログ
jQueryで、選択した文字の中からランダムで1つを選ぶ抽選プログラムの作り方を解説します。 簡単なおみくじや占いなど、サイトやブログのちょっとしたお遊びコンテンツとして楽しいプログラムです。 まずは完成例をご確認ください 今回解説するソースコードを書くと、こんな感じの抽選プログラムが実現できます。 作ってみたいと思った方は下記のソースコードをチェックしましょう！ JavaScript(jQuery) 各項目に解説を付けたJavaScriptプログラムを書きましたのでご確認ください。 もちろん、jQueryライブラリの読み込みは必須です。 <!-- jQuery読込 既に読み込んでいる場合は不要 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!--
JavaScript：即時関数にアロー関数を使うと動かないことがある
こんにちは、さち です。 JavaScript で変数名を汚染しないために使う「即時関数」。 先日、「即時関数」にアロー関数を使ったときに動かないことがあったので、備忘録として記事を書いておきます。 即時関数の書き方は2種類 以前から使われている「即時関数」には、下記のように記述方法が2種類あります。違いは、末尾のカッコの順番です（3, 7行目）。 (function() { console.log('OK'); })();// OK (function() { console.log('OK'); }());// OK この2種類の即時関数はどちらも正常に動作します。どちらを使うかは個人の好みによるところです。 「アロー関数」だと動くのは1種類だけ ES2015(ES6) から、「アロー関数」という function を使わずに無名関数を書ける書式（関数リテラル）ができました。（関数の定
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
JavaScript の基礎
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
JavaScript とは - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
[WordPress] WordPress から JavaScript へ値を渡す方法
必要となる場面は少ないのですが、たまに WordPress から JavaScript へ値を渡したい時があるのでその方法のメモです。 WordPress から外部の JavaScript ファイルへ配列の値を渡す WordPress のオプション値など PHP の値を外部の JS ファイルに渡したい場合は、wp_localize_script() という関数が WP には用意されているのでこれを使用します。 wp_localize_script() を使用すると PHP の連想配列を JS のオブジェクトとして扱えるようにしてくれます。 wp_localize_script の使用方法 functions.php 又は プラグインファイルに以下のように記入します。 <?php wp_localize_script( $handle, $name, $data ); ?> $handle
![[WordPress] WordPress から JavaScript へ値を渡す方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/3640d73492cee231d8a08ed3aa5cf4f61f24105c/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2013%2F11%2Ficon.jpg)
ストリームの手引き | gulp 日本語リファレンス | js STUDIO
このドキュメントはストリームを使用したnode.jsプログラムの基本的な書き方の手引書になります。 翻訳元の記事はgulpのドキュメントからリンクされていたGitHub上のsubstack氏のstream-handbookであり、 あくまでgulpをはじめとしたタスクランナーの内部処理で重要な役割を果たすファイル・ストリームについて書かれた手引書(handbook)であり、 gulpのドキュメントの一部というわけではありません。 写本 イントロダクション 何故ストリームを使用するべきなのか 基本 組み込みストリーム 制御ストリーム メタストリーム ステートストリーム HTTPストリーム IOストリーム パーサーストリーム ブラウザストリーム HTMLストリーム オーディオストリーム RPCストリーム テストストリーム パワーコンボ 写本 この手引書は、次のようにnpmのコマンドを実行するこ
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。 数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。 フロントエンド入
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Java - Manual - Customers Mail Cloud
教育用マイクロコンピューター「micro:bit」を実際に動かしてみよう【どれ使う？プログラミング教育ツール】
https://yukimonkey.com/fix-error/cros1/
Demos and Source Code of www.codershood.info tutorials | www.codershood.info