Mozilla CorporationでJavaScriptのエバンジェリストとして働く、John Resig氏によって作られたJavaScriptライブラリ。メソッドチェーンで処理をどんどんつないでいける特徴を持つ。 モットーは「Writing JavaScript code should be fun.」。
このブログのjQueryをVue.jsにリプレースしてる。 あわせてよみたい このブログのjQueryをVue.jsにリプレースしてる。 日曜の夜であるな。今日はちょっと遊びすぎて押しちゃってるのでさっさとブログを仕上げて、家事諸々をして風呂入って寝てしまおう。うちの会社は公休日はないので普通に出勤なんだよね。 まぁ、今日はそこそこ遊ぶことができてストレス解消にはなった。この上部にある記事要約のパーツをVue.jsで書き直すプログラミング遊びをしていたのである。 ちなみにソースコードについてはGithubで公開してるので、ソースを読める人は読んでみてもいいかもしれない。 github.com …
皆さん こんにちは、読書大好き大化社員の紙魚(シミ)ちゃんです。 普段はPHPやC#を使って開発をしています。 しかしWeb開発では別言語を使う人の画面を修正する場合も多く、そんな時よくjQueryで苦労していました。 今回は そもそもjQueryって何? について書いてみようと思います。 jQueryとは JavaScriptのコードを簡潔に書くことを目的に開発されたライブラリです。 短いコード量で動かせることや、どのブラウザでも同じコードが使えるため効率的に開発できることなどがメリットとして挙げられます。 最近はTypeScriptが出てきたために使用されなくなってきているそうですが、Ty…
// // ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }) }) // ]]> ブログ記事のカテゴリ名をメニュー名にするのですが、 そのカテゴリの更に詳細なカテゴリ名もメニューに表示したいと思うことがあります。 例えば、プログラミングのカテゴリの中には、C言語やC++などありますが、 C言語やC++もメニューに表示したい場合には、階層型メニューがわかりやすいです。 ここでは、jQueryを作った階層型メニューの作り方を書いていきたいと思います。 jQuery…
HTML・cssの課題で作成したサイトに動きを付けてみましょう! 下記は復習と、新しく覚えたいことを記録しておきます。 手探りでの作成なので、きっとコードがごちゃごちゃで、お恥ずかしいですが、記録として残しておきます。お気づきの点がありましたら教えて頂けたら嬉しいです! 01. 課題①:ドロワーメニューの実装 ≪HTML≫ まとめ ≪CSS≫ まとめ 新しく覚えておきたいこと ≪jQuer≫ まとめ 課題②:ページトップへ戻るボタンを付ける ≪HTML≫ まとめ ≪CSS≫ まとめ ≪jQuer≫ まとめ 覚えておきたいこと 01. 課題①:ドロワーメニューの実装 まず、こちらのサイトを参考に…
前回に引き続きjQueryについて学んでいきましょう。 メソッドとパラメーター メソッドとパラメーターについて jQueryの代表的なメソッド 情報の追加と変更 要素の挿入と削除 属性の取得、変更、追加、削除 class属性の追加と削除 cssの取得、設定 cssの複数の設定方法 メソッドチェーン メソッドを使用したアニメーション 代表的なメソッド一覧 イベントの監視・構文 .on()を使った主なイベント処理 クリックイベントの例 hoverイベントの例 ワンポイント【いろいろなイベント構文の書き方】 メソッドとパラメーター 前回、jQueryはjQuery("セレクタ").メソッド("パラメ…
DOM操作を含めたJavaSprictの基礎を学んだところで、jQueryの学習に入っていきましょう! ■jQueryとは?■ jQueryを使うための準備 jQueryを書く時のルール セレクタ(HTML要素)の指定方法【jQuery("セレクタ")】 メソッド("パラメータ") 繰り返し処理【.each(function)】 複数のセレクタを指定する まとめてセレクタを使用 子要素や孫要素などの条件を追加して指定 メソッドを使った要素の指定【Tree Traversal】 ワンポイント jQuery(function(){})について jQueryの省略 ■jQueryとは?■ JavaS…
前書き rails6のradio_buttonタグでradioボタンを作成したところデフォルトのスタイルをクリックしたら文字の色が変わるようにスタイルを変更したいと思いました。色々苦戦したので記事に残します. 環境 Ruby 3.0.6 Rails 6.1.7.6 jquery: 3.7.1 変更前. . 変更後. やったこと ①○を非表示にする. ②クリックした要素を赤く色を付ける。 ①○(radio_button)を非表示にする. radio_buttonの部分のコードだけ載せます。 = f.label :weekly_goal,weekly_goal.weekly_goal,for: "…
submitボタンのおさらい 皆さんはForm内にあるsubmitボタンをどのように制御していらっしゃるでしょうか。 ボタンのような形をしているので、button要素と同様clickイベントのリスナーを設定して、対応するイベントハンドラで動作させると思いがちですが、そもそも、submitボタンはForm内にあってForm内のinput要素、textarea要素、select要素のvalue属性を集めてFormのaction属性に設定されたエンドポイントに送ることがデフォルトの動作となっています。 したがって、イベントリスナーの設定は当然に予定されているものではないのです。 もちろん、Formの…
ラジオボタンの設定をjqueryのスクリプトで行うときにハマるという話です。 問題の前提 ラジオボタンは通常複数の同一name属性をもつ要素が集まってできています。 <input type="radio" name="post_radio" value="val1" checked>要素1 <input type="radio" name="post_radio" value="val2">要素2 <input type="radio" name="post_radio" value="val3">要素3 こんな感じです。 ここで、要素3にチェックを入れるという設定をjqueryでやりたいとい…
学生の頃ってよくパフェとかシェイクとかアイスとか食べてたのに 大人になるとぜーんぜん食べなくなった。 ダイエットとか全然関係なく、そこへの欲求が出てこない。 だけど、大人になるまで食べたことなかったものを大人になって食べたいな~って 思うことも増え、挑戦することも増えた。 その中の1つがこのメロンソーダフロート。 一口目は喉を潤したいから、メロンソーダをストローでグイっと。 (ストローはグイっとではないと思うけど) しゅわしゅわを味わった後に、ぷかぷか浮かぶアイスをちゅるっと。 大人になって味わう、このモダンチックな食べ物と雰囲気。 THE★大人 幸せのひと時を有難う。 ☟本日の授業の流れ a…
いろいろありエンジニアっぽい副業探してます。よろしくお願いします。 希望 時給1000円~ タイミーのコンビニバイトがこれくらいだった フルリモートワーク 京都にいるので近辺なら出社できますが... 平日の朝/夜、または土日の勤務 日中10:00~19:00は本職なので 週2~3だと嬉しいです 単発でも全然OKです やれること バックエンドWebアプリ開発 Perlで定型なWebアプリケーションをそこそこ早くつくれます GraphQLのresolverもかける golangもある程度かけます TypeScriptはサーバーサイドっぽいのは書いたこと無いですが可能です RubyやPHPは多少助走…
こんにちは!ゆきおです。既にブログにグローバルメニューを設置している方向けの記事です。ただ、このCSSコードが効くグローバルメニューは限られているので注意してください。CSSを色々いじっている場合はダメかも。 できる可能性が高いグローバルメニュー3選 Yukihy Life(ドロップダウンなし) Yukihy Life(ドロップダウンあり) ひつじの雑記帳 デザインCSSに貼り付けるCSSコード 最後に できる可能性が高いグローバルメニュー3選 Yukihy Life(ドロップダウンなし) www.yukihy.com ↑ 私もこちらのグローバルメニュー使わせていただいてます。 私は一番上のは…
1.Chromeの拡張機能とは 2.実際に作成してみる 2-1. manifest.jsonの書き方 name version manifest_version content_scripts matches js web_accessible_resources 2-2. 処理したいコードを実装する 2-3. 作成した拡張機能を反映させる 3.まとめ はじめまして。株式会社アップガレージグループ ITソリューション事業部 エンジニアの中尾です。 今回のテーマは、「Chromeの拡張機能作成」について。日々Chrome拡張機能は利用していて、自分でも便利なツールを作成したいと思ったため共有いた…
WEBデザインの世界では、日々進化する技術やデザインのトレンドに追いつくために、専門的な知識とスキルを磨くことが不可欠です。その中でも注目を集めるのが、WEBデザインスクールでの学び方です。WEBデザインスクールは、未来を変える可能性を秘めており、本記事ではその魅力や選び方、料金体系など、様々な視点から解説していきます。 WEBデザインの世界で成功を収めるためには、正しい知識とスキル、適切な選択が欠かせません。そこで、WEBデザインスクールを選ぶ際のポイントや注意点をしっかり押さえて、自らの未来を切り拓く第一歩としましょう。 【PR】Webデザイナーを目指す方におすすめのWebデザインスクール…
ソース: mouhannadalhmedi.medium.com 脆弱性:XSS, CORS 訳: 周知のとおり、最新の Web アプリケーション、特にSPA を備えた Web アプリケーションは、クライアント側のアプリケーションに大きく依存しています。 分析、支払い処理、認証、チャット サービスなどのコミュニケーション ツールなど、多数のサードパーティ サービスを備えていないクライアント側アプリケーションを見つけることはほとんどありません。 クロスオリジン通信 が付属しています。 ほとんどの場合、これらのサービスはサードパーティプロバイダーでホストされているため、異なる「オリジン 」 たとえ…
JRA競馬データ収集取得の質問で 1.ExcelのパワークエリでJRAのページからソースコードを取得したい 2.文字化けしてしまいます 3.DoActionが解りません (転載不可希望なので、勝手に要約) とあったので、日曜日なのでチャレンジ。※本当は昨日の土曜日からやってて、進展なし・・・#msexcel #パワークエリ #Webクエリ #ソースコード #文字化け #PowerQuery #HTMLソース #TABLE #マイクロソフトエクセル https://youtube.com/live/0WA7jPsoMWw 目次 00:00 やりたいこと 00:55 1.1 空のクエリに未完成を入…
jQuary,javascript学習3(数値の取得と出力) ・目次 jQuary,javascript学習3(数値の取得と出力) 1.目的 2.htmlの値の取得と値の出力方法 3.プログラムの作成(数値の取得と、計算結果の出力) 関連記事 1.目的 ・jQuaryを使用し、htmlの数値を取得し、計算結果を出力するする方法について記載する。 2.htmlの値の取得と値の出力方法 // JQueryの記述方法(数値の取得) $("#id名").val();// JQueryの記述方法(数値の変更、出力) $("#id名").val(出力する変数名); ・数値の取得及び、数値を出力…
グローバルメニューのデザインをカスタマイズしました。 自分の思うようなデザインにするために、参考にしたCSSのコードを一つ一つ調べたので備忘録にまとめました。 グローバルメニューをカスタマイズ デザインを選ぶ CSSをコピペする HTMLとjQueryをコピペする 色を変える 備忘録:グローバルメニューのCSS 一階層目(親リンク部分) グローバルメニューの土台部分:#menu グローバルメニューの親リンクをのせる部分:#menu-inner 親リンクのデザインをする部分(1か所目):#menu-content 親リンクのデザインをする部分(2か所目):#menu-content > li 親…
Cookie(クッキー)とは? Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したときに ユーザーを特定し、情報を入力する手間が省けます。ショッピングサイトに訪問したとき、すでにログイン状態になっている、以前カートに入れた商品がそのまま残っているのは、Cookie機能がはたらいているからです。似たような機能でSessionという機能がありますが、Cookieはクライアント側にデータを保存するのに対して、Sessionはサーバー…
連載記事「SpringBoot アプリ開発」を読み進めると、サンプルの Webアプリを制作することができます。 今回は、HTMLとJavaScriptを作成していきます。 連載記事 SpringBoot アプリ開発の連載記事は以下の通りです。 概要・使用プロダクト プロジェクト作成・SQL作成 モデル・リポジトリの作成 コントローラー・メインの作成 HTML・JavaScriptの作成(今回の記事) CSS・画像の作成 テスト・動作確認 目次 HTMLの作成 JavaScriptの作成 1. HTMLの作成 以下のHTMLを作成します。 src/main/resources/static/in…
「日中文化交流」と書いてオタ活動と読む : 中国オタク「日本の男性向けラノベで『ヒロイン無し』を売りにする作品はあるの?日本のネット小説を見てもあまり無いように感じるんだけど……」 日銀が大規模緩和解除へ、19日決定 長短金利操作も撤廃 - 日本経済新聞 『クリミア・ハン国 歴史・国家・社会』まえがきに代えて|Pençdiraht [その36]放課後ひみつクラブ - 福島鉄平 | 少年ジャンプ+ [拷問224]姫様“拷問”の時間です - 春原ロビンソン/ひらけい | 少年ジャンプ+ https://www.mizuho-rt.co.jp/company/brand/pdf/kaiketsu.p…
連載記事「SpringBoot アプリ開発」を読み進めると、サンプルの Webアプリを制作することができます。 今回は、サンプルアプリの概要と使用製品を書いていきます。 連載記事 SpringBoot アプリ開発の連載記事は以下の通りです。 概要・使用プロダクト(今回の記事) プロジェクト作成・SQL作成 モデル・リポジトリの作成 コントローラー・メインの作成 HTML・JavaScriptの作成 CSS・画像の作成 テスト・動作確認 目次 アプリの機能 画面イメージ 使用プロダクト データベース情報 1. アプリの機能 短いテキスト「つぶやき」を投稿できるアプリケーションです。 つぶやきの「…
jQuary,javascript学習2(id取得) ・目次 jQuary,javascript学習2(id取得) 1.目的 2.id及びclassの取得 3.プログラムの作成(idとclassのクリック) 4.プログラム説明 関連記事 1.目的 ・jQuaryを使用し、htmlのid及びclassを取得する方法について記載する。 ・idとclassの取得方法を理解する。 2.id及びclassの取得 // JQueryの記述方法(idを取得) $("#id名").コマンド(); ・$:jQueryを示す ・コマンド:jQueryの命令 例: $("#test1").click(f…
某プログラミングスクールを卒業後、改めてJavaScriptの勉強をしています。 新たな勉強方法としてYouTubeを利用し、初めてjQueryの勉強をしました。 アコーディオン表示機能の実装のYouTubeを見て、まだぼんやりの認識ながら、こうすれば、こう実装できるんだと新たな知識がつきました。 趣味で、筋トレをしていますが、プログラミングの勉強は筋トレとよく似ているなと感じています。コツコツとトレーニングを継続することで筋力(技術)が積みあがっていくものだと。プログラミングの勉強においても、筋トレ後に飲むプロテインのようなものがあればいいなと思ってしまいますが・・・。継続は力なり、筋トレと…
index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイトの作成</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>…