JavaScript(ジャバスクリプト) 【JavaScript】九九の表を作成する-Part1
JavaScriptを使用して九九の表を作成してみます。 HTMLファイルの作成 まず、HTMLファイルを作成します。以下のような新しいHTMLファイルを準備します。 <!DOCTYPE html> <html> <head> <title...
JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト) 
JavaScript(ジャバスクリプト) 【JavaScript】data-url:を動的に書き換える方法
JavaScriptを使ってdata-url:を書き換えてみます。 data-url:とは data-url:は、データのURLを表すプレフィックスです。data-url:を使用することで、外部ファイルを参照せずにHTML内にデータを直接埋...
JavaScript(ジャバスクリプト) submit（送信）ボタンをクリックしたときに別のページにリダイレクトする
submit（送信）ボタンをクリックしたときに、別のページにリダイレクトする方法についてご紹介します。 送信ボタンを押した時に別ページにリダイレクトさせる HTMLとJavaScriptを使用して、以下のようなコードを書くことで別ページにリ...
JavaScript(ジャバスクリプト) 【GAS】JavaScriptからGASのdoPost関数にデータを送信するには？
doPost関数にデータを送信する JavaScriptからGASのdoPost関数にデータを送信するには、XMLHttpRequestオブジェクトを使用してPOSTリクエストを送信します。 以下は、JavaScriptでPOSTリクエスト...
JavaScript(ジャバスクリプト) JavaScriptでiframeの幅と高さを画面サイズ（ウィンドウ幅）に合わせて自動調整するスクリプトの作り方
iframeを使うと、別のサイトやページを埋め込むことができ、自分のWebページに他のコンテンツを追加することができます。 そこで、JavaScriptを使用してiframeの幅を画面サイズに合わせて調整する方法を紹介します。前回は「幅」を...
JavaScript(ジャバスクリプト) JavaScriptでiframeの幅を画面サイズ（ウィンドウ幅）に合わせて調整するスクリプトの作り方
Webページ上に外部のコンテンツを埋め込むために、よく使用されるのがiframeです。iframeを使うと、別のサイトやページを埋め込むことができ、自分のWebページに他のコンテンツを追加することができます。 しかし、iframeを使用する...
JavaScript(ジャバスクリプト) 【JavaScript】テキストをクリップボードにコピーする方法 (Text Copy)
JavaScriptで画像をクリップボードにコピーする方法について解説します。実際にサンプルコードを用いながら学びましょう。 JavaScriptでテキストをクリップボードにコピーする JavaScriptでテキストをクリップボードにコピー...
JavaScript(ジャバスクリプト) 【JavaScript】マウスカーソルを追従する図形（マウスストーカー）を作る｜CSS
CSSとJavaScriptを使って、マウスに追従する図形や色を作ってみます。 サンプルはこちら マウスに追従する図形を作る流れ 以下は、CSSを使用してマウスに追従する図形を作成するための基本的な手順です。 HTMLファイルで、マウスに追...
JavaScript(ジャバスクリプト) 【JavaScript】リダイレクトする方法（location.href）
ページを開いた時に別のページにリダイレクトさせるJavaScriptです。 ページをリダイレクトさせる（location.href） location.href location.hrefは、locationオブジェクトのプロパティです。こ...
JavaScript(ジャバスクリプト) 【DOM】DOM (Document Object Model) とは？ツリー構造について
DOM (Document Object Model) とは？ DOM (Document Object Model) とは、HTML ページや XML 文書を構成する要素を树状構造として表現する仕組みです。この DOM を操作することで、...
JavaScript(ジャバスクリプト) 加算代入演算子 (+=)とは？【JavaScript】
加算代入演算子 (+=)とは？ 加算代入演算子(+=)は、変数に対して値を加算するための演算子です。 以下のように使用します。 変数 += 値 加算代入演算子の実行例 例えば、下記のようなプログラムを実行したとします。 下記のようなコードを...
JavaScript(ジャバスクリプト) 【JavaScript】画面移動時にアンカーの位置がズレる？ときの対応方法
そんなことがあるのかな…？と思ったら、そんなことがありましたので記録として残しておきたいと思います…。 アンカー要素がfixedの場合にずれる？ アンカー要素の position が fixedの場合が考えられます。上部のヘッダーが固定され...
JavaScript(ジャバスクリプト) 【JavaScript】document.createElement(“a”);リンク・リンクターゲット設定方法
document.createElement("a");にリンクやターゲットを設定してみます。 document.createElement("a");だけではリンクが設定されない document.createElement("a");で...
JavaScript(ジャバスクリプト) fetch(url)で中身を取り出す（Object.values()・Object.keys()・Object.entries()）
前回の続きです。Object.values()・Object.keys()・Object.entries()で中身のデータを取り出していきます。 Object.values() まずは、Object.values()でデータを取得してみます...
JavaScript(ジャバスクリプト) object Objectの中身を取り出す（Javascript）
前回、Fetch APIでGASを使って「object Object」を取り出すことに成功しましたが、この続きです。 object Objectの中身は？ このFetch APIでGASを使って公開側のページでJavascriptを使った結...
JavaScript(ジャバスクリプト) .textContentと.innerHTMLの違いについて（JavaScript）
JavaScriptでテキストを出力する.textContentと.innerHTMLの２つの違いについて。 .textContent .textContentは、文字をそのまま出力します。 HTMLがテキストとしてそのまま出力されました。...
JavaScript(ジャバスクリプト) 【JavaScript】続・ボタンクリックで画面を表示非表示させる方法｜style.display
前回、JavaScriptを使ってボタンクリック時に画面に要素を表示させる方法をお話しましたが、その続きです。今回はクリックで「表示・非表示」できるようにします。 前回のお話はこちら▼ 要素を非表示にする（display:none） こちら...
JavaScript(ジャバスクリプト) 【JavaScript】ボタンクリックで画面に要素を表示させる方法｜style.display
JavaScriptを使って、ボタンや要素のクリック時に画面に要素を表示させる方法です。 document.getElementById("id").～ 「document.getElementById」を使って、要素のidを取得します。 ...
JavaScript(ジャバスクリプト) 【JavaScript入門】JavaScriptで使える演算子の一覧
JavaScriptを扱っていると、毎回使える演算子が分からなくなるので、メモ。 加算(+) 足し算です。 <script> const a = 20; const b = 10; const c = a + b; document.wri...
JavaScript(ジャバスクリプト) 【JavaScript】new 演算子とは？基本と使い方について
JavaScriptの「const sample = new Sample('A', 'B', 'C');」という書き方について解説していきます。 new 演算子は組み込みオブジェクト型のインスタンスを作成する ひとことで言うと「組み込みオ...
JavaScript(ジャバスクリプト) 【JavaScript】.addEventListener() とは？
JavaScriptを学んでいると「.addEventListener()」がよく出てきますが、よく分からなかったので・・・メモ。 .addEventListener() addEventListener() は EventTarget イ...
JavaScript(ジャバスクリプト) 【JavaScript】document.currentScriptについて
document.currentScript document.currentScriptを実行すると、現在実行しているscript要素を取得することができます。 Document.currentScript プロパティは、現在処理中で、 ...
JavaScript(ジャバスクリプト) Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML’)
「Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')」というメッセージで詰まってしまいました。 このエラー…何？？ 全体のコード 本文の「こんにちは...
JavaScript(ジャバスクリプト) 【Javascript】ルビを削除するブックマークレットを作る方法
HTML上で文字にルビ（ふりがな）が付けられている際に、こちらのルビを消した状態で表示したいと思った時に使える方法です。 青空文庫のルビを削除するブックマークレットを作る 「ブックマークレート」という機能を使うことで、ルビを消した状態で同じ...
JavaScript(ジャバスクリプト) 【Javascript】要素をクリックすると表示・非表示を切り替えて吹き出しのようなメニューを表示させる
なんでまた、こんな表現を作りたいと思ったのか自分でも謎ではあるのですが「要素（ボタン）をクリックしたときに、そこに吹き出しのようなメニューを表示させたい」と思ったので、作ってみたいと思います。 ▶サンプルページはこちら クリックした時に関数...
JavaScript(ジャバスクリプト) 【JavaScript】簡易パスワード認証・閲覧制限が掛かったようなページを作る方法
パスワード認証ページを作ろうとした時は、Basic認証を使ったり、PHPでサーバーサイドで処理をさせる…といった方法が通常かと思いますが、Javascriptだけでもそれっぽい感じの「パスワード認証ページ」を作ることが可能です（秘匿性という...
JavaScript(ジャバスクリプト) 【JavaScript】ドラッグ＆ドロップでページ内の画像を動かす方法（要素をドラッグアンドドロップ移動）
画像を「ドラッグアンドドロップで移動」させたい時に使える方法です。マウスクリックした時とドラッグした時、離されたときにイベントを発生させて画像を移動させる処理をJavaScriptで作ってみます。 ▶サンプルページはこちら DataTran...
JavaScript(ジャバスクリプト) 【JavaScript】ページを開くと同時に自動で画像を自動で無限ループで切り替える方法｜簡易アニメーション作成・無限ループ
ページを開くと同時に自動で画像を自動で無限ループで切り替える ▼デモページはこちら 前回は、JavaScriptを使って「クリックして画像を切り替える」というお話をしましたが、今回はページを開いたと同時に画像が動くという仕掛けを作ります。 ...
JavaScript(ジャバスクリプト) 【Javascript】マウスをクリックして画像を切り替える方法
マウスでクリックして画像を切り替えたい 複数の画像を、マウスをクリックしてJavascriptで切り替えてみたいと思います。 ▶デモサイトはこちら スクリプト 関数ChangeImage() まずは、変数で配列を作ります。 <script ...
JavaScript(ジャバスクリプト) 【JavaScript】const let var｜再代入・再定義の違いについて
JavaScriptの変数宣言、const・let・varの違いについて。 var 再代入可・再定義可 var var_a = 10; こちらは「再代入可・再定義可」（緩め） let 再代入可・再定義不可 let let_a = 10; ...
