【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
import/exportとmodule.exports/require - メメメモモ
概要 Node.jsのモジュール読み込み ES6(ECMAScript2015)のモジュール読み込み Typescriptのモジュール読み込み ES6と同じexport/import export =とimport = require() /// reference path まとめ 概要 Node.js、ES6、Typescriptを一気に調べていたせいで、いろいろなパターンのモジュール読み込み方法に出くわして、ちょっと混乱したので、整理しました。 Node.jsのモジュール読み込み Node.jsのモジュール読み込みは以下のような形になります。 // node/myModule.js class myModule { constructor() { console.log('Hello, I am a module'); } hello() { console.log('hello!'
Node.jsのexportsについて - 30歳からのプログラミング
Node.jsにはモジュール機能があり、他のファイルの内容を読み込むことが出来る。 だが、何となくでしか使い方を理解していなかったので、調べてみた。 このエントリのコードは全て、v4.4.3で動かした。 基本 まず、呼び出される側のファイルで、モジュール化する値やオブジェクトをexportsしておく。 そうすることで、その値やオブジェクトに外部からアクセスすることが可能になる。 呼び出す側ではrequire()関数を使い、ファイルを読み込む。 読み込んだファイルから、exportsされている値やオブジェクトにアクセスできるようになる。 // parts.js var value = '値'; var foo = 'foo'; exports.value = value; // index.js var parts = require('./parts.js'); console.log(p
Airbnb JavaScript スタイルガイド() {
javascript-style-guide 常に気をつけたい、JavaScriptへの正しい接し方 View on GitHub Airbnb JavaScript スタイルガイド() { 元文書:https://github.com/airbnb/javascript 常に気をつけたい、JavaScriptへの正しい接し方 Note: this guide assumes you are using Babel, and requires that you use babel-preset-airbnb or the equivalent. It also assumes you are installing shims/polyfills in your app, with airbnb-browser-shims or the equivalent. 注意: このガイドはあなたがB
既存の<form>要素をそのまま利用してAJAXでPOSTする - Qiita
はじめに jQueryを使えばAJAXを利用して画面遷移しないGETなりPOSTなりなんでもできますが、できればJavaScriptのコードはスッキリ書きたい。 そんな想いをいだきつつ、要素が10個近くありつつさらに大量のチェックボックスリストという可変な配列要素を含んだたいへんなformを、画面遷移しないで送らなければならない現実と睨めっこしていたんですが、これがなかなかググっても出てこない。 画面遷移無しのPOSTする方法なんてのは腐るほど出てくるんですが、どれもだいたい空オブジェクト作っては値をセットして送信するというえらく原始的な基本に忠実な手法が出てきます。 最初はform配下のinput要素をfindしてeachで回して～みたいなことしてたんですが、配列になったときとかの動作が闇すぎて使う気になれなくてのっぺりしてきたときに、serializeArray()という救世主を見つけ
DOMの変更を監視するにはMutationObserverを使う – おかかウェブ
DOM 自体の変更をトリガーにスクリプトを実行したいとき、適切なイベントが無く、実装に苦労したことはないでしょうか。 onchange が使えそうですが、change イベントは input や select といったフォームアイテムにしか使えません。 私も、悩んだ末に setInterval を使って無理やり実装したことがあります。 しかし実は、MutationObserver を使うことで、DOM の変更を監視することができます。 監視できる変更には、次のようなものがあります。 ノードの属性の変更 ノードのテキストの変更 ノードの子孫テキストの変更 ノードの子孫ノードの属性の変更 ノードの子孫ノードの追加、削除 参考「MutationObserver – Web API インターフェイス | MDN」 https://developer.mozilla.org/ja/docs/Web/
二章第八回 テーブルの操作 — JavaScript初級者から中級者になろう — uhyohyo.net
テーブルの木構造HTMLを見る限り、上のテーブルの木構造は次のようだと考えられます。ただし、タグとタグの間の改行によって生じるテキストノードは省略しています。 table直下にあるのはtbodyという要素で、trはその下にあります。 詳しくはHTMLを勉強してほしいのですが、tableの中にはtbodyという要素があり、trはその中に入れます。このtbodyという要素は省略可能であり、まったく書かなくても暗黙のうちに存在すると見なされるのです。 他にもtheadやtfootという要素も、tbodyと並んでtableの中に存在する可能性があり、それらの中にもtrが存在する可能性があります。（thead, tfootについては次回詳しく紹介します。） <!doctype html> <html> <head> <title>test</title> </head> <body> <table
jQuery から卒業するための第1歩を polyfills から学ぼう
2014/01/30 | lastmod: 2024/06/29 この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります tech JavaScript jQuery polyfills （2024 年追記）古い記事なので誰も見てないと思いますが、現在 polyfills を使うのは危険なのでやめましょう。もはや機能が足りなくて困るケースはないようなので、使う意味もないかと思います。 https://www.itmedia.co.jp/enterprise/articles/2406/29/news057.html （追記終わり） jQuery というライブラリは非常に便利な JavaScript ライブラリであります。 jQuery 便利！ いやー、便利ですよね。便利すぎて、JavaScript を書いて HTML 要素を何かしようと思ったときに、無条件で使用
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
JavaScriptプログラミング講座【ドラッグアンドドロップについて】
<html> <body> <a id="aaa" href="http://example.com" >このリンクをドラッグ！！</a> <script type="text/javascript"> <!-- // ------------------------------------------------------------ // "aaa" という ID 属性のエレメントを取得する // ------------------------------------------------------------ var element = document.getElementById("aaa"); // ------------------------------------------------------------ // ドラッグ開始時に実行される関数 // ---
Redirecting…
Redirecting… Click here if you are not redirected.
ブラウザの戻るでJavaScriptの効果が残っている時の対処法｜web bibo
JavaScriptで効果を与えたとき、別ページに飛んだあとブラウザの戻るボタンで、その効果が残っている時の対処法です。 例えば、画像にマウスオーバー処理を与えます。その画像をクリックし、別ページに飛んだあとブラウザの戻るボタンで戻るとマウスオーバー時の画像がそのまま残ってしまいます（Firefox、Safariのみ。IEは大丈夫。）これをどうやって解決するかというと window.onunloadを使ってキャッシュを無効に 上記の様な現象が起こるのはブラウザのキャッシュのせいで、これを無効にすればいいのです。 FirefoxやSafariはonunloadイベントがあるとキャッシュしないみたいなので window.onunload=function(){} と書けばOK。 試してみたい方はこのコードを使ってみてください。 <body onload="alert('test');"> と書
人気上昇中のJavaScriptライブラリを調べてみた【2016年版】
新しいWeb開発フレームワークも登場！ 2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する。 ← 前回 連載 INDEX 2016年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2015年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「コンピュータ、電化製品」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、
即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？ ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
htmlのid属性とclass属性の命名はハイフンかcamelかsnakeか - Qiita
CoffeeScript, Dart, TypeScript, jsx, Haxe - Google トレンド
JavaScriptプログラミング講座【ファイルをアップロードする】
アドレスバーのURLを書き換える - Qiita
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
フロントエンドに秩序を取り戻す方法 〜はてなブログ編集画面をリニューアルするためにやったこと〜 // Speaker Deck
