jQuery----ギャラリーページの作成

ギャラリーページの作成【開発環境】OS：Win11（64ビット）VSCode1.72.2、VSCodeの拡張機能から「LiveServer」をインストールしているものとする。jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【Javascriptライブラリ】・Masonry→レスポンシブ対応のグリッドレイアウトが出来る・imagesLoaded→すべての画像の読み込みが終わった後に処理を実行できるため、Masonryのレイアウト崩れを防げます。【Webデザイン】サムネイルをクリックすると、大きなぁ画面になる■ギャラリーパージの主な機能今回は「フォットグラファーが自分の作品を紹介するポートフォリオサイト」を想定して、最終的には以下の要件を満たす機能を実装してい...jQuery----ギャラリーページの作成

jQuery-スムーススクロール拡張編

スムーズスクロール拡張編【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【SmoothieScroll】前回のBasic版では、「scrollTop」プロパティを利用出来る要素を検出する関係を紹介した。今回は、「SmoothScroll」プラグインを使って,スムーズスクロールを作ってみる。まず、「SmoothieScroll」プラグインのダウンロードするか、smooth-scrollCDNをリンクするか＜scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.3/smooth-scroll.min.js"＞＜...jQuery-スムーススクロール拡張編

jQuery入門--スムーズスクロール

