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を始めよう（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
スライダー【開発環境】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入門--スライダー
モーダルウィンドウ【開発環境】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入門--モーダルウィンドウ
アコーディオン【開発環境】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入門--アコーディオン
「ブログリーダー」を活用して、職案人さんをフォローしませんか？
高機能で拡張しやすいタブ【開発環境】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入門--高機能で拡張しやすいタブ
画面領域を有効活用できるタブ【開発環境】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入門--画面領域を有効活用できるタブ
変化するスティツキーヘッダー【開発環境】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入門--変化するスティツキーヘッダー
スティッキーヘッドヘッダー【開発環境】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入門--スティツキーヘッダー
多機能なスライドショー【開発環境】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入門--多機能なスライドショー
滑らかな動きをするスライドショー【開発環境】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プラグインでスライドを作る【開発環境】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入門--スライドショー
マスクプラグイン【開発環境】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入門--マスク・プラグイン
タイポグラフィの表現【開発環境】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入門--タイポグラフィの表現
見え隠れするサイドバー【開発環境】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教科書--見え隠れするサイドバー
レイアウト術【開発環境】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入門--丸ボタンのレイアウト
画像とキャプション【開発環境】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入門--画像とキャプション
様々なホバーエフェクト【開発環境】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を始めよう（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を始めよう（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
スライダー【開発環境】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入門--スライダー
モーダルウィンドウ【開発環境】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入門--モーダルウィンドウ
アコーディオン【開発環境】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入門--アコーディオン
イベント・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()
基礎編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
（｜）パターンマッチについて【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【複数の文字列のいずれかにマッチ( )】メタ文字のひとつである縦棒( )は複数の文字列のいずれか一つに一致する文字列にマッチします。文字列の候補を縦棒( )で区切って記述します。文字列 文字列 ...サンプルletregexp=/Sunday Sun sunday/;console.log(regexp.test('TodayisSunday'));>>trueconsole.log(regexp.test('Sunflowersareinbloom'));>>trueconsole.log(regexp.test('SUNDAYMORNING'));>>false【複数の選択肢を括弧で囲んでグループ化す...JS--（｜）パターンマッチについて
直前の文字を指定回数繰り返すマッチパターン【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【直前の文字が0回以上連続する文字にマッチ（*）】メタ文字のひとつであるアスタリスク(*)は直前の文字が0回以上連続する文字列にマッチします(0回以上というのは一度もなくてもいいし何回出てもいいという意味です)。・サンプルletregexp=/Ha*n/;console.log(regexp.test('Hn'));>>trueconsole.log(regexp.test('Han'));>>trueconsole.log(regexp.test('Haaaaan'));>>trueconsole.log(regexp.test('HaaUaan'));>>false【直前の文字が1回以上...JS--直前の文字を指定回数繰り返すマッチパターン
先頭や末尾にマッチするパターン【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【文字列の先頭にマッチする（^）】メタ文字のひとつであるキャレット(^)は文字列の先頭位置にマッチします。・サンプルletregexp=/^Red/;console.log(regexp.test('RedTable'));>>trueconsole.log(regexp.test('Reducespeed'));>>trueconsole.log(regexp.test('BorderColorisRed'));>>false【文字列の末尾にマッチする($)】メタ文字のひとつであるドル記号($)は文字列の末尾位置にマッチします。サンプルletregexp=/Script$/;console.log(r...JS--先頭や末尾にマッチするパターン
パターンについて【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【記述した文字列にマッチする】パターンの中に文字を記述した場合は、その文字そのものとマッチします。サンプルletregexp=/Sun/;console.log(regexp.test('TodayisSunday'));>>trueconsole.log(regexp.test('TheSunrose'));>>trueconsole.log(regexp.test('HamSandwich'));>>falseSunが文字列に含まれる場合はtrueになる。それ以外は、fals【任意の一文字（.）】メタ文字のひとつであるドット(.)は任意の一文字(例外あり)にマッチします。※ただし、次の文字にはマッチしません。\n...JS--パターン
マッチした文字列の置換【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【置換の対象を正規表現を使って指定する】Stringオブジェクトのreplaceメソッドは、対象の文字列の中の指定した文字列を、別の文字列で置換した新しい文字列を返します。・書式文字列.replace(置換する文字列,新しい文字列)引数の置換する文字列には固定の文字列を指定することもできますが、正規表現オブジェクトを指定することもできます。文字列.replace(正規表現,新しい文字列)対象の文字列の中で1番目で指定した正規表現にマッチした文字列を2番目で指定した文字列に置換します。対象の文字列に変更は行わず、置換したあとの新しい文字列が返されます。・正規表現にグローバルフラグが設定されていない場合対象の文字列...JS--マッチした文字列の置換
文字列を正規表現を使って区切るには【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【区切り文字として正規表現を指定する】splitメソッドは、対象の文字列を指定した区切り文字で分割し、分割された文字列をそれぞれ要素として格納した配列を返します。・書式文字列.split([区切り文字[,最大分割回数]])引数の区切り文字には文字列を指定することもできますが、正規表現オブジェクトを指定することもできます。文字列.split([正規表現[,最大分割回数]])サンプルletmsg=`こんにちは。今日は、朝から快晴で気持ちがいいですね。散歩が楽しいです。`;letmsgAry=msg.split(/[。、\n]/);console.log(msgAry);>>["こんにちは","今日は",...JS--文字列を正規表現を使って区切るには
マッチした文字列を取得するには【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【matchメソッドの使い方】Stringオブジェクトのmatchメソッドは、対象となる文字列が正規表現とマッチした場合に、マッチした文字列を取得します。書式は次の通りです。文字列.match(正規表現オブジェクト)文字列が引数に指定した正規表現とマッチした場合マッチした文字列が格納された配列を返します。マッチしなかった場合nullを返します。戻り値の配列にはインデックス0の要素にパターン全体にマッチした文字列が、インデックス1以降の要素には設定したキャプチャグループで囲んだパターンにマッチした文字列が格納される。(キャプチャグループを設定していない場合はインデックス1以降の要素は存在しません)。サンプ...JS--マッチした文字列の取得
文字列のインデックス取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【searchメソッドの使い方】Stringオブジェクトのsearchメソッドは、対象となる文字列が正規表現とマッチした場合に、マッチした最初の文字列のインデックスを返します。書式は次の通りです。文字列.search(正規表現オブジェクト)・マッチした場合最初にマッチした文字列の先頭文字のインデックスを返します。・マッチしなかった場合「-1」を返します。インデックスは対象の文字列の先頭文字が0、次の文字が1、と続いていきます。サンプルletregexp=/ball/;letstr1='baseballandfootball';letstr2='Makeacaketomorrow';console.log(st...JS--マッチした文字列のインデックス取得
正規表示にマッチした文字列を取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【execメソッドの使い方】RegExpオブジェクトのexecメソッドは、対象となる文字列が正規表現とマッチした場合に、マッチした文字列を取得します。書式は次の通りです。正規表現オブジェクト.exec(文字列)引数に指定した文字列が正規表現とマッチした場合は、マッチした文字列が格納された配列を返します。マッチしなかった場合はnullを返します。戻り値の配列にはインデックス0の要素にパターン全体にマッチした文字列、インデックス1以降の要素には設定したキャプチャグループで囲んだパターンにマッチした文字列が格納されます。(キャプチャグループを設定していない場合はインデックス1以降の要素は存在しません)。...JS--正規表現にマッチした文字列を取得する
文字列が正規表現とマッチするかテストする【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【testメソッドの使い方】RegExpオブジェクトのtestメソッドは、対象となる文字列が正規表現とマッチするかどうかをテストし結果として論理値を返します。・書式正規表現オブジェクト.test(文字列)引数に指定した文字列が少なくとも一つ正規表現とマッチした場合はtrueを返します。マッチしなかった場合はfalseを返します。サンプルletregexp=/ball/;letstr1='Gotoseeabaseballgame';letstr2='Makeacaketomorrow';console.log(regexp.test(str1));実行>trueconsole.log(regex...JS--文字列の規制表現のマッチテスト
エスケープ処理【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【特別な意味を持つ文字をエスケープする】正規表現のパターンで使われる文字の中にはドット(.)やプラス(+)などのように特別な意味を持つ文字があります。これらはメタ文字と呼ばれます。例えば次のような正規表現リテラルで見てみます。サンプルコードletregexp=/a.b/;console.log(regexp.test('oa.bo'));結果>trueconsole.log(regexp.test('oaxbo'));結果>true最初に試した'oa.bo'は文字列の中にa.bという文字列が含まれるのでマッチするのは分かりますが、次に試した'oaxbo'は文字列の中にa.bという文字列が含まれていないのにマッチしました...JS--エスケープ処理
正規表示【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム■正規表示とは→指定した条件に一致する複数の文字列を一つのパターンで表現する方法です。JavaScriptでは正規表現もオブジェクトのひとつです。【正規表現リテラル】正規表現オブジェクトとは正規表現で使用するパターンを定義することです。最初に正規表現リテラルを使って正規表現オブジェクトを作成する方法です。・書式/パターン//パターン/フラグ正規表現のパターンを表す値をスラッシュ(/)で囲んで記述します。フラグを設定する場合はスラッシュのあとに記述します。サンプルletregexp1=/apple/;letregexp2=/[a-zA-Z]{4}/;一つ目の正規表現オブジェクトは'apple'とマッチするパターンです。対象の文...JS--正規表示
例外をスローするには【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【throw文の使い方】throw文を使用すると例外をスローすることができます。・書式throw例外の値例外の値には通常Errorオブジェクトを指定しますが、数値や文字列といった任意の値を指定することもできます。try...catch文を使って例外がキャッチされた場合、ここで指定した例外の値がcatchの括弧の中に記述した変数に格納されます。サンプルfunctioncheckResult(point){try{if(point<50){throw'不合格です';}console.log('得点'+point);console.log('合格です');}catch(e){console.error(e);}}con...JS--例外をスローするには
例外が発生するエラーの種類【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【例外が発生するえらーの種類】例外が発生するエラーの種類として次の8種類がグローバルオブジェクトとして定義されています。Error一般的なエラーEvalErroreval関数に関するエラーInternalErrorJavaScriptの内部エラーRangeError数値が有効範囲を超えた場合のエラーReferenceError不正な参照を行った場合のエラーSyntaxErrorJavaScriptの構文エラーTypeError変数や引数の型が適切ではない場合のエラーURIErrorencodeURIまたはdecodeURIに関するエラー※ただしSyntaxErrorは実行時にエラーとなるのではなく実行前の時...JS--例外が発生するエラーの種類
try...catch文内の関数の例外処理【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【tryブロックの中から呼び出し他関数内で例外が発生した場合】try...catch文の書式は次のようになっており、例外が発生する可能性がある文をtryのあとのブロック内に記述しておく必要があります。・書式try{例外が発生する可能性がある文を記述・・・}catch(e){例外をキャッチしたときに実行される処理・・・}それではtryブロックの中でtry...catch文の外に記述された関数を呼びだし、その関数内で例外がスローされた場合functionfunc(){//ここで例外が発生}try{func();}catch(e){例外をキャッチしたときに実行される処理・・・}サンプルfuncti...JS--try...catch文内の関数の例外処理
文字数制限のため3/19（火）ショート；久下さん家午前6時30分、起床！洗濯・プラゴミ捨てなどの家事をやる。午前7時、トイレ介助・着替え介助する。紙パンツ+パット交換する。異常なし午前7時30分、パンとバナナ1/2を食うが、ババァはパン1/2を食った。洗濯物を干す午前8時、二度寝午前9時、トイレ介助後、ブログ・ツイター・インスタを書き始める。午前9時30分、久下さん家の職員が迎えに来た。午前10時半、チョコ休みお昼は、カレーヌードル午後1時、ベイシアに買い出しに行く午後1時40分、帰宅午後2時、オートアズにオイル交換に行く午後3時、帰宅午後3時半、洗濯物を取り込む午後4時半、PCを閉じる午後5時、シャッターを閉める。スマホのxの通知数を表示させるのに戦っていた。午後5時40分、夕食の準備。ペペロンチーノを...息子介護物語-エピソード65（令和6年3月）続1
try...catch...finally文【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【try...catch...finally文の使い方】try...catch...finally文を使用すると、tryブロックの中で例外がスローされたかどうかに関わらず、必ず最後に実行する処理を記述することができます。・書式try{例外が発生する可能性がある文を記述・・・}catch(e){例外をキャッチしたときに実行される処理・・・}finally{最後に実行される処理・・・}finallyのあとのブロックは、tryブロックの処理が終わったあと、また例外がスローされた場合はcatchブロックの処理が終わったあとで必ず実行されます。tryブロックやcatchブロックの中でretnrn文や...js--try...catch...finally文
try...catch文を使った例外処理【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【例外がスローされた時の挙動について】最初に例外に対して何の処理も記述していないプログラムで例外がスローされた時の挙動を確認しておきます。サンプルfunctionsum(a,b){letsum=a+b;returnsum;}console.log('Start');letresult=sum(10,8);console.log(result);console.log('End');実行Start18Endわざとエラーを起こすようにプログラムを書くfunctionsum(a,b){letsum=a+b;returnsum;}console.log('Start');letresult=sum(1...JS--try...catch文
コールバック関数/高階関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【コールバック関数/高階関数の記述方法】JavaScriptでは関数もオブジェクトのひとつであり、変数に格納したり関数を呼びだす時の引数として指定することができます。constprice=function(price){console.log('トマトの値段は'+price+'円です。');}price(100);実行トマトの値段は100円です。関数リテラルを使って関数を定義し、変数priceに格納しています。そのあとで変数に格納した関数を呼びだしています。サンプル文//高階関数//→他の関数を引数として受け取ったり、結果として関数を返す関数の事。functiontomato(price,func){//関...JS--コールバック関数/高階関数
再帰関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【再帰関数の記述方法】再帰関数とは関数内から自分自身の関数を呼びだすことです。・例functiontest(){test();}test();関数testは関数内で自分自身であるtest関数を呼びだしています。このように関数内で自分自身の関数を呼びだす関数のことを再帰関数といいます。サンプルfunctiontest(n){console.log('Hello');if(n!=0){test(n-1);}console.log('Bye');}test(2);実行HelloHelloHelloByeByeBye説明1)test関数(1)が呼び出される。引数として2が渡される。2)Helloが出力される3)test関数(1)内の...JS--再帰関数
