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…
連載記事「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>…
See the Pen q-chan by yachin29 (@yachin29) on CodePen. tympanus.nethttp://gardenstudio.com.br/gardenstudio.com.brjakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。 SVGではアニメーション機能などもサポート…
多くのコンテンツを見せる際にフィルタリング機能やソート機能などを付けて、ユーザーの利便性を向上させましょう。 さらにモーダルウィンドウを追加して、ページ遷移することなく、動線をそのページで完結出来るようにしましょう。 github.com 高機能モーダルウィンドウ「Fancybox」のCDN 今回はモーダルウィンドウにLightboxの代わりに「Fancybox3」を使用してみます。 fancybox CSS <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery…
すべてチャットGPTのやりとりだけで計算をつくっていただけました ほんとすごいですねチャットGPT (ちなみに下記の紹介文もほぼチャットGPTが書き出したものです) ではどうぞ JavaScriptとjQueryを使用したシンプルな計算機の実装方法 こんにちは、皆さん!今回は、JavaScriptとjQueryを使用してシンプルな計算機を実装する方法について紹介します。この計算機は、HTML、CSS、およびJavaScriptを使って作成されています。 この計算機は、数字と四則演算子のボタンを使って直感的に操作することができます。JavaScriptの eval() 関数を使用して、入力された…
javascriptのlocation.hashプロパティを使う事でURLのハッシュを取得することが出来ます。 今回の ポイント トップページの「資料請求ボタン」と「お問い合わせボタン」をクリックしてページ遷移した時にJavaScriptの「location.hash 」を使って、選んだ方のラジオボタンがcheckedの設定になっているようにし、それに対応したフォームだけが表示されるようにする トップページにボタンを設置この時にIDを指定する <a href="form/input.php#item_01">商品Aはこちら</a> <a href="form/input.php#item_02…
最終更新日 2024/03/13 (未完成です) この職務経歴書の目的 カジュアル面談などでの利用を想定しています 長いので興味あるところだけ見ていただけたらと思います 社名・サービス名などは全公開している性質上隠していますが、会話などでは可能な範囲でお答えします 目次 この職務経歴書の目的 基本情報 職務要約 自己PR 社歴 主な職務経歴 職務詳細 生成AIレポート クラウド移行検証 受託開発チームの体制づくり 携帯電話用のカラオケ楽曲作成ソフトの作成 テクニカルスキル 基本情報 氏名 田中 浩二 / タナカ コウジ 出身 東京都 在住 沖縄県那覇市 職務要約 基本は受託開発のWebアプリケ…
強くなければ生きていけない。優しくなければ生きてる資格がない。 あわせてよみたい 強くなければ生きていけない。優しくなければ生きてる資格がない。 今日はダラダラする日曜日であるな。あまり生産的なことはそんなにしてないなという感じ。 ひとまず今日やったこととしては、朝に早起きをしてコメダでモーニングをしながらカラーひよこさんところのブログに寄稿するための文章を下書きした感じであり、それから午後は自宅でブログなどを眺めつつダラダラしてる。晩飯は適当に近所のラーメン屋で食べてこようかなと思ってる。 昨日の晩は不思議とぐっすりと熟睡できた。このところ睡眠が足りてない気がしてたのだけど、今日はしっかりと…
www.publickey1.jp ⇧ 何と言うか、コストの観点からしたら、オンプレミスで構築した方がよい場合もあるからして、全てをクラウドありきで考えられても困るんだが... 特に円安、クラウドサービスの値上げ、とかある中で、本当にクラウドの方が低コストと言えるのか甚だ疑問なんだが... Microsoftなんかは、 news.microsoft.com 日本マイクロソフト株式会社は、2024 年 4 月 1 日から、法人向けソフトウエアおよびクラウドサービスの価格を改定します。新価格は、日本円の為替変動に伴い、いずれも 20% の引き上げとなり、2024 年 4 月以降に適用されます。 h…
PythonプログラムをJavaScriptで実行する方法はいくつかあります。一般的な方法の一つに、pywebviewを使用する方法があります。これは、PythonのGUIアプリケーションからWebページにアクセスし、JavaScriptからPythonコードを実行するためのツールです1。また、Ajaxを使ってWebサーバー上でPythonスクリプトを実行し、その結果をJavaScriptに渡す方法もあります2。 例えば、pywebviewを使う場合、PythonでAPIクラスを定義し、JavaScriptからそのメソッドを呼び出すことができます。この方法では、Pythonがバックエンドで動作…
以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトにGoogleフォームを設置する場合「自分でCSSをいじれない」事が大きなデメリットになってしまいます。しかし、Googleフォームに「自身のcssを適応させる」事でレスポンシブサイトに最適なレイアウトで作る事が出来るため、唯一のデメリットも無くなります。 Googleフォームを作成する www.google.com HTMLで同じ項目のフォームを作成…
引き続きComponentライブラリを作っていきます。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 TypeScript React Bulma vite Bulma Storybook ESLint Prettier asdf Prettier・CIの導入 プロジェクトを作ったらとりあえずPrettierを入れておきます。 npm i -D prettier prettierの設定ファイルを導入します。 semi: false singleQuote: true package.json に登録します。 "scripts": { "prettier": …