- 1. 【javascript】オリジナルのセレクトボックスを作ろう!createselectbox関数のカスタマイズ方法
- 2. JavaScript基礎学習③ダイアログボックスの表示&条件分岐(if文)
- 3. GoogleSiteに動的アコーディオンメニューを付けてみる
- 4. 初心者プログラマーがJavascriptは楽しいと感じた学習方法(クリックゲームを作成する)
- 5. k6で秒間○回リクエストする 行ロックを取るような設計のボトルネック度をk6の負荷テストで検証してみた
- 6. JavaScript超初心者 これから参考にする教材一覧
- 7. 【javascript】動的なセレクトボックスを実現!createselectbox関数の応用テクニック
- 8. JavaScriptでのデータの渡し方とイベント制御のテクニック
- 9. [JavaScript] 変数と宣言
- 10. Spring AI フレームワーク その2
- 11. 【JavaScript】WebpackとBabelの設定
- 12. aタグの挙動は上書きできる
- 13. 【更新verを選択】プリザンターの編集画面で前回との差分を表示する
- 14. 【Next.js】husky + lint-stagedを使ってコミット前にlint・typeチェック・フォーマットを行う
- 15. ページの背景を変更するchrome拡張機能作り方
- 16. 【JavaScript】トーンを貼るアルゴリズム【Canvas】
- 17. 【javascript】手軽に選択肢を追加!createselectbox関数の活用術
- 18. 【永久保存版】0からReactを勉強するならこのロードマップに従え!
- 19. こんにちは!!@Sicut_studyです!
- 20. 【JavaScript】グローバルで使用するMapなどのキーにString型ではなくSymbol型を使うべき理由
- 21. passport.deserializeUser が呼ばれません(初心者です。)
【javascript】オリジナルのセレクトボックスを作ろう!createselectbox関数のカスタマイズ方法
## スタイルのカスタマイズとセレクトボックスのデザイン変更
セレクトボックスは、ウェブサイトやアプリケーションで頻繁に使用されるコンポーネントの一つです。デフォルトのスタイルでは、デザイン性に欠けている場合があります。そこで、javascriptを使用してオリジナルのセレクトボックスを作成し、スタイルをカスタマイズする方法について説明します。
### セレクトボックスのスタイルカスタマイズの基本
セレクトボックスのスタイルをカスタマイズするためには、以下の手順に従います。
1. htmlでセレクトボックスの要素を作成する。
2. cssでセレクトボックスのスタイルをカスタマイズする。
3. javascriptでカスタマイズしたスタイルをセレクトボックスに適用する。まず、htmlでセレクトボックスの要素を作成します。
“`html
JavaScript基礎学習③ダイアログボックスの表示&条件分岐(if文)
学習した事のアウトプット、備忘録です。
– 参考書籍:確かな力が身につくJavaScript「超」入門
– ダイアログボックスの表示
windowオブジェクトを使用する。– 確認ダイアログボックスの表示
※confirmメソッド:ダイアログボックスに表示された「OK」か「キャンセル」をクリックすると実行結果をtrueかfalseか返す。trueかfalseの両方を合わせてブーリアン値という。“`
window.confirm(‘表示させたい文章’);
“`– ダイアログボックスにテキストフィールドを表示させる
“`
window.prompt(‘表示させたい文章’);
“`– if文
“`
if(条件式) {
条件式がtrueになる(成り立つ)時に実行する処理
} else {
条件式がfalseになる(成り立たない)時に実行する処理
}
“`
※falseの時に実行するものが何もなければ、else以降は省略できる。更に条件式を追加するなら、
“`
if(条件式) {
条件式がtrueになる(成り立つ)時に実行する処理
} elsif(
GoogleSiteに動的アコーディオンメニューを付けてみる
GoogleSite使っている方いますか?個人的にはそこまで親近感を感じてはいないのですが、ちょっとした社内ポータル作るのにいいという話もあったりとか。
今回社内で管理部門に色々情報を書いてもらって、システムチームで入り口ページを作ってみました。で、以下のような情報を各部門に入れてもらってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/69dfb5c8-03d8-0a95-b985-e6d5dd968e9f.png)
これをそのままポータルのメニュー(アコーディオン)として出せれば見やすいかなと思って今更感のあるjQueryとSpreadSheetのGASを使ってAPIを作ってみたのでそのやり方をご説明します。
こちらが完成イメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1593/517433b8-25e9-4be1-deeb-f1fea91cba
初心者プログラマーがJavascriptは楽しいと感じた学習方法(クリックゲームを作成する)
## 執筆者のプログラミングレベル
プログラミング入門レベルを学習して3ケ月。
HTML,CSS,Javascriptを学習。
プログラミング練習としてホームページの模写コーディングも実装済み。## 【楽しい学習方法】何か簡単なゲームやアプリを作る
せっかく学習をしたからには、何か面白いものを作成しながら勉強していきたいと思いました。
今回は「クリックゲーム」を作成してみました。
まだまだ技術力不足ですが、何かを作成していくことは楽しい学習方法だと感じています。作成画面
![スクリーンショット 2023-10-06 211733.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570673/d5446ced-335d-7f59-1d05-67168ac90386.png)
ソースコード
“`
k6で秒間○回リクエストする 行ロックを取るような設計のボトルネック度をk6の負荷テストで検証してみた
## はじめに
思考実験として、投稿とそれに対するコメントやいいねができるシステムを考える(DBスキーマは以下のようなテーブル構成とする)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/2c4e173e-305b-2acb-afd0-daeb30baa6f2.png)このシステムでは、投稿テーブルでコメントの合計数を持つような設計になっているとする。そのような設計になっているがゆえに、コメントを行うAPIがあった場合には、以下のような実装になる必要がある。実装におけるポイントは、コメントを行うごとに投稿テーブルのcomment_countをインクリメントする必要があるので、投稿テーブルの行ロックを取る必要がある部分になる(ロックを取らずに投稿テーブルを更新すると、数値がおかしくなる)。
このような実装をしたとき、どれくらいのAPIコールがされると行ロックを取っていることがネックになり、サービスに影響が出る(ロック待ちでAPIの応答が遅くなる)が出るのか気にな
JavaScript超初心者 これから参考にする教材一覧
## はじめに
未経験からフロントエンドエンジニア目指してます25歳女です。
今日からJSの基礎文法を学び始めたばかりです。
JavaScript超初心者が使用する予定の教材を載せます。こういうのは、終わってから振り返るのが多いかもですが、自分の記録用として自分のために書きます。
同じようにJavaScriptの学習を始めようと情報を集められている方の参考になれば幸いです。
※使用教材が多く、ツヨつよエンジニアの皆様は遠回りだと感じられるかもしれないですが、見守ってくださると嬉しいです。(何かアドバイスやおすすめ書籍の情報あればコメントくださると嬉しいです。)
もう10月ですが、年内までにしょぼくてもいい(できればモダン技術を使用した)ポートフォリオをなんとかして作成します。ほんまに焦ってます!!!
がんばるます!!!!
#### 使用予定の教材
##### 教材
paizaラーニング
(https://paiza.jp/works/js/primer/beginner-js1/12001/1)基礎が定着しやすい。
[JavaScriptをとことんやっ
【javascript】動的なセレクトボックスを実現!createselectbox関数の応用テクニック
## オプションの動的生成と選択肢のリアルタイム反映
javascriptのセレクトボックスには、静的な選択肢を設定するだけでなく、動的に選択肢を生成して追加することもできます。また、選択した項目に応じて別の選択肢を表示することもできます。### サンプルコード
`javascript
// セレクトボックスの動的な選択肢生成
function createoptions() {
var selectbox = document.getelementbyid(‘myselectbox’);
// すでに選択肢があれば一旦削除する
selectbox.innerhtml = ”;var options = [‘オプション1’, ‘オプション2’, ‘オプション3’];
for (var i = 0; i < options.length; i++) { var option = document.createelement('option'); option.value = i; option.text = options[i];
JavaScriptでのデータの渡し方とイベント制御のテクニック
今回は、日頃業務をしながら気になったことを勉強してみました。
HTML内にあるscriptの処理とデータの渡し方です!
この記事を通じて、JavaScriptのデータの渡し方やイベント制御のテクニックを習得に繋がればと思います。## まずはコードと仕様
“`
Document