JavaScript｜「含むか」の判定(配列, 文字列) - わくわくBank
「含むか」の判定処理は様々な方法で実装できます。includes、indexOf、test、match、searchなど利用できます。どれを利用したら良いか考えてみます。 const arr = [40, 30, 20, 10] if (arr.indexOf(20) !== -1) { console.log(arr.indexOf(20)) console.log('存在します') } if (arr.indexOf(50) === -1) { console.log(arr.indexOf(50)) console.log('存在しません') } console.log('----------------------------------------') if (arr.includes(20)) { console.log(arr.includes(20)) console.lo
JavaScript (ES2015) 文字列中に変数展開できるテンプレート構文のメモ - かもメモ
JavaScriptで変数を展開した文字列を作成する時、+で文字列連結をしていましたがES2015(ES6)からは``(バッククォート)で囲うテンプレート構文(Template literal)で書くことができるようです。 ※ IEやAndroidでは未対応なブラウザもあるようなので、WEBサイト制作とかの場合はまだバベる必要がありそうです。 ブラウザ実装状況: テンプレート文字列 - JavaScript | MDN テンプレート構文(Template literal)による文字列中での変数展開 var val = "JavaScript" // 今までのやり方 var str1 = "Hello " + val + "!" // => Hello JavaScript! // テンプレート構文 var str2 = `Hello ${val}!` // => Hello JavaScr
JavaScriptでスクロールバーの幅を調べる - #daiizメモ
ウェブページをデザインしていたところ、「スクロールバーの横幅」の値が欲しくなった。 検索してもすぐには見つからなかったので、ChromeのConsoleを開き、自分でwindowオブジェクト内を探しに行くことにした。「スクロールバーを含んだブラウザの横幅（①）」はwindow.innerWidthで得られることは知っていた。 結果 結局、「スクロールバーの横幅」を直接教えてくれるメソッドやプロパティは見つけられなかった。しかし、document.body.clientWidthを使って「スクロールバーを含まないブラウザの横幅（②）」を得ることに成功した。これにより、①と②の差をとることで「スクロールバーの横幅」を得られた。 まとめ プロパティ Live Demo*1 スクロールバーを含んだブラウザの横幅 window.innerWidth -- px スクロールバーを含まないブラウザの横幅
JavaScriptで特定の要素の幅と高さを取得する方法(clientWidth,clientHeight)｜今村だけがよくわかるブログ
JavaScriptで特定の要素の幅と高さを取得する方法(clientWidth,clientHeight) 私個人的なことですが、最近はjQueryやReactなどのライブラリを使わずに、JavaScriptでコードを書く勉強をしています。これがまた、ほとんど経験がないので難しい・・・ ところで「JavaScriptで特定の要素の幅や高さを取得して何かをしたい」という場面って結構あります。 特定の要素の幅や高さを取得する方法はいくつかありますが、今回は「clientWidth,clientHeight」を使う方法について書きました。 clientWidth,clientHeightを使って特定の要素の幅と高さを取得する方法例えば、div要素の幅と高さをJavaScriptで取得する場合は以下のように書きます。 html<div id="box">box</div>CSS#box{ wid
【JavaScript】数値から文字列に変換する - Qiita
JavaScript を勉強することになったのでとりあえず FizzBuzz を書いてみることにしました。 FizzBuzz 関数内において、引数として受け取った値を Number 型から String 型に変換する必要が出てきた際に詰まりました。 そこで、Number 型から String 型への変換方法を調べてみた結果、色々見つかったので残しておくことにしました。 結論を先に書いておく。 Number 型の値をただ文字列に変換したいだけならば、String() で変換するのが一番いいと思う。 String(Number) ただ単純に Number 型のオブジェクト(以下、Number)を String 型のオブジェクトに変換するみたいです。 恐らくこれが最もオーソドックスな方法なのかな？と感じます。
JavaScript 文字列の長さ（バイト数）を取得する
JavaScriptで文字列の長さを取得します。 lengthstr.legnthで文字列の長さを取得できます。 var str = 'abcde'; console.log(str.legnth); // 5 var str2 = 'あいうえお'; console.log(str2.legnth); // 5 String.prototype.bytes = function () { return(encodeURIComponent(this).replace(/%../g,"x").length); } var str = 'abcde'; console.log(str.bytes()); // 5 var str2 = 'あいうえお'; console.log(str2.bytes()); // 15 String.prototype.bytes = function () {
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
Objectに動的にプロパティを追加する - gom68の日記
object 生成後に、宣言とか関数とか使わずにプロパティを追加できるらしい。 by PHP 5.2.6 (Mac OSX) <?php class Test { public $a = 'default'; } $test = new Test(); $test->foo = 'bar'; // add property print_r(get_class_vars('Test')); print_r(get_object_vars($test)); // 実行結果 Array ( [a] => default ) Array ( [a] => default [foo] => bar ) うかつに使うと後から追うのが難しいなーなんて思ってたら、こんなこともできた <?php class Test { public $a = 'default'; } $test = new Test()
jsTree のコンテキストメニューをカスタマイズ - Oboe吹きプログラマの黙示録
jsTree のプラグイン contextmenu は、デフォルトのままではフォルダとファイルのように、 ある種類のノードの配下にノードを作成することができない ＝ファイルの下に、フォルダ／ファイルは作れてはいけないはずだ。。 つまり、ツリー構造を作成できるのは、フォルダのみでファイルではない。 ・・・当たり前の規則だが。。。 jsTree デフォルトの contextmenu をそのまま使うと全てに対して、 配下にノードを作成ができてしまう。 だから、フォルダとファイルのようなツリーでコンテキストメニューを用意する場合 、自分でカスタマイズして書いてあげないとならない。 contextmenu 書込みの準備、 "plugins":[ "contextmenu" ], を書いて、 次にコンテキストメニューの設定を書く。 フォルダとファイルの区別は、icon 属性で区別する制御にする。 ノー
jsTreeのドラッグアンドドロップの制御 - Oboe吹きプログラマの黙示録
jsTree のドラッグアンドドロッププラグイン は、 単に、dnd だけを書くと、 $('#tree').jstree({ 'core':{ ： }, "plugins":[ "dnd" ] )); なんでもかんでも、どこの移動先にもドラッグアンドドロップで移動ができてしまう。 ファイルの下に、ぶら下げるような規則に反することをしない制御をする方法、、 → check_callback : function を書けば良い。 以下、ノードのアイコンを判定し、ルートへの移動を可能にする制御を、"data" : {} の次に書く！ "check_callback" : function(operation, node, node_parent, node_position, more){ if (operation=="move_node"){ if (node_parent.icon !=
正規表現を用いて JavaScript で数値チェックを行う方法
JavaScript の数値チェックに isNaN 関数を利用する人がいますが、あまりオススメできない方法です。むしろ正しい仕様を理解していないのであれば、バグの温床になる危険な関数です。 isNaN を勧めない理由は次のページに詳しくまとめているので、参考にしてください。
【JavaScript】記述方法別の実行タイミングについて - Qiita
JavaScriptを記述する方法はいくつか存在するが、それぞれ実行タイミングが異なる。 ここではそれについてまとめる。 <script>タグ内に記述する <script>タグ内にJavaScriptを記述した場合、スクリプトが実行されるのは<script>タグが解析された直後となる。そのため<script>タグ以降のDOM要素を操作することはできない。 <body> <div id="a"></div> <script> var a = document.getElementById('a'); console.log(a != null); // true var b = document.getElementById('b'); console.log(b != null); // false </script> <div id="b"></div> </body>
JavaScriptのクリックイベントを発火させる方法 - ゆうなんとかさんの雑記帳的な。
最近噂のCookieClickerというゲームがあります。 Cookie Clicker ゲーム内容はクッキーをクリックしたりクッキーを消費して様々なユニットやアップグレードアイテムを購入したりして、ひたすらクッキーを生産し続けるというゲームなのかもはやよくわからないゲームです。 ここ数日急用があったので放置気味でしたが、今のところ始めて3日で、1秒間につき地球上のすべての人にあまねく10枚ずつ以上クッキーを渡せる程度の生産量になりました。通な言い方をすれば約82GCpS*1です。やりこんでいる人は数PCpSを軽く超える生産量だそうです。桁の吹っ飛び具合が人気の秘訣なのでしょうか。 でこのゲーム、実はHTML5でできてるんですよね。しかも、「自動クリック程度はチートじゃないからやってもいいらしい*2」とのこと。ということなので、プログラマーの端くれとしては自動クリックくらいはやってみたいも
連想配列の中から、特定要素の値を取り出してフラットなリストを作る - Qiita
var data = [ { name:"shimizu", address:"takasaki", img1:"shimzu.jpg", img2:"takasaki.jpg" }, { name:"hoge", address:"maebashi", img1:"hoge.jpg", img2:"maebashi.jpg" }, { name:"test", address:"kiryu", img1:"test.jpg", img2:"kiryu.jpg" }, { name:"bob", address:"fujioka", img1:"bob.jpg", img2:"fujioka.jpg" }, { name:"tanaka", address:"ota", img1:"tanaka.jpg", img2:"ota.jpg" }, ] var imgFileList = dat
ちょっとつまったjsでのobject⇒array変換 - なつきの備忘録
以前業務でajaxで取ってきた var obj = { 1: 'hoge',2:'huga',3:'piyo',... };のようなjson形式のobjectを var obj = ['hoge', 'huga', 'piyo',...];のようなarray形式で扱いたくてつまった時のメモ。 以下のようにすることで解決。 Object.keys(obj).map(function (key) {return obj[key]}) 仕組みとしては、 Array.prototype.map() - JavaScript | MDN mozillaのリファレンスにあるように、map()を使ってobjectのvalueをarrayに入れる感じでしょうか。 keyはいらないけど、valueだけを単純なforループで扱うなどの限定的な場面ではvalueの取扱が楽になるかも。 ……とは言え、あまり使い所
JavaScriptのオブジェクトで反復処理を行なう方法 - Qiita
JavaScriptの配列（Array）には、.filter()や.map()などの反復処理を行なうメソッドが定義されています。1 オブジェクトでも同様の処理を行ないたいところですが、残念ながらObjectにはそれらのメソッドが定義されていません。 ここでは、JavaScriptのオブジェクトで反復処理を行なう方法を2通り紹介します。 キー配列に変換 Object.keys()でキー配列に変換すれば、配列の反復メソッドが使用できるようになります。 この方法ではいったん配列に変換しているため、終端操作で直接オブジェクトを生成できません。
Object.assign()を使ったコピーいろいろ - Qiita
Object.assign()を使ったコピーについて調べたことを整理する。 Object.assign(target, ...sources) 1個以上のソースオブジェクトについて、その直接所有(own)で列挙可能なプロパティの値をすべてターゲットオブジェクトにコピーして、新しいオブジェクトを生成します。 第一引数に指定したオブジェクトに第二引数以降の全てのオブジェクトのプロパティを第一引数に指定したオブジェクトにコピーしてくれる。 第一引数に無名オブジェクトを指定することで、コピーした内容の新規オブジェクトを作成できる。
[Web] Webページ上でオンライン/オフライン状態を知る、ネットワークの変化に気付く - YoheiM .NET
こんにちは、@yoheiMuneです。 最近知った驚いた機能で、なんとJavaScriptでネットワーク状態を把握する機能があります。 今日はその紹介をブログを書きたいと思います。 現在のネットワーク状態をJavaScriptで知る なんと、以下の１行で現在のネットワーク状態が、オンラインかオフラインかを知ることが出来ます。 var isOnline = navigator.onLine; こんな簡単にできる事を知ってビックリしました。onLineプロパティを使えるか否かも考慮して、以下のようなコードを書くと、 現在のネットワーク状態を知ることが出来ます。 if (navigator.onLine === true) { alert("current network status is online"); } else if (navigator.onLine === false) { a
![[Web] Webページ上でオンライン/オフライン状態を知る、ネットワークの変化に気付く - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/2cc5747ae72ce23305ad10c40e244a5ff6bd3427/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F139.png)
import, exportがエラーになる
import, exportを使用したいのですが、エラーになってしまいます。 Uncaught SyntaxError: Unexpected identifier どこに問題があるのでしょうか？ const.js export const DATA = { test: "qqq" }; html <html> <head> <meta charset="UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> </head> <body> <div id="text"></div> <script src="../js/jquery-2.2.4.min.js"></script> <script type="text/javascri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...