JavaScriptでlastIndexOfメソッドを使って文字列を後ろから検索する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでlastIndexOfメソッドを使って文字列を後ろから検索する方法について現役エンジニアが解説しています。lastIndexOfメソッドとは、指定した文字列が最後に現れたインデックス（文字数）を返します。前から検索するindexOfメソッドもあります。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 JavaScriptでlastIndexOfメソッドを使って文字列を後ろから検索する方法について、TechA
mouseenterとmouseoverの違いなどDOMイベントの発生状況を可視化して調べてみたよ - 銀の弾丸
HTML5のDOMイベントに、mouseenter と mouseoverという、よく似たマウスイベントがあります。ここには、その違いについて調べたことを書いておきます。 どちらもマウスポインターが要素の上に入ってきた時に発生するイベントで、それぞれに対応する「マウスポインタ―が要素から外れた」時のイベントとして mouseleave と mouseout もありますね（mouseenter には mouseleave 、mouseover には mouseout が対応します）。 この2種類のイベント間には、発生要因や伝播（バブリング/プロパゲーション）に関する違いがあります。 私は最近まで、この違いを意識しておらず「歴史的理由による別名？」かと思っていて、その場で適当に思いついた方を使っていました。 先日ふと疑問に思ってMDNで調べてみたら、どうやら上記のように明確な違いがあると知った
JavaScript不要！CSSだけで出来るドロップダウンメニューの実装方法 | ビジネスとIT活用に役立つ情報（株式会社アーティス）
webサイトを作成しているとドロップダウンメニューの設置をすることがよくあります。 メニューがグローバルナビゲーションに収まりきらない場合や、階層が多いサイトなどで重宝する形式です。 今回はこのドロップダウンメニューをCSSのみで実装する方法をご紹介いたします。 ドロップダウンメニューとは ドロップダウンメニューとは、メニューのタイトル部分をクリックもしくはホバーしたときに、下に垂れ下がるようにして表示されるメニューのことです。 今回実装するのは、弊社サイトでも採用しているような、グローバルナビゲーション（以下Gナビ）に付随するような形で用いられるドロップダウンメニューです。 該当するGナビタイトルにマウスホバーすると、その下にドロップダウンメニューが表示され、該当のGナビタイトルもしくはドロップダウンメニューからマウスが離れると非表示になるという仕様で実装していきます。 Gナビ部分の実装
関数リテラルを使って関数を定義する(無名関数)
JavaScript では関数を定義するための方法として関数リテラルを使って定義することができます。関数リテラルを使って定義した関数は、変数に代入したり関数を呼びだす時の引数として指定することができます。また関数リテラルを使う場合は、名前のない関数である無名関数(匿名関数)を作成することもできます。ここでは JavaScript にて関数リテラルを使った関数の定義を行う方法について解説します。
JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する
2023年2月7日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 ↑私が10年以上利用している会計ソフト！ この記事は動画でも紹介しています。動画派の方はこちらを御覧ください！ このテキストを実装したい！ Macbook Proの紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね！ Intersection Observerとは？ 従来、スクロールに合わせて要素を操るには scroll というイベントを利用していました。ただ、それだ
【JavaScriptの条件分岐】if文の書き方/使い方 - サンプルコードとあわせて解説
【JavaScriptの条件分岐】if文の書き方/使い方 - サンプルコードとあわせて解説 JavaScriptでは条件分岐は「if」文または「switch」文で行ないます。今回は特に基礎ともいえるif文について、サンプルコードを見ながら機能や記述方法について詳しく解説していきます。
JavaScriptの構文チェックが出来るオンラインツールを紹介！
この記事では、JSの構文チェックができるオンラインツールを紹介しています。 ブラウザ上でコードをペーストするだけで構文チェックをしてくれるので、JSの開発をより効率的に進めることができます。 2つ紹介しているので、用途に合わせて使い分けてみてください！
JavaScript講座のリンク集【Udemy】
こちらの記事から約1か月。ようやく、『Udemy』向け第2弾動画を全て撮影し終わりました。こちらからご覧いただけます。最新クーポン情報はこちら定価9,600円ですが、クーポン経由で大幅割引になります。前回の経験も活かし、動画96本でリリースいたしました。時間にして約9時間半。9時間半といっても、説明済みの箇所はコードのコピーペーストなども使っているので、実際にコードを書こうとすると、10時間～11時間くらいの分量になるのではと思います。JavaScript初心者向け動画を撮影したけっかけ2020年2月に第1弾、『PHP/Laravel』動... section1 JavaScriptの基礎 3 JSの環境説明 GoogleChrome VisualStudioCode Babel webpack Node.js 9 JSの連想配列 【JavaScript】Mapを正しく使うためにまとめた情
ウインドウサイズを取得する 【JavaScript 動的サンプル】
JavaScriptでウインドウサイズを取得する場合、取得する箇所により関数(命令)が異なります。 一般的なスマートフォンでも下記のJavaScriptで画面サイズやブラウザサイズを取得することができます。 サンプルは全てライセンスフリーとしていますので、改変や再配布も自由です。（コメントを残していただけると幸いです） ただし、動作の保証は一切行っておりませんのでご理解の上、ご利用ください。
JavaScriptでwindowの幅による条件分岐を作る方法｜DESIGN REMARKS [デザインリマークス]
サイト構築をしていると様々な場面で条件分岐が必要になることがありますよね。特にレスポンシブデザインになってからはウィンドウ幅による条件分岐をよく使います。 CSSであればメディアクエリーでやればいいのですが、JavaScriptの場合にはどうしていますか？普通にウィンドウ幅を取得して分岐ということが多いかと思いますが、今回は私なりの方法をご紹介します。 まず正確なウィンドウ幅を取得します。 ウィンドウ幅を取得するにもスクロールバーを含めたり含めなかったりと色々な方法がありますが、今回はCSSのメディアクエリーの反応と同じにするため、スクロールバーを含めた値を取得することにします。ここが間違っているとその先が全部狂ってしまうので、以下の記述で正確な値を取得しましょう。 $windowWidth = window.innerWidth; javascriptでのwindow.innerWidt
![JavaScriptでwindowの幅による条件分岐を作る方法｜DESIGN REMARKS [デザインリマークス]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1df2ffc9c393e7fe206a538b68990e865bac68fa/height=288;version=1;width=512/https%3A%2F%2Fdesign-remarks.com%2Fwp-content%2Fuploads%2F2018%2F11%2Fwindow-width-branch_1.jpg)
【JavaScript】return falseの意味について総まとめ。コード付で解説 ｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ
これをコードで見てみましょう。 親子関係にあるdiv要素があります。それぞれ色のついた部分をクリックしたらアラートがあがるようにしています。 子要素(青い部分)をクリックすると、バブリングにより親要素のクリックイベントも実行されることが確認できると思います。 このイベント伝播の制御に関わってくるのが return false preventDefault() stopPropagation() などになります。順番に見ていきましょう。 return falseを使ってイベント伝播を制御する では実際にreturn falseを使用して親へのイベント伝播を止めてみましょう。 ここで超重要なのは プレーンなJavaScriptとjQueryでreturn falseの挙動が異なる ということです。 先に結論から言うと、 となります。 実際にコードで見てみましょう。 jQueryでreturn
「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開
「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開 Pythonの主要なディストリビューション「Anaconda」などを提供しているAnaconda社は、HTML文書の中にJavaScriptと同じようにPythonのコードを記述し、実行可能にする「PyScript」をオープンソースで公開しました。 Did you hear the news from PyCon!? We are thrilled to introduce PyScript, a framework that allows users to create rich Python applications IN THE BROWSER using a mix of Python with standard HTML! Head to h
アンカーリンク〜様々な状況に対応できるJavascript記述方法〜 | デザインやWEBに関する情報を発信する【まるログ】
アンカーリンクにはページ内リンクや、ページをまたいで特定の場所にリンクさせる方法があります。特定の場所へリンクさせることができるので便利ですが、ヘッダーなどがフローティングでページ上部に固定されている場合は、何も対策をしないとアンカー位置がそれらのナビと重なってしまいます。今回はその対処法を紹介したいと思います。 デモページ デモページは前提として、ヘッダーがフローティングしていて、各ページのタグに固有のidが指定されているものとします。 source1：ページ内リンク（ページ内アンカーリンクを押した際の挙動） $(function () { var headH = $("header").outerHeight(); //ヘッダーの高さを取得 var animeSpeed = 500; //アニメーションスピード $("a[href^='#']").on({ "click": funct
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
ページ内移動（アンカー）、指定したURLへ移動｜window.locationオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room
移動先となる場所には、<a name="アンカー名"></a>のように、a要素のname属性にアンカー名を指定します。 例えば、ページの先頭に<a name="pagetop"></a>と記述しておくと、ページの要所要所で <a href="#" onClick="location.hash='pagetop'; return false;">先頭へ</a> と記述したリンクをクリックすれば、ページの先頭へジャンプさせることができます。 このhashプロパティを使用せずに、<a href="#pagetop">先頭へ</a>と記述しても同様にページの先頭にジャンプさせることができます。 オブジェクト名windowは省略可。 サンプルを見る <a name="pagetop">-------------------------ページの先頭です-------------------------
【Labs】JavaScriptで振り分ける方法２パターン
こんにちは（・∀・） 今日はJavaScriptで振り分ける方法２パターンをご紹介します。 JavaScriptとレスポンシブデザインの組み合わせ レスポンシブデザインのサイトでスマホ向けとPC向けでJavaScriptを使い分けたい場合は多くあると思います。 スマホ向けのページにはJavaScriptを使いたいけどPC向けのページではJavaScriptは必要ない、逆の場合もあれば、またはそれぞれ別のスクリプトを使用したいこともあります。 Contents Windowサイズで振り分ける 要素の有無で判別 Windowサイズで振り分ける Windowサイズで振り分ける方法です。 サンプル <script> $(function(){ if($(window).width() < 769){ //forスマホ }else{ //forPC } }); </script> 画面サイズで振り分
【超簡単】JavaScriptライブラリaos.jsの使い方を解説！ | 模写修行メディア
現在、多くのwebサイトがアニメーションを取り入れています。 特に、スクロール連動型アニメーションを取り入れているサイトは誰でも1度はみたことがあるのではないでしょうか？ 今回は、効率よくサクッとスクロールアニメーションが実装できるJavaScriptのライブラリ、AOS(aos.js)を紹介します。 JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。 JavaScriptの勉強ができるおすすめの本やサイト紹介！ 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
【JavaScript入門】比較演算子の使い方まとめ (==/===/OR/AND) | 侍エンジニアブログ
基本的な使い方 それでは、比較演算子の種類が分かったところで、簡単な使い方について学んでいきましょう。例えば、左辺が右辺より大きい状態を表す「 > 」を使ったIF文のコード例を見てみます。 if(【値1】>【値2】) { //値1が大きい場合の処理（trueの処理） } else { //値1が大きくない場合の処理（falseの処理） } この例の場合、条件式に「 > 」を使っているので、「値1」が「値2」よりも大きい場合に「true」となります。2つの値を比較することで「true / false」の結果を取得できるので、条件式が必要なプログラムに比較演算子は欠かせない存在となるわけです。 ちなみに、IF文についての基本的な使い方や活用プログラム例、他の比較演算子を使った事例などを次の記事で詳しく解説しているのでぜひ参考にしてみてください！ 数値の比較 それでは、比較演算子を使った具体的な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
three.js - examples
JavaScript