スムーズスクロール【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【スムーズスクロール】スムーススクロールは下図の上向きの↑をクリックすると、上部に戻る。【Webデザイン】プログラマ編【html】続1【imgフォルダー】【CSSフォルダー】main.cssファイルを書く@charset"UTF-8";/*Base*/html{/*扱えるフォント*/"RopaSans",sans-serif;font-size:16px;line-height:1.5;}body{background-color:rgb(255,255,255);color:rgb(0,0,0);min-width:960...jQuery入門--スムーズスクロール

jQuery入門--高機能で拡張しやすいタブ

高機能で拡張しやすいタブ【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js・jqueryのUIとはユーザーインターフェイスの事で、今回は「Tabs」というウインクジェットを利用するため、jQueryUIのCDNをコピーすれば良い【Webデザイン】前回のタブに機能を追加したもの【仕様】・キーボードによる操作を可能にする・新しいタブが選択された際にアニメーション効果を追加する【フォルダー】フォルダーの構成は下図の通り【HTML】ヘッド部に・Googleフォント、jquery及びUI、normalize.css、main.js,main.cssなどを設定する。body部section要素内、hea...jQuery入門--高機能で拡張しやすいタブ

jQuery入門--画面領域を有効活用できるタブ

画面領域を有効活用できるタブ【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【Webデザイン】複数のコンテンツ（内容）を「パネル」として、1つのエリアに重ねて配置し、上部の「タブ」によって表示するコンテンツを切り替られるUI（ユーザーインターフェース）で、よく用いられる。【仕様】・タブで画面を切り替える【フォルダー】【imgフォルダー】【index.html】ヘッダーで、様々なプラグインや、外部ファイルを読み込んでいる。body要素をsection要素で、一つのまとまりを作り、更に入れ子としてsection要素を作る。大まかには、下記のように成る＜section＞＜header＞＜ul＞＜...jQuery入門--画面領域を有効活用できるタブ

jQuery入門--変化するスティツキーヘッダー

変化するスティツキーヘッダー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.js及び、modernizr.min.js【スティツキーヘッダーの概要】・デザインスティツキーヘッダーは上部に達すると【仕組み】今回は、スティツキーヘッダーが上部に達すると、初期状態のヘッダーの内容をコピーして、スティツキーヘッダーを新たに作る。1.初期状態のヘッダーは動かさず、常に元の位置に配置する2.ヘッダーのクローンを作成し、初期状態では画面上部の外側に配置しておく3.ウインドウのスクロールによって初期状態のヘッダーが非表示になった時点で、クローンを見える位置に移動する【フォルダーの構成】imgフォルダー【HTMLコード】【head部】1.Google...jQuery入門--変化するスティツキーヘッダー

jQuery入門--スティツキーヘッダー

スティッキーヘッドヘッダー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.js及び、modernizr.min.js【head部】での注意・GoogleFontsの「RopaSans」フォントを取得している。＜linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Ropa+Sans"＞【スティッキーヘッドのデザイン】スクロールする。ヘッドが固定される【概要】スティッキーヘッドはスクロールに合わせて移動するヘッダーですが、画面上部に来ると、ヘッダーだけが固定し、本体はスクロールに合わせて移動する。【処理の流れ】スティッキーヘッドを実装するには、ウインドウのス...jQuery入門--スティツキーヘッダー

jQuery入門--多機能なスライドショー

多機能なスライドショー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【Modernizr2.8.3のCDN】＜scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"＞＜/script＞modernizr.jsとは、JavaScriptやCSSを書いていると「新しい機能が使えるブラウザではそれを使い、そうでない場合は別の手段で代替する」というように、処理を分岐させたい場合がある。Modernizr（モダナイザー）とは、そういった「機能検出」のためのJavaScri...jQuery入門--多機能なスライドショー

jQuery入門--滑らかな動きをするスライドショー

滑らかな動きをするスライドショー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【normalize.cssとは】どのブラウザーでアクセスしても、表示が変わってしまわないように、各々のブラウザーに適用されているデフォルトのスタイルを平均化するために読み込ませるCSSです。◆normalize.cssの使い方まずは、Normalize.cssのページから、ダウンロードし、head内にlinkでnormalize.cssへのファイルパスrelで記載すれば完了。【Modernizrとは】Modernizr（モダナイザ）は、Web開発においてHTML5やCSS3の機能がブラウザでサ...jQuery入門--滑らかな動きをするスライドショー

jQuery入門--スライドショー

jQueryプラグインでスライドを作る【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js参照サイト：slickでスライダー実装【スライダーのデザイン】jQueryプラグイン「slick」を使ってスライダーを作ってみる・スライダーは3枚の写真を自動でスクロールする事【slickを選ぶ】https://kenwheeler.github.io/slick/のHPを開くこれをスクロールして、自分の作りたいタイプのものを選ぶ。また、詳細を知りたい場合は「usage」をクリックすると、ジャンプ出来る。手順1HTMLのマークアップ（構造）を確認するhead部へ、2つのcssを読み込むbody部へ、sl...jQuery入門--スライドショー

jQuery入門--マスク・プラグイン

マスクプラグイン【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN【動画】【jQueryプラグイン】https://releases.jquery.com/にアクセスするプラグインをクリックnpmをクリックこの中から、下図のところをクリックHPに飛ぶ【インストール】VScoodを立ち上げPSC:\Users\Owner>npm-v10.8.2PSC:\Users\Owner>バージョンを確認する。インストールするフォルダ「プラグイン」を作り、インストを開始する・コマンドPSD:\jQuery\プラグイン>npmijquery-mask-plugin【インストールされたフォルダ】以上のようになる。【マスク・プラグインを使ったWebを作る】定...jQuery入門--マスク・プラグイン

jQuery入門--タイポグラフィの表現

タイポグラフィの表現【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【Webデザイン】下図のように、文字を浮かせる。また、マウスを動かすと、影も動く様ににする【フォルダ作成】【コード書く】1.index.html続1・CSS/main.css/**Base*/html{"HelveticaNeue","Arial","HiraginoKakuGothicProN","Meiryo",sans-serif;font-size:16px;line-height:1.5;}body{background-color:#656565;}img{vertical-align:middle;}but...jQuery入門--タイポグラフィの表現

jQuery教科書--見え隠れするサイドバー

見え隠れするサイドバー【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【デザインと動作】下図のようなデザイン「OPEN」を押すと、サイドバーが表示され、「CLOSE」を押すと、閉じる【フォルダー構成】imgフォルダ・index.htmlファイルここでは、外部入力ファイルの設定続・「CSS/main.css」ファイルにコードを書く/**Base*/html{"HelveticaNeue","Arial","HiraginoKakuGothicProN","Meiryo",sans-serif;font-size:16px;line-height:1.5;}body{background-c...jQuery教科書--見え隠れするサイドバー

jQuery入門--丸ボタンのレイアウト

レイアウト術【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【丸ボタンのレイアウトHP】HP画面は下図のようになり、動作は、ボタンの上にマウスを乘せると、徐々に黄色に変わる。以上1.フォルダとファイルを用意する2.img3.3フォルダに「index.html」ファイルを作るこの部分で、CSS・jQuery・jsなどを読み込んでいるヘッダーの設定本体の設定本体とフッターの設定4.css/main.cssファイルのコードを書く/**Base*/html{font-family:"HelveticaNeue","Arial","HiraginoKakuGothicProN","Meiryo",...jQuery入門--丸ボタンのレイアウト

jQuery入門--画像とキャプション

画像とキャプション【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムJQuryCDNを入れる＜!--jquery--＞リンク先＜scriptsrc="https://code.jquery.com/jquery-3.7.1.min.js"integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="crossorigin="anonymous"＞＜/script＞＜!--jqueryUIは拡張型--＞リンク先＜scriptsrc="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"integrity="sha256-AlTido85uXPlSyyaZNsjJXeCs0...jQuery入門--画像とキャプション

jQuery入門--様々なホバーエフェクト

様々なホバーエフェクト【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsとjquery-ui.min.jsを読み込む＜!--jquery--＞リンク先＜scriptsrc="https://code.jquery.com/jquery-3.7.1.min.js"integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="crossorigin="anonymous"＞＜/script＞＜!--jqueryUIは拡張型--＞リンク先＜scriptsrc="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"integrity="sh...jQuery入門--様々なホバーエフェクト

jQuery教科書--入門2

jQueryを始めよう（onメソッド）【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery-1.10.2及びjquery-ui-1.10.3がインストール済みか、jQueryCDNドメインにリンク済み注意、index.htmlやmain.cssは変えないものとする【表示タイミングを変えるには】1.ブルーの領域にマウスが乗ったら、色を赤にする2.ブルーの領域外にマウスが来たら、色を戻す⇅「main.js」コードを書き換える。$(function(){$('#typo').on('mouseover',function(){$(this).css({color:'#ff0000'});}).on('mouseout',function(){$(this).css({color...jQuery教科書--入門2

jQuery教科書--入門1

jQueryを始めよう（CSSメソッド）【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery-1.10.2及びjquery-ui-1.10.3がインストール済みか、jQueryCDNドメインにリンク済み【サンプルプログラムを作る】ブラウザを開いて、表示すると、下図に用になる。「index.html」コード・コードから分かるように、外部CSSや外部JSを使うときは、ヘッダに置くのが通例、bodyに置けるが、処理が遅くなるので、推奨されない。bodyから※）target=”_blank”とは、リンク先を別タブで開くよう指定できるHTMLタグの1種◆「main.css」のコード/**Base*/html{"HelveticaNeue","Arial","HiraginoKaku...jQuery教科書--入門1

jQuery入門--スライダー

スライダー【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--2.2.4【slickの導入】slickはjQueryベースの、スライダーを作成するためのプラグインです【slickのダウンロード】【インストール】任意のフォルダ（slick）を選び、slick-1.8.1.zipをクリクすると、インストールされる。【VScodの設定】「fonts」フォルダから「css」フォルダに、2つのファイルを移すslick-theme.cssslick.css「fonts」フォルダから「js」フォルダに,一つのファイルを移すslick.min.js「imde」フォルダには、好きな絵を4枚入れる【スライダーを作ってみる】◆動作1.手動でスクロール出来、尚且つ5秒経つと、自動でスクロール...jQuery入門--スライダー

jQuery入門--モーダルウィンドウ

モーダルウィンドウ【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--2.2.4【モーダルウインドウとは】ユーザーに重要な情報やエラーメッセージを伝えるために表示されるウインドウの事。【主な要素を用意する】ブラウザを立ち上げる。「index.html」「style.css」ファイルにコードを書くbody{margin:0;}.button{width:100px;padding:10px;/*左右の真ん中*/margin:40pxauto0px;/*ボックスの角を丸くする*/border-radius:5px;/*文字に関すること*/color:white;font-weight:bold;text-align:center;/*カーソルの形*/cursor:poin...jQuery入門--モーダルウィンドウ

jQuery入門--アコーディオン

アコーディオン【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--2.2.4【アプリ：アコーディオンを作る】「index.html」コードを書く「style.css」.accordion{width:90%;margin:0auto;color:white;}.accordion_outer{padding:10px;margin-top:2px;background-color:rgb(0,0,0);border:2pxsolidrgb(0,0,0);cursor:pointer;}.accordion_inner{padding:10px;background-color:rgb(0,168,42);border:2pxsolidrgb(0,0,0);}ブラウザを...jQuery入門--アコーディオン

jQuery入門--イベント・on()

イベント・on【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--2.2.4【イベントとは】クリックやマウスが要素に乗ったときなどユーザーのアクションが合った時に、処理を実行することです。【イベントの種類】【使い方】$("セレクト名").イベント名(function()){処理内容;});サンプルコード「index.html」コード「event.jp」コード$(function(){$("li").click(function(){$("li").css("color","red");});});ブラウザを立ち上げるクリックすると赤に成る【this】呼び出した状況に応じた値が代入される変数。イベント中ではイベントが起こった要素が代入される。「event.jp」$(fu...jQuery入門--イベント・on()

jQuery入門--基礎編1

基礎編1【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--2.2.4【変数の宣言と代入】変数の宣言var変数名=値；又は、var変数名;変数名=値；let変数名=値；又は、let変数名;変数名=値；const変数名=値；【変数名のルール】・unicode文字、_、＄の3つを使う＄変数はJQueryのオブジェクトを入れる場合例文let$title=$(",main-title");ダメなのは・最初に数字を使うこと・予約語【代表的なメソッド】1）alert()メソッドアラートを表示する2）html()メソッド要素を取得と、設定をする3)text()メソッド特定のHTML要素内にあるテキスト情報を取得と、設定する取得$("セレクタ").html();$("セレクタ").t...jQuery入門--基礎編1

jquery---固定するメニュー

固定するメニューの作成【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【メニューバーの作成--準備1】ブラウザを立ち上げてみる。「index.html」のコードを書く「styel.css」のコードp{text-align:center;letter-spacing:50px;}【メニューバーの作成--画面調整】ブラウザをリロードする。「styel.css」のコードを下記のようにするp{text-align:center;letter-spacing:50px;}header{height:460px;/*行間の調整*/line-height:460px;text-align:center;}nav{width:100%;background-color:...jquery---固定するメニュー

jQuery入門--スクロールで動くボタンを元に戻す

スクロールで動くボタンを元に戻す【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【戻りボタンの作成】ブラウザを開く「index.html」にコードを書く「style.css」のコード.square{width:50px;height:50px;background-color:blue;color:#ffff;/*文字の配置*/text-align:center;/*行間の調整*/line-height:50px;/*画面上部に貼り付ける*/position:fixed;}【ボタンを右下に移動させる】ブラウザを再リロードする・「style.css」のコードを下記のように書く.square{width:50px;height:50px;background...jQuery入門--スクロールで動くボタンを元に戻す

jQuery入門--if文

条件分岐【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【スクロールしても四角の位置は変わらない】「index.html」「style.css」ファイルにコードを書く.square{width:188px;height:180px;background-color:blueviolet;position:fixed;}ブラウザを立ち上げるスクロールしても、四角の位置は変わらない【300PX以上スクロールすると、四角が現れる】「index.js」を下記のように書き換える$(function(){$('.square').hide();//ウインドウスクロール$(window).scroll(function(){//300以上スクロールしたら、四角を表すi...jQuery入門--if文

jQuery入門--変数

変数に付いて【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【変数の基本】・宣言と代入変数の使い方を簡単にいうと、入れ物を作り名前を付けて、その入れ物に値を入れます。変数という入れ物を作ることを宣言といいます。変数に値を入れることを代入といいます。また、このように宣言と同時に値を代入することを初期化といいます。・使い方//値を変数に代入vartest='てすと';//変数をコンソールで表示console.log(test);→「てすと」が表示される【変数の代入値】jQueryの変数に代入できるものは、基本的にJavaScriptで扱えるすべての値を指します。具体的には、以下のようなものを代入できます。・数字varnumber=42;・文字列vartext...jQuery入門--変数

jQuery入門--カーソールを先頭に戻す

カーソールを先頭に戻す【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【ページのトップの遷移（href=”#”）】「index.html」のコードブラウザを立ち上げる「topに戻る」をクリックすると、カーソールが先頭に戻る。【ゆっくり戻すには】「index.js」を下記のように書く$(function(){$('#backToTop').click(function(){$('body,html').animate({scrollTop:0←ここを書き換えると、指定したところで止まる},1000);});});jQuery入門--カーソールを先頭に戻す

Jquery入門--アニメ

アニメーションに付いて【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【animate()の使い方】特定のHTML要素のCSSプロパティを連続して変化させることでアニメーションを実現してくれるメソッドサンプルコード「index.html」ブラウザを立ち上げる横に伸びるようにする「アニメ.js」を下記のように書き直す$(function(){$('.test').animate({width:'300px'});});ブラウザをリロードする・動く速度を変えるには「アニメ.js」を下記のように書き直す$(function(){$('.test').animate({width:'300px'},3000);←時間を指定});・四角を書くには「アニメ.js」を...Jquery入門--アニメ

HTMLの要素を追加と書換え

HTMLの要素を追加と書換え【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【htmlの要素を加える】h1の前に、要素を加える「index.html」のコード「html.js」のコード$(function(){$('#btn').click(function(){$('h1').before('＜p＞before＜/p＞');});});ブラウザを立ち上げ、ボタンを押す次は、後ろにも表示する$(function(){$('#btn').click(function(){$('h1').before('＜p＞before＜/p＞'),$(this).after('＜p＞after＜/p＞');});});ブラウザ表示する【prpendメソッド】「index...HTMLの要素を追加と書換え

jQuery入門--toggle()2

toggle()メソッド2【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【3種類のとtoggleの違い】「index.html」のコード1.フェーズtoggle「toggle.js」のコード$(function(){$('ul').toggle();$('#btn').click(function(){$('ul').fadeToggle();});});ブラウザを開くボタンを押すとリストが現れる。時間を指定すると徐々に現れる2.スライドtoggle()「toggle.js」のコードを下記のように書き換える$(function(){$('ul').toggle();$('#btn').click(function(){//$('ul').fadeTog...jQuery入門--toggle()2

jQuery入門--toggle()

HTML要素を簡単に表示・非表示するtoggle()について【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【toggle()とは】toggle()メソッドは、対象となるHTML要素を簡単に表示・非表示することができるメソッドになります。「index.html」のサンプルコードブラウザを起動する次に、表示したり、消したりしてみる。「toggle.js」ファイルの下記のように書く$(function(){$('#btn').click(function(){$('ul').toggle();});});ブラウザをリロードし、「ボタン」を押す再び、押せば表示される最初は、非表示にして、徐々に表示させる$(function(){$('ul').toggle()...jQuery入門--toggle()

jQuery入門--マウスカーソルイベント

マウスカーソルイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【マウスカーソルイベントの種類】mousemove()：マウスが要素の上で移動したときイベントが発火mouseover()：マウスが要素の上にあるときイベントが発火mouseout()：マウスが要素から離れたときイベントが発火mouseenter()：mouseover()と同じで、マウスが要素の上にあるとき発火mouseleave()：mouseout()と同じで、マウスが要素から離れたとき発火hover()：mouseenter()とmouseleave()の組み合わせ【mouseover()プログラム】「mouse.js」ファイル$(function(){//セレクタ.メソッド/...jQuery入門--マウスカーソルイベント

jQuery入門--メソッド2

メソッド2【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【hide()メソッド】hideメソッドはHTML要素を表示にする。・ブラウザの表示・index.html・「main.js」ファイルを下記のように書き換える$(function(){//セレクタ.メソッド$('h1').hide();});ブラウザをリロードする・ブラウザの表示が消える【show()メソッド】showは、HTML要素を表示する。・「main.js」のコードを変更する$(function(){//セレクタ.メソッド$('h1').hide();$('h1').show();});ブラウザをリロードする再び表示されるまた、速度をゆっくりにしたい時は・「main.js」のコードを変更す...jQuery入門--メソッド2

Webデザイン--Figma

WebデザインツールFigmaの登録【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム後は、下記の動画に従って登録してくださいWebデザイン--Figma

jQuery入門--メソット1

jQueryのメソッドに関して【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【メソッドの書式】・基本$(function(){$(セレクタ).メソッド（'プロパティ'、'値'）;});または$(function(){$(セレクタ).メソッド（｛'プロパティ1':'値1','プロパティ2':'値2',・・'プロパティ5':'値5'｝）;});【メソッドの種類】.css():CSSプロパティを取得または設定.addClass():クラスを追加.removeClass():クラスを削除.toggleClass():クラスの有無を切り替え.show():要素を表示.hide():要素を非表示.fadeIn():フェードインで表示.fadeOut():フェードア...jQuery入門--メソット1

jQuery入門--セレクタとは

セレクタ【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【セレクタとは】jQueryの基本構造$(function(){$(セレクタ).CSS('color','red');});セレクタは、対象となるhtmlの要素のことである。ここでは、セレクタの文字の色を赤くする。サンプルコード「test1.js」ファイル$(function(){//セレクタ.メソッド$('h1').css('color','red');});ブラウザでみると、最初が赤くなってる【2箇所赤くする場合】「test1.js」ファイル$(function(){//セレクタ.メソッド$('h1,h2').css('color','red');});ブラウザを見る【次は子ノードを赤くする】「...jQuery入門--セレクタとは

jQuery入門 --class・id属性

属性の使い方【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--3.7.1【属性の使い方】外部リンク「main.js」ファイル$(function(){//セレクタ.メソッド$('h1').css('color','red');});ブラウザを開く、色が変わらないよ色を買えるには「main.js」ファイルを変更する$(function(){//セレクタ.メソッド$('h1').css('color','red');//cass属性$('.blue').css('color','blue');//id属性$('#gree').css('color','green');});変更された。HTML/CSS基礎第18回『「id」属性と「class」属性』ページ内でid名は一回...jQuery入門--class・id属性

jQuery入門 --書き方

jQuery入門--書き方【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery→src="https://code.jquery.com/jquery-3.7.1.min.js"integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="crossorigin="anonymous"【jQueryサンプルを作る】1.任意のフォルダを作る例えば、「JQ-サンプル」ー「1」とする。2.「1」フォルダーに、「index.html」ファイルを作る下記のところが、jqyeryで書かれたところで、＜h1＞＜/h1＞で囲まれたフォントの色を赤に変える処置をしている＜script＞$('h1').css('color','...jQuery入門--書き方

mongodb v8

mongodbv8【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【MongoDBの登録】MongoDBAtlasのホームページからログインする。「無料で始める」ボタンを押す2、atlesアカウントの作成「googleでサインイアップする」ボタンを押す設定をする・freeを選択したら、「CrewDeploymer」を押すはじめの画面に戻る。mongodbv8

jQuery入門--ダウンロード

ダウンロード編【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【jQueryのダウンロード】公式ホームページからjQueryライブラリの「jquery3.7.1をダウンロード」のボタンを押す・次のように圧縮ファイルが表示される・マウスを右クリックしてファイルに保存する・「jquery-3.7.1.min.js」ファイルを任意フォルダに保存する【CDNでjQueryを使う方法】現在、jQueryのファイルは以下の公式サイトからCDN経由で利用できるURLが公開されています。【CDNを利用したjQueryファイル jQuery公式サイト】「uncompressed」「minified」の2種類ありますが、どちらも同じjQueryファイルになります。「minified」はソースファイル...jQuery入門--ダウンロード

PCの便利ソフト--パーテーション変更

システムディスクのパーテーションを変更するには【開発環境】OS：Win11（64ビット）【ディスククローン】【AcronisTrueImageforWesternDigital】（クローン）画面の使用に変更がありDL先が難しくなりました直接ダウンロード先を貼ります。https://downloads.wdc.com/acronis/Acr...【パーティションの割当】【ネット速度を上げる】PCの便利ソフト--パーテーション変更

データーベースとは

データーベース入門【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムNode.js；v20.18.0バックエンドフレームワーク：Express.jsnpmパッケージ：nodemon【データーベースとは】Data（データ）とBase（基地）を起原とする用語で、文字通り「データの集約基地」、つまりさまざまなデジタルデータを収容する論理的領域を指し、更にそれらのデータを管理したり、運用することが出来る事がもの【データベースの種類】1.階層型データのことをノードと呼び、あるノードから別のノードを派生させて、ツリー上に展開してデータを保存しているデータベースのことです。階層型データベースでは、派生前のデータを親ノード、派生後のデータを子ノードと呼び、親ノードは複数個のノードを持つことができ、...データーベースとは

HTMLとテンプレートエンジン

HTMLとテンプレートエンジン【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムNode.js；v20.18.0バックエンドフレームワーク：Express.jsnpmパッケージ：nodemon【HTMLを扱うには】①、先ず「sever.js」にコード追加するconstexpress=require("express");constapp=express();constport=3000;constuserRouter=require("./routes/user");//HTMLファイルを扱うapp.use(express.static("public"));②「public」フォルダを作る③そのフォルダに「index.html」ファイルを作り、コードを書くリロードする「style...HTMLとテンプレートエンジン

幾つものブラウザを開くには

幾つのブラウザを開くには【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムNode.js；v20.18.0Express.jsnodemon【サーバを作る】フォルダ「EXPRESS_modules」を作る。1.初期化をする。npminit-y2.Express,nodemonをインストールするnpmiExpressnodemon3.「package.json」を見る{"name":"express-tutorial","version":"1.0.0","main":"index.js","scripts":{"test":"echo"Error:notestspecified"&&exit1","dev":"nodemonserver.js"←このコマンドを追加すると再起動が可能...幾つものブラウザを開くには

再起動ツール：Nodemon

再起動ツール：Nodemon【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムNode.js；v20.18.0Express.js【nodemonとは】ディレクトリ内のファイルの変更を検出すると、自動的にnodeアプリケーションを再起動することで、node.jsベースのアプリケーションの開発を支援するツールです。【インストール方法】コマンドプロンプトより、カレントディレクトリに移動する。npmコマンドを使って、ローカルインストールするD:\myapp>npminodemon--save-dev「package.json」ファイルを開ける{"name":"myapp","version":"1.0.0","main":"index.js","scripts":{"start":"no...再起動ツール：Nodemon

Expressの入門

フレームワーク：Express【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムNode.js；v20.18.0【Expressとは】Node.jsで利用できるWebアプリケーションフレームワークです。Webアプリケーションとは、インターネット上で利用するサービスを動かすシステムです。フレームワークとは、システム開発時によく使う機能や設計などを予め用意してあるアプリケーションです。つまり、Webアプリケーションを開発する上では、より短いプログラムで効率よく開発することができます。【Express.jsの使い方】1.プロジェクトの作成新しいディレクトリ「myapp」を作成し、そのディレクトリでnpmプロジェクトを初期化します。C:\Users\Owner>d:D:\>mkdirmya...Expressの入門

VscodeにNode.jsを組み込む

VscodeにNode.jsを組み込む【開発環境】OS：Win11（64ビット）VSCode1.72.2、node,js:v20.18.0参照サイトVisualStudioCodeとNode.jsの導入についてNode.jsはインストールされているものとする【VSCodeにNode.js用のパッケージ入れる】1.eslintを入れる。Javascriptの書き方を事前にチェックしてくれる品質管理ツールです2.Node.jsModulesを入れるNode.jsの機能をインテリセンスを自動的に表示してくれます。VscodeにNode.jsを組み込む

Node.js--インストール編

Node.js【Node.jsとは】Node.jsは、一般的なJavaScriptでサーバーサイドの処理を制御できるように作られたもので大量のアクセスを高速に捌くことができる特徴があります。以前、JavaScriptはユーザーのブラウザ上で動作し、動的なWebページを構築するために使われていました。そして、サーバーサイドではPHPやRubyを使って開発するのが一般的でした。しかし、Node.jsの登場により、サーバー上でもJavaScriptを実行できるようになり、開発者はフロントエンドとバックエンドの両方をJavaScriptで書けるようになり、またモジュール機能によりさまざまな機能を簡単に組み込めるパッケージが公表される様になった。【Node.js＝ランタイム環境】ランタイム環境は、プログラムが動作す...Node.js--インストール編

JS--resizeイベント

resizeイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【resizeイベント】resizeイベントはブラウザのウィンドウサイズが変更されたときに発生するイベントです。onresizeプロパティに対してイベントハンドラを設定したり、addEventListenerメソッドの引数としてresizeを指定してイベントリスナーを登録できます。【resizeイベントの使い方】resizeイベントはページを表示しているブラウザのウィンドウサイズが変更されたときに発生するイベントです。【onresizeプロパティ】windowオブジェクトのプロパティにイベントハンドラを登録する場合イベントハンドラには、無名関数、アロー関数、コールバック関数は使える。【イベントリスナーを登録する場...JS--resizeイベント

beforeunloadイベント

beforeunloadイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【beforeunloadイベントとは】→HTMLページが現在のページから他のページへ遷移する直前に発生するイベントです。遷移前のため、確認ダイアログを表示してページの遷移をキャンセルすることができます。onbeforeunloadプロパティに対してイベントハンドラを設定したり、addEventListenerメソッドの引数としてbeforeunloadを指定してイベントリスナーを登録できます。【beforeunloadイベントの使い方】beforeunloadイベントはHTMLページが現在のページから他のページへ遷移する直前に発生するイベントです。【window.onbeforeunloadプロパテ...beforeunloadイベント

DOMContentLoadedイベント

DOMContentLoadedイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【DOMContentLoadedイベントとは】DOMContentLoadedイベントはHTMLページの読み込みが完了しHTMLのパース(解析)が完了してDOMツリーの構築が完了した時点で発生するイベントです。このイベントはaddEventListenerメソッドの引数としてDOMContentLoadedを指定してイベントリスナーを登録してのみ利用できます。【DOMContentLoadedイベントの使い方】DOMContentLoadedイベントはHTMLページの読み込みが完了しHTMLのパース(解析)が完了してDOMツリーの構築が完了した時点で発生するイベントです。【イベントリスナーを...DOMContentLoadedイベント

loadイベント

loadイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【loadイベント】loadイベントはHTMLページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発生するイベントです。【loadイベントの使い方】loadイベントはHTMLページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発生するイベントです。【onloadプロパティに、イベントハンドラを登録した場合】windowオブジェクトのプロパティにイベントハンドラを登録する場合はonloadプロパティを使用します。【イベントリスナーを登録する場合】addEventListenerメソッドの一番目の引数には、'load'を指定し、2番目にはイベントハンドラを指定す...loadイベント

copyイベント,cutイベント,pasteイベント

copyイベント,cutイベント,pasteイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントの意味】・copyイベント→ブラウザ上でコピー操作を行ったときに発生するイベント・cutイベント→ブラウザ上でカット操作を行ったときに発生するイベント・pasteイベント→ブラウザ上でペースト操作を行ったときに発生するイベント【イベントの使い方】copyイベント、cutイベント、pasteイベントとも、下図の通りで、Elementオブジェクトで発生する。【要素属性値に、イベントハンドラーを登録した場合】※赤字は、属性名＜textareaoncopy="copy()"oncut="cut()"onpaste="paste()"＞＜/textarea＞＜script＞func...copyイベント,cutイベント,pasteイベント

JS--inputイベント

inputイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【inputイベントの使い方】inputイベントはフォーム(input要素)や選択メニュー(select要素)、テキストエリア(textarea要素)にてユーザーの操作によって値が変更されたときに発生するイベントです。HTMLElementオブジェクトで発生します。【要素属性：oninputにイベントハンドラーを登録した場合】＜label＞名前：＜inputtype="text"oninput="inputChange()"＞＜/label＞＜script＞functioninputChange(){console.log('Change');}＜/script＞【oninputプロパティにイベントハンドラーを登録...JS--inputイベント

JS--changeイベント

changeイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【changeイベントとは】フォーム(input要素)や選択メニュー(select要素)、テキストエリア(textarea要素)にてユーザーの操作によって値が変更されたときに発生するイベント。【onchange属性を使用する場合】＜label＞名前：＜inputtype="text"onchange="inputChange()"＞＜/label＞＜script＞functioninputChange(){console.log('Change');}＜/script＞【onchangeプロパティ】【イベントリスナーを登録した場合】【関数の引数にEventオブジェクトが渡された場合】イベントハンドラやイベントリス...JS--changeイベント

KeyboardEventで取得できるキー情報

KeyboardEventに含まれるキー情報【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【キーに関するプロパティ】KeyboardEventオブジェクトではイベントが発生したときのキーの情報を参照するためのプロパティが用意されています。・プロパティKeyboardEvent.code押されたキーKeyboardEvent.key押されたキーが表す文字KeyboardEvent.codeはキーボードのどのキーが押されたのかを文字列で返します。それに対してKeyboardEvent.keyは押されたキーが表す文字を文字列で返します。aというキーを単に押したときと、Shift+aを押した場合で結果をみてください。code:KeyA,key:acode:KeyA,key:AKeybo...KeyboardEventで取得できるキー情報

JS---MouseEvent オブジェクト

MouseEventオブジェクト【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【座標に関するプロパティ】MouseEvnetオブジェクトではイベントが発生したときのマウスの座標を表すプロパティが用意されています。座標はどこを原点とするかによっていくつかのプロパティが用意されています。MouseEvent.offsetXイベントが発生した要素の左上を原点とする座標MouseEvent.offsetY同上MouseEvent.clientXブラウザの表示エリア左上を原点とする座標MouseEvent.clientY同上MouseEvent.screenXディスプレイの左上を原点とする座標MouseEvent.screenY同上またブラウザで表示しているWebページが縦または横に長く...JS---MouseEventオブジェクト

JS--mouseenterイベント,mouseleaveイベント

マウスイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【mouseenterイベントとは】mouseenterイベントはマウスのカーソルが要素の上に乗った時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:不可キャンセルの可否:不可【mouseleaveイベント】mouseleaveイベントはマウスのカーソルが要素のから離れた時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:不可キャンセルの可否:不可【属性値にイベントハンドラを登録する場合】【要素のプロパティにイベントハンドラを登録する場合】【イベントリスナーの場合】【Eventオブジェクトが渡された場合】サンプルコード「マウスイベント.css」#mybox{wi...JS--mouseenterイベント,mouseleaveイベント

js--mousemove イベント

mousemoveイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【mousemoveイベントの使い方】mousemoveイベントはマウスのカーソルが要素の上にある状態で、マウスが動いた時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能【要素の属性値にイベントハンドラを登録する場合】＜canvasid="mycanvas"onmousemove="mouseMove()"＞＜script＞functionmouseMove(){console.log('MouseMove');}＜/script＞【ノードの要素.プロパティにイベントハンドラを入れる場合】DOMを使って取得した要素のプロパティにイベントハンドラを登録す...js--mousemoveイベント

JS--マウスに関するイベント

マウスに関するイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【mousedownイベントとmouseupイベントの使い方】・mousedownイベントはマウスのカーソルが要素の上にある状態で、マウスが押された時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能・mouseupイベントはマウスのカーソルが要素の上にある状態で、マウスが押された状態から離された時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能【属性値にイベントハンドラを登録した場合】・例文【DOMで得られた要素のプロパティにイベントハンドラを登録する場合】letbutton=document.get...JS--マウスに関するイベント

JS--dblclickイベント

dblclickイベント：マウスがダブルクリックされたとき【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【dblclickイベントについて】dblclickイベントはマウスのカーソルが要素の上にある状態で、マウスが極めて短い間隔で二回クリックされた時に発生するイベントです。ondblclick属性またはondblclickプロパティに対してイベントハンドラを設定したり、addEventListenerメソッドの引数としてdblclickを指定してイベントリスナーを登録できます。【dblclickイベントの使い方】Elementオブジェクトで発生します。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能1.要素の属性値にイベントハンドラを登録する場合...JS--dblclickイベント

JS--clickイベント

clickイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【clickイベントの使い方】clickイベントはマウスのカーソルが要素の上にある状態で、マウスが押されたあとで離された時に発生するイベントイベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能【onclick属性】要素の属性値にイベントハンドラを登録する場合はonclick属性を使う//属性＝イベントハンドラ＜inputtype="button"value="button"onclick="buttonClick()"＞＜script＞functionbuttonClick(){alert('Click');}＜/script＞【onclickプロパティの場合】DOMを使って取得した要素...JS--clickイベント

JS--イベントをコードから発生させる

イベントをコードから発生させる【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【コードからのイベント発生】イベントはHTTPページをブラウザで見ているユーザーの操作によって発生しますが、プログラムの中で新しいイベントを作成し指定した対象でイベントを発生させることができます。【新しいイベントを作成する】最初に新しいイベントを作成します。作成するにはEventオブジェクトをのコンストラクタを使用します。書式：newEvent(eventtype[,option])1番目の引数にイベントの種類を表す文字列を指定します。既存のイベントを作成する場合は'click'や'mousedown'などを指定します。カスタムイベントを作成する場合は任意の名前を指定してください。省略可能な2番目の引数...JS--イベントをコードから発生させる

JS--デフォルトのキャンセルする

デフォルトのキャンセルする【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントに対するデフォルト】HTMLページをブラウザで開いている場合、例えばリンクをクリックすればリンク先のページへ移動したり、チェックボックスをクリックすればチェックされ、マウスホイールを回転すると画面がスクロールするといったデフォルトの動作がいくつか設定されています。EventオブジェクトのpreventDefaultメソッドを使用することで、イベントが発生したときにイベントに対してブラウザで設定されているデフォルトの動作をキャンセルさせることができます。【デフォルトの動作をキャンセルする】EventオブジェクトのpreventDefaultメソッドを使用すると、イベントに対するデフォルトの動作を止め...JS--デフォルトのキャンセルする

JS--イベントの伝搬を中断するには

イベントの伝搬を中断するには【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【キャンセルしたい場合】HTMLページ内でイベントが発生した場合、親要素へとイベントが伝搬していきますが、途中でこれ以上の伝搬を行わないようにイベントの伝搬を停止することができます。また、同じターゲットの同じイベントに対して複数のイベントリスナーを登録できますが、途中で他のまだ呼び出されていないイベントリスナーを呼び出さないように停止することもできます。【イベントの伝搬を止める】EventオブジェクトのstopPropagationメソッドを使用すると、イベントの伝搬を止めることができます。書式：event.stopPropagation()例えばイベントが発生し呼び出されたイベントリスナーの中でこのメソ...JS--イベントの伝搬を中断するには

JS--イベントの伝播の流れ：イベントフェーズ

イベントの伝搬【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントフェーズ】このHTMLページの中の'start'ボタンがクリックされたときに、クリックイベントがどのように発生し、どのように伝搬していくのかを理解する。【フェーズの種類】1、キャプチャリングフェーズ(Capturingphase)2、ターゲットフェーズ(TargetPhase)3，バブリングフェーズ(BubblingPhase)【キャプチャリングフェーズ】HTMLページの中の'start'ボタンがクリックされると、一番最上位のオブジェクトであるWindowオブジェクトでまずclickイベントを発生させ、その後DOMツリーの構造に沿って伝播する。Documentオブジェクト→html要素→、body要素→div...JS--イベントの伝播の流れ：イベントフェーズ

currentTargetプロパティとtargetプロパティの違い

currentTargetプロパティとtargetプロパティの違い【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【Event.currentTargetプロパティとEvent.targetプロパティの違い】Event.currentTargetプロパティ→現在イベントリスナーが実行されている要素を指します。イベントが伝播している際に、イベントリスナーを設定した要素を指します。イベントハンドラの場合は＜inputtype="button"value="button"id="xxx"＞＜script＞functionbutotnClick(event){console.log('Hello');}letbutton=document.getElementById('xxx');//...currentTargetプロパティとtargetプロパティの違い

JS--発生したイベント情報の取得

発生したイベント情報の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【Eventオブジェクトを受け取る】ターゲットとなる要素（＜input＞など）のプロパティに対してイベントハンドラを登録する場合と、addEventListenerメソッドを使ってイベントリスナーを登録した場合、イベントが発生すると登録したコールバック関数が呼び出されます。この時、一番目の引数に発生したイベントの情報が格納されたEventオブジェクトが渡されてきます。例文＜inputtype="button"value="button"id="xxx"＞＜script＞//コールバック関数functionbutotnClick(event){console.log('Hello');}letbutton=d...JS--発生したイベント情報の取得

イベントハンドラの記述位置

イベントハンドラを登録するコードの記述位置に関する注意と対処方法【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【コード順序に依るエラー】例文＜script＞要素と＜input＞要素の順序を逆さにすると、エラー>>TypeError:Cannotreadproperty'addEventListener'ofnull理由は、HTMLページはファイルのダウンロードが終わったあと、HTMLページに記述されている内容をページの先頭から順にパース(解析)してDOMツリーを構築し始め、＜script＞タグを見つける度、パースを中断してjavascriptのコードを実行し始める。最初にgetElementByIdメソッドを使ってid属性が'xxx'の要素ノードを取得しようとしますが、この要素...イベントハンドラの記述位置

JS--イベントリスナーの登録

イベントリスナーの登録【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントリスナー】イベントリスナー（EventListener）は、プログラミングにおいて特定のイベントが発生したときに、そのイベントに応じて何らかの処理を行うための仕組みです。簡単に言えば、イベントリスナーは「何かが起きたら教えてね」というプログラムの部品です。【イベントハンドラと、イベントリスナーの関係】イベントリスナー:「ボタンがクリックされたら何かをする」と設定しておく。target.addEventListener(type（イベントの種類）,callback（イベントハンドラにコールバックを選択）[])イベントハンドラ:ボタンがクリックされたときに、実際に「何かをする」ためのコード。＜inputt...JS--イベントリスナーの登録

JS--要素のプロパティにイベントハンドラを登録する

要素のプロパティにイベントハンドラを登録する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム■DOMを使って取得した要素のプロパティに対してイベントハンドラを登録する方法について解説する。基本的な使い方はHTML要素の属性に対していイベントハンドラを登録する方法と似ていますが、JavaScriptのコードのみで実現することが出来る。【要素オブジェクトのプロパティにイベントハンドラを登録す】HTML要素の属性としてイベントハンドラを設定する場合には、要素の属性値に直接イベントハンドラを記述していました。＜inputtype="button"value="button"onclick="イベントハンドラ"＞DOMを使用するとHTMLページの中の任意の要素を要素オブジェクトとして取得で...JS--要素のプロパティにイベントハンドラを登録する

JS--イベントハンドラの登録

イベントハンドラの登録【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【HTML要素の属性としてイベントハンドラを登録する】HTML要素の属性を使ってイベントハンドラを登録する方法です。例えばinput要素でマウスでクリックしたときに実行するイベントハンドラを登録するには次のように記述します。・方法＜nputtype="button"value="button"onclick="イベントハンドラ"＞onclick属性に対する値としてイベントハンドラを記述します。イベントハンドラの個所には実行するJavaScriptのコードや関数を記述します。イベントハンドラとしてJavaScriptのコードを直接記述するには次のように記述します。実行する文が一つの場合は末尾のセミコロンは省略でき...JS--イベントハンドラの登録

JS--クラスの継承

クラスの継承【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【class構文とは】class構文はコンストラクタやメソッドを簡単に定義できるものです。15年のES2015(ES6)からjavaScriptに導入されるようになった。【class構文の書き方】1.クラス宣言する書式classクラス名{//コンストラクタや、メソッドを定義する}2、class式を用いる方法→class式での特徴としてクラスを再宣言（再定義）することができる。varmyClass=class{//コンストラクタやメソッドを定義する}【コンストラクタを作る】コンストラクタ、つまりクラスの初期化をconstructorメソッドで行うclassUser{//インスタンスのプロパティ設定と初期化construct...JS--クラスの継承

JS--オブジェクト指向のclassを理解する

オブジェクト指向のclassを理解する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【classとは】JavaScriptのclassは、オブジェクト指向プログラミング（OOP）の概念を実現するための構文です。クラスは、同じプロパティやメソッドを持つオブジェクトの設計図となるものです。classキーワードを使用してクラスを宣言し、そのクラス内でプロパティやメソッドを定義します。クラス内で定義されたメソッドは、そのクラスから作成されたオブジェクト（インスタンス）で使用することができます。基本構造classMyClass{constructor(){//コンストラクタ:インスタンスを作成する際に実行されるメソッド//インスタンス固有の初期化処理を行う}method1(){//メソッ...JS--オブジェクト指向のclassを理解する

JS--ドキュメントに文字を書く

ドキュメントに文字を書く【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ドキュメントに文字列を書き込む】Documentオブジェクトのwriteメソッドは、ドキュメントに対して文字列を書き込みます。書式：document.write(string)引数に指定した文字列をドキュメントに対して書き込みます。書き込まれた文字列はHTMLコードとして扱われます。サンプルブラウザを立ち上げる<script>要素の下にHelloが書き込まれていることが確認できます。このように簡単にドキュメントに対して文字列の形式でHTMLコードを書き込むことができますが、現在HTMLに関する仕様を定めているHTMLLivingstandardではこのメソッドの使用について推奨はしていません。Documen...JS--ドキュメントに文字を書く

JS--複数のノードをまとめて追加

複数のノードをまとめて追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【DocumentFragmentオブジェクトとは】DocumentFragmentオブジェクトは、JavaScriptで使われる特別なオブジェクトで、親ノードを持たない軽量なドキュメントの一部を表します。これを使うと、複数のノードを一時的にまとめて操作し、最終的に一度にDOMツリーに追加することができます。【DocumentFragmentオブジェクトを作成する】最初に空のDocumentFragmentオブジェクトを作成します。DocumentオブジェクトのcreateDocumentFragmentメソッドを使います。書式:document.createDocumentFragment()実際に作成す...JS--複数のノードをまとめて追加

JS--現在処理を実行しているscript要素を取得

現在処理を実行しているscript要素を取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【currentScriptプロパティの使い方】DocumentオブジェクトのcurrentScriptプロパティを参照すると現在実行している<script>要素を取得します。書式；document.currentScriptサンプルこのHTMLページをブラウザで表示するとコンソールには次のように出力されます＜script＞letelement=document.currentScript;console.log(element);＜/script＞ブラウザを立ち上げるJS--現在処理を実行しているscript要素を取得

HTMLを表す文字列からノードを作成し指定の位置に追加

HTMLを表す文字列からノードを作成し指定の位置に追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを指定の位置に追加する】ElementオブジェクトのinsertAdjacentHTMLメソッドを使うと指定した文字列からノードを作成し追加することができます。書式：element.insertAdjacentHTML(position,text)2番目の引数に指定した文字列をHTML文として解析し、HTML文からノードを作成します。作成したノードを1番目の引数で指定した位置に追加します。1番目の引数で指定する位置2番目の引数にはHTMLとして解析可能な文字列を指定例文：'＜pclass="msg"＞Hello＜/p＞'サンプル・ブラウザを立ち上げる「前のノードを追加」ボ...HTMLを表す文字列からノードを作成し指定の位置に追加

JS--ノードの削除

ノードの削除【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノード削除方法】削除方法には、ChildNodeオブジェクトのremoveメソッドを使うか、NodeオブジェクトのremoveChildメソッドを使うかです。【removeメソッド】removeメソッドは指定のノードを削除します。書式：childnode.remove()例文id属性がxxxのノードを削除する場合letchildnode=document.getElementById('xxx');childnode.remove();【removeChildメソッド】NodeオブジェクトのremoveChildメソッドはノードを削除します。書式：parentnode.removeChild(childnode)1番目...JS--ノードの削除

JS--ノードの置換

ノードの置換【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを別のノードに置き換える方法】1.ChildNodeオブジェクトのreplaceWithメソッドを使ってノードを別のノードに置き換える方法書式；childnode.replaceWith(node[,node,...])引数には置き換えるNodeオブジェクトまたはDOMStringオブジェクトを指定します。DOMStringオブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、対象のノードを複数のノードと置き換えます。2.NodeオブジェクトのreplaceChildメソッドを使ってノードを別のノードに置き換える方法書式：parentnode.replaceCh...JS--ノードの置換

ノードを子ノードの中の指定ノードの前または後ろに追加

ノードを子ノードの中の指定ノードの前または後ろに追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを子ノードの中の指定ノードの前に追加する(before)】ChildNodeオブジェクトのbeforeメソッドはノードを子ノードの中の指定ノードの前に追加します。書式：childnode.before(node[,node,...])引数には追加するNodeオブジェクトまたはDOMStringオブジェクトを指定します。DOMStringオブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。サンプルブラウザを立ち上げる表示されたボタンをクリックすると、まずliタグの新しい要素ノードとテキストノードを作成...ノードを子ノードの中の指定ノードの前または後ろに追加

JS--子ノードの追加

ノードを子ノードの中の先頭または最後に追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを子ノードの先頭に追加する】ParentNodeオブジェクトのprependメソッドはノードを子ノードの先頭に追加します。書式：parentnode.prepend(node[,node,...])引数には追加するNodeオブジェクトまたはDOMStringオブジェクトを指定します。DOMStringオブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。例えば追加するノードとしてdivタグの要素ノードを新しく作成し、追加先としてid属性がxxxのノードの子ノードの先頭に追加するには次のように記述します。letp...JS--子ノードの追加

JS--ノードの作成

ノードの作成【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【要素ノードを作成する】DocumentオブジェクトのcreateElementメソッドは新しい要素ノードを作成します。書式；document.createElement(localname)1番目の引数に作成する要素ノードのタグ名をDOMStringオブジェクトで指定してください。戻り値はElementオブジェクトが返ります。例えばdivタグをの要素のノードを新しく作成するletelement=document.createElement('div');console.log(element.nodeName);>>DIVconsole.log(element.nodeType);>>1console.log(elem...JS--ノードの作成

JS--スタイルの取得と設定

スタイルの取得と設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【スタイルの基本】HTMLでは要素に対するスタイルの設定をstyleタグや個々の要素に対するstyle属性で設定できます。(外部のスタイルシートに記述しておき読み込むこともできます)。styleタグのサンプルこのページにはpタグが2つ含まれまれています。styleタグの中でpタグに対して文字色とフォントサイズに関するスタイルを設定しており、どちらのpタグにも同じようにスタイルが適用されていますブラウザを立ち上げる次に個々のpタグに対してstyle属性を使ってスタイルを設定するリロードする1つ目のpタグにはsytleタグでは設定していない種類のスタイルを設定している。（フォントの太さ）2つ目のpタグでは、style...JS--スタイルの取得と設定

JS--要素に設定された属性を削除

要素に設定された属性を削除【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【属性を削除する】ElementオブジェクトのremoveAttributeメソッドは、対象の要素に設定されている属性を削除します。書式：element.removeAttribute(qualifiedName)引数には削除する属性の属性名をDOMStringオブジェクトで指定します。設定されていない属性名を指定した場合は何も行いません。サンプルブライザを立ち上げる表示されたボタンをクリックすると、id属性の値が'shopinfo'の要素ノードを取得し、最初の子要素に設定されている属性の中でclass属性とtarget属性を削除します。そのあとで残っている属性を取得し名前と値をコンソールに出力します。JS--要素に設定された属性を削除

JS--要素に設定された属性の一覧を取得

要素に設定された属性の一覧を取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【属性の一覧を取得する(attributesプロパティ)】Elementオブジェクトのattributesプロパティを参照すると、要素に設定されている属性の一覧を参照することができます。書式：element.attributes参照できる値は、属性名と属性値の情報が格納されたAttrオブジェクトの集合であるNamedNodeMapオブジェクトです。NamedNodeMapオブジェクトではlengthプロパティで格納されているAttrオブジェクトの数を参照できます。またitemメソッドで引数に指定したインデックスのAttrオブジェクトを取得できます。そしてAtrrオブジェクトではnameプロパティで属性...JS--要素に設定された属性の一覧を取得

JS--id属性やclass 属性の取得及び設定

id・classなどの属性の取得及び設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【属性とは】属性とは、HTMLのタグに補足情報を与える役割を持つもので、一般的には、id属性・class属性のようにタグに名前を付けたり、飾りをつけたり、働きを調整したりすることができます。【属性の指定方法】＜要素名属性名="属性値"＞〇〇の〇〇は〇〇です属性値を囲む引用符は「"（ダブルクオート）」の代わりに、「'（シングルクオート）」を使っても構いません。【属性値を取得する(プロパティ)】JavaScriptからはプロパティや、メソッドを使って属性値を参照したり新しい値を設定することができます。要素に設定された属性値は次のようにプロパティ名として属性名を指定して参照することができます。書式：...JS--id属性やclass属性の取得及び設定

要素内のHTMLを取得・設定

要素内のHTMLを取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【HTML文を参照する】innerHTMLプロパティは、HTMLElementオブジェクトのinnerTextプロパティと違って、HTML要素を含んで参照される。書式；element.innerHTML戻り値は要素に含まれるHTML文が文字列で戻されます。HTML文はHTMLファイルに記述されている内容をそのまま取得します。例えば次のdiv要素ノードのinnerHTMLプロパティの値を参照した場合、どのような値を返すのか確認します。＜div＞＜p＞Apple＜br＞Lemon＜/p＞＜p＞Orange＜/p＞＜/div＞div要素ノードにはの2つのp要素ノードが含まれています。要素内のHTML文をそのまま...要素内のHTMLを取得・設定

要素内のレンダリングされたテキストを取得・設定

要素内のレンダリングされたテキストを取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【テキストを参照する】HTMLElementオブジェクトのinnerTextプロパティを参照すると要素および要素の子孫要素のテキストを取得することができます。書式；htmlElement.innerText戻り値は、すべてのテキストが連結されたDOMStringオブジェクトが戻されます。どのような文字列が返されるのかについては、要素や要素の子孫要素がブラウザで表示されるときと同じ内容のテキスト内容を取得します。空白ノードなどのようにブラウザでは表示されないものは取得しませんし、スタイルシートの設定などで非表示になっている要素。＜style＞タグのように元々ブラウザに表示されない要素のテキ...要素内のレンダリングされたテキストを取得・設定

JS--ノード内のテキストを取得・設定

ノード内のテキストを取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【テキストを参照する】NodeオブジェクトのtextContentプロパティを参照するとノードおよびノードの子孫ノードのテキストをすべて連結した値を取得することができます。書式；node.textContent戻り値はすべてのテキストが連結されたDOMStringオブジェクトが戻されます。実際にどのようなデータがテキストとして返されるのかは、ノードの種類によって異なります。*1と記述したノードについては、コメントと処理命令ノード以外のすべての子ノードのtextContentの値を連結した文字列を返します。それぞれのノードでNode.nodeValueがどのような値を返すのかは「ノードの値を取得・設定(n...JS--ノード内のテキストを取得・設定

JS--ノードの値を取得・設定

ノードの値を取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードの値を参照する】NodeオブジェクトのnodeValueプロパティを参照するとノードの値を取得することができます。書式；node.nodeValue戻り値はノードの値がDOMStringオブジェクトで戻されます。どのような値が返されるのかはノードの種類によって異なっています。例えばノードの種類がTEXT_NODE(テキストノード)の場合、テキストノードに含まれるテキストが返されます。サンプルブラウザを立ち上げるボタンを押すと、pタグのノードをすべて取得します。そのあとで、pタグの子ノードであるテキストノードを取得するためにそれぞれの最初の子ノードを取得します。最後にテキストノードのノードの値を取得し、コ...JS--ノードの値を取得・設定

JS--ノード名の取得

ノード名の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【ノードの名前を取得する】NodeオブジェクトのnodeNameプロパティを参照するとノードの名前を取得することができます。書式；node.nodeName戻り値はノードの名前を表すDOMStringオブジェクトが戻されます。名前はノードの種類によって異なっています例えばノードの種類がELEMENT_NODE(要素ノード)の場合は、要素のタグ名がノードの名前として返されます。ノードの種類がTEXT_NODE(テキストノード)の場合、常に"#text"という値がノードの名前として返されます。サンプルブラウザを立ち上げるボタンを押すと、id属性の値が'blog'のノードを取得し、そのノードの子ノードをすべて取得します。そのあとで...JS--ノード名の取得

JS--ノードの種類を取得

ノードの種類を取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【ノードの種類を確認する】NodeオブジェクトのnodeTypeプロパティを参照するとノードの種類を確認することができます。書式；node.nodeType戻り値はノードの種類を表すunsignedshort型の値が戻されます。どの値がどのノードの種類になるのかは次の一覧を見てください。ノードを取得したあと、ノードのnodeTypeプロパティを参照することで取得したノードの種類を確認することができます。サンプル＜!DOCTYPEhtml＞＜htmllang="ja"＞＜head＞＜metacharset="UTF-8"＞＜title＞nodeType＜/title＞＜/head＞＜body＞＜p＞今日は外でランチを食べま...JS--ノードの種類を取得

ノードの子・親・兄弟ノードを取得--2

最初の子ノードと最後の子ノードを取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、【最初の子ノードと最後の子ノードを取得する】1，firstChildプロパティこのノードの1つ下の階層にある子ノードの中の最初のノードを取得することが出来る。書式；node.firstChild2，lastChildプロパティ】このノードの1つ下の階層にある子ノードの中の最後のノードを取得することが出来る。書式；node.lastChildこれらの戻り値としてNodeオブジェクトを返します。子ノードがなかった場合はnullが返ります。例えば特定のノードの子ノードの中で最初と最後の子ノードを取得するには次のように記述します。letelement=document.getElementById('mai...ノードの子・親・兄弟ノードを取得--2

ノードの子・親・兄弟ノードを取得--1

ノードの子・親・兄弟ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【すべての子ノードを取得する】DocumentオブジェクトのgetElementByIdメソッドやquerySelectorメソッドなどを使って要素ノードを取得したあと、NodeオブジェクトのchildNodesプロパティを参照することで、このノードの1つ下の階層にある子ノードをすべて取得することができます。・書式node.childNodesこのプロパティは参照専用です。戻り値としてNodeListオブジェクトを返します。NodeListオブジェクトは複数のノードの集合です。NodeListオブジェクトではlengthプロパティとitemメソッドが用意されており、次のように取得したノードの数を取得したり、...ノードの子・親・兄弟ノードを取得--1

querySelectorのサンプル

querySelectorのサンプル【開発環境】OS：Win11（64ビット）VSCode1.72.2、【querySelectorのサンプル】querySelectorメソッドはCSSセレクタ形式で条件を指定して要素ノードを取得する。ブラウザを立ち上げるボタンを押すとコンソールに表示されたら、OK【querySelectorAllのサンプル】querySelectorAllメソッドを使ったサンプルを試してみます。querySelectorAllメソッドは条件に一致するすべての要素ノードを取得します。ブラウザを立ち上げるボタンを押すquerySelectorのサンプル

CSSセレクタ形式の条件に一致する要素ノードを取得

CSSセレクタ形式の条件に一致する要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【querySelectorメソッドおよびquerySelectorAllメソッド】querySelectorメソッドおよびquerySelectorAllメソッドは、CSSのセレクタ形式で条件を指定して一致する要素ノードを取得します。id要素の指定といった簡単なものから条件を組み合わせた複雑なものまで指定することができます。【querySelectorメソッド】querySelectorメソッドはCSSセレクタ形式で条件を指定して要素ノードを取得します。・書式document.querySelector(selectors)引数にはCSSセレクタ形式の値をDOMStringオブジェクトで...CSSセレクタ形式の条件に一致する要素ノードを取得

name属性の値を指定して要素ノードを取得

name属性の値を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【getElementsByNameメソッド】DocumentオブジェクトのgetElementsByNameメソッドはname属性の値を指定して要素ノードを取得します。・書式document.getElementsByName(name)引数にはname属性の値をDOMStringオブジェクトで指定します(例えば'hobby'など)。戻り値はNodeListオブジェクトです。NodeListオブジェクト→複数の要素ノードの集合です。NodeListオブジェクトではlengthプロパティとitemメソッドが用意されており、次のように取得した要素ノードの数を取得したり、指定の要素ノードを取り出すこと...name属性の値を指定して要素ノードを取得

class属性の値を指定して要素ノードを取得

class属性の値を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【getElementsByClassNameメソッド】DocumentオブジェクトのgetElementsByClassNameメソッドは、要素のclass属性の値を指定して一致する要素ノードをすべて取得します。【書式と使い方】・書式document.getElementsByClassName(classnames)引数にはclass属性の値をDOMStringオブジェクトで指定します(例えば'box'など)。複数のclass属性の値を指定することができ、指定した値のいずれかに一致する要素ノードをすべて取得します。その場合は空白文字で区切って指定します(例えば'boxmenu'など)。戻り値...class属性の値を指定して要素ノードを取得