http://js2.coffee/
The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js | Codrops
If you are comfortable with 3D modeling software, you can create your objects there and simply import them into your Three.js project. This solution won’t be covered in this tutorial but we will instead create our objects using the primitives available in Three.js in order to get a better understanding of how they work. Three.js has already a great number of ready-to-use primitives like a cube, a
jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
JavaScriptで入力文字チェック:JavaScript
[html] <TABLE> <TR> <TD>ID<span style="color: #FF0000;">*</span></TD> <TD><INPUT type=text name=Id maxlength=4 value="" style="width: 50px;"> (0000)</TD> </TR> <TR> <TD>氏名<span style="color: #FF0000;">*</span></TD> <TD><INPUT type=text name=Name value="" style="width: 130px;"></TD> </TR> <TR> <TD>郵便番号<span style="color: #FF0000;">*</span></TD> <TD><INPUT type=text name=PostNo maxlength=8 width=70p
入力チェック（正規表現含む）｜formオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room
<script type="text/javascript"> /** * [関数名] chkRegEmail * [機 能] 正規表現によるメールアドレス（E-mail）チェック * [引 数] * @param str 入力された文字列 * [返り値] * @return true(E-mail形式である場合) | false(E-mail形式でない場合) */ function chkRegEmail(str){ /* E-mail形式の正規表現パターン */ /* @が含まれていて、最後が .(ドット)でないなら正しいとする */ var Seiki=/[!#-9A-~]+@+[a-z0-9]+.+[^.]$/i; /* 入力された値がパターンにマッチするか調べる */ if(str!=""){ if(str.match(Seiki)){ alert(str.match(Seiki
Finally, CSS In JS! Meet CSSX — Smashing Magazine
Imagine a web component distributed as a single .js file and containing everything. We would still have our basic style sheets, but the dynamic CSS would be a part of JavaScript. Now this is possible, and one way to achieve it is with CSSX. Similar to JSX, CSSX offers encapsulation. Being able to see all parts of a single component is a big step forward. The separation of concerns defined developm
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
べき乗演算子が実装された - JS.next
概要 Math.pow関数の代わりに新しい演算子「 ** 」でべき乗の演算ができるようになった。 例 これが n = Math.pow(3, 2) console.log(n) // 9 n = Math.pow(n, 2) console.log(n) // 81 こう書ける n = 3 ** 2 console.log(n) // 9 n **= 2 console.log(n) // 81 問題 これはどうなるだろうか？ console.log( - 3 ** 2 ) 答えは『 SyntaxError 』である。 「 - 3 ** 2 」は「 (- 3) ** 2 」と「 - (3 ** 2) 」のどちらで評価されるか予想しづらい。 それは他の単項演算子についても言えるので、べき乗演算子の左辺に単項演算子が用いられた式を置くことは禁止されている。 そのため、左辺に単項マイナス演算子を
新人研修をクライアントサイドJavaScriptで行いました。 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前提条件 被験者は、 プログラミング未経験 大学学部卒 文系 事前課題 入社前に課題をやってもらっています。 自己紹介用のHPを作成 ドットインストールのJS入門 javascripting-jp 基本方針 対象ブラウザ Google Chrome ただし、なるべく標準的なプログラムを書きます。 ライブラリを使わない 「ライブラリの使い方を覚える」ことに気をとられないために、ライブラリは使いません。 一度に覚えることが多すぎると、被験者が混乱すると考えました。 以下の仮説に基づいています JavaScriptを理解していれば、ライブラリ
JavaScriptプログラミング講座【DataTransfer クラスについて】
<html> <body> <div id="aaa" draggable="true" style="width:400px; height:300px; background:#fcc;"></div> <script type="text/javascript"> <!-- // "aaa" という ID 属性のエレメントを取得する var element = document.getElementById("aaa"); // ------------------------------------------------------------ // ドラッグを開始した時に実行されるイベント // ------------------------------------------------------------ element.ondragstart = function
ファイルをダウンロードさせるには？［JavaScript］
リンクをクリックするだけでファイルをダウンロードできるようにするには、HTML5のdownload属性を使う方法とJavaScriptコードを使う方法がある。 連載目次 Webページで、エンドユーザーにファイルをダウンロードさせたいことがある。ZIPファイルなどはHTMLでリンクを記述すればよいのだが、テキストファイルやPDFファイルなどのリンクはダウンロードされずにWebブラウザで開いてしまう。何とかならないだろうか？ 本稿ではJavaScriptでファイルをダウンロードさせる方法を解説する。 HTML5のdownload属性 JavaScriptを書き始める前に、HTML5での解決策を紹介しておこう。 リンク（HTMLの<a>要素）には、HTML5でdownload属性が追加された。この属性に対応しているブラウザであれば、テキストファイルやPDFファイルなどでもリンクのクリックでファイ
JavaScriptのイベントハンドラ一覧｜イベント｜JavaScript/DOM｜PHP & JavaScript Room
イベントハンドラ一覧 onBlur／onFocus〔フォーカスが移動した時に処理を行う〕 onChange〔フォームの入力値、選択が変更されたときに処理を行う〕 onSelect／onSelectStart〔テキストが選択された時に処理を行う〕 onSubmit／onReset〔フォームの送信時、リセット時に処理を行う〕 onAbort／onError〔画像読み込み時に処理を行う〕 onLoad／onUnload〔ページ読み込み時、ページの切り替え時に処理を行う〕 onClick／onDblClick〔クリック、ダブルクリックされた時に処理を行う〕 onKeyPress／onKeyDown／onKeyUp〔キーの状態に応じて処理を行う〕 onMouseOut／onMouseOver／onMouseDown／onMouseUp〔マウスを乗せたり離した時、マウスでクリックした時に処理を行う〕
JavaScript によるフォームの送信 - ウェブ開発の学習 | MDN
ユーザーが HTML フォームを送信する場合、例えば送信ボタンをクリックすると、ブラウザーは HTTP リクエストを送信してフォーム内のデータを送信します。しかし、この宣言的な手法ではなく、ウェブアプリでは、フォーム送信を期待するエンドポイントにプログラムでデータを送信するために、 fetch() などの JavaScript API を使用することがあります。この記事では、この手法が重要なユースケースである理由と、その方法について説明します。 標準の HTML フォーム送信は、フォームデータの送信に関するこの記事で説明されているように、データが送信された URL を読み込みます。つまり、ブラウザーウィンドウが全ページ読み込みでナビゲートされるということです。 しかし、多くのウェブアプリ、特にプログレッシブウェブアプリや単一ページアプリは、サーバーからデータをリクエストし、ページの関連部分
フォーム送信｜formオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room
フォーム送信時のチェック処理方法〔ボタンの種類でイベント・メソッドを使い分け〕 action/methodを指定してフォーム送信〔action/methodプロパティ指定〕 target先を指定してフォーム送信〔targetプロパティ指定〕 フォームデータのエンコード形式を取得・設定〔enctypeプロパティ〕 ラジオボタンの選択肢により送信先変更 送信時にフォームのエレメントを有効化する 〔disabled〕 フォームをリセット（入力値をクリア）する〔resetメソッド〕 送信ボタン・クリアボタンを画像ボタンにする〔イメージボタン使用/スタイルシート使用の2サンプル〕 フォーム名を取得〔nameプロパティ〕 フォームのエレメント情報を取得〔elements[]〕 フォームのエレメント数を取得〔lengthプロパティ〕 フォーム、エレメントのタイプや名前を取得 フォーム送信時のチェック処理
javascriptを使ったSEO対策まとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 一昔前まではjavascriptを使ったSEOに弱いというのがあったりしましたが、今ではGooglebotが大分賢くなりjavascriptを実行できるようになってきてます。 とはいえ何も考えなくてもいいかというとそうでもないので、javascriptを使った場合にSEO対策として意識しないといけないことをまとめてみました。 いろいろ書きましたが、 Hisory APIを使ってURLをきちんと書き換えよう っていうのが主です。(pjaxと呼ばれている手法です） クリックやスクロールでDOMを生成するコンテンツはインデックスされない ペー
JavaScriptは如何にしてAsync/Awaitを獲得したのか Qiita版 - Qiita
はじめに JavaScriptは如何にしてAsync/Awaitを獲得したのか - がおさんち 技術部屋 ※事前に↑の記事は読まなくても大丈夫です という記事を、以前に個人ブログの方に書いたのですが、私も今年からはQiita始めたので、この記事をリファインして再度書いてみようと思います。 また、この記事では↑の記事では書ききれなかった話もいくつか増やしています。 例えば、不定回数実行されるPromiseの話だとか、非同期処理における例外処理周りの面倒くさい話だとか。 そういうちょっとだけ高度な話も混ぜつづ、前回書いたものよりもクオリティを上げるのを目標にします。それではいきます。 第一章 ～人類はsetTimeoutを採用しました～ 古代のJavaScriptで、以下のような処理をしたい場合、どうしていたでしょうか。 ブラウザ更新直後に『a』を表示し、その2秒後に『b』を表示し、更にその1
jQueryで「Now Loading-30%」みたいなプリローダーを作る方法
フラッシュサイトの専売特許だったNowローディング（プリローダとも）ですが、jQueryやHTML5の登場で、最近では、非フラッシュサイトでも見かけるようになりました。この記事では、jQueryを使ってプレローダーを表示する方法を考えて見ます。 デモ 今回作るプリローダーのデモです。一度読み込むとキャッシュされてしまうので、もう一度みたい方は、ブラウザをキャッシュを消して見てください。 デモ 考え方とコード イメージファイルが重いサイトの場合であれば、イメージをプレローディングしながら、読み込んだイメージ数に応じた％を表示することでプリロード します。すべて読み込んだらメインコンテンツを表示します。 このサンプルコードでは、画像のロードイベントを拾って読み込んだイメージをカウントし、%とプログレスバーの表示を変えています。 <!DOCTYPE html> <html> <head> <sc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.asquare.net/javascript/tests/KeyCode.html
instanceof - JavaScript | MDN
JavaScript プリミティブ型 (基本データ型) | yunabe.jp