JavaScript(ジャバスクリプト) 【JavaScript】ul要素の子要素であるli要素から各li要素の子要素であるa要素を取得してli要素と入れ替える
このスクリプトは、ul要素の子要素であるli要素から、各li要素の子要素であるa要素を取得して、li要素と入れ替えるものです。各li要素の子要素であるa要素を取得して、li要素と入れ替えるこのスクリプトを実行することで、特定のクラス名の配下...
JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト) 
JavaScript(ジャバスクリプト) JavaScriptを使ったアニメーションの実装方法と３つの事例について
JavaScriptのアニメーションを作成することで、目を引くウェブサイトを作成することができます。以下は、人々を驚かせるかもしれない、いくつかのアイデアです。サンプルページはこちら▼JavaScriptの４つのアニメーション例キャンバスを...
JavaScript(ジャバスクリプト) JavaScript初心者必見！抑えておくべき１０つのポイント
JavaScriptはWeb開発において重要なプログラミング言語であり、抑えておくべきポイントは多岐にわたりますが、以下にいくつか挙げてみます。基本構文基本構文：JavaScriptの基本的な構文を把握することが重要です。変数の宣言方法、デ...
JavaScript(ジャバスクリプト) UserAgent（ユーザーエージェント）とは？主要なブラウザのユーザーエージェントについて
UserAgent（ユーザーエージェント）とは？UserAgent（ユーザーエージェント）とは、WebブラウザやクローラーなどのHTTPクライアントが、サーバーに送信するリクエストヘッダーの一部です。この情報には、クライアントの種類、バージ...
JavaScript(ジャバスクリプト) 【JavaScript入門】JavaScriptを実行する方法 scriptタグの基本
scriptタグとは？JavaScriptを実行する方法として、scriptタグを使う方法があります。この方法は、Webページ内にJavaScriptコードを直接埋め込んで実行する方法です。scriptタグを使用すると、HTMLのページ内で...
JavaScript(ジャバスクリプト) JavaScriptで使用される主なaddEventListenerメソッド一覧
JavaScriptで使用されるaddEventListenerメソッドは、様々なイベントをリッスンすることができます。以下に一般的なイベントのリストを示します。addEventListenerメソッドとは？addEventListener...
JavaScript(ジャバスクリプト) JavaScriptを使用してスマートフォンとPCを判断する方法（User Agent・画面幅）
JavaScriptを使用して、スマートフォンとパーソナルコンピュータ(PC)を判断する方法はいくつかあります。以下は、よく使用される方法の一例です。User Agentの検出User Agentは、WebブラウザーがWebサーバーに送信す...
JavaScript(ジャバスクリプト) JavaScriptでボタンクリック時に音を鳴らす方法
以下のようにHTMLとJavaScriptを組み合わせて、クリックすると音が鳴るボタンを作ることができます。HTML5のaudio要素を使用するまずは、WEB上の特定の場所にメディアをアップロードします。ワードプレスの場合はメディアの場所な...
JavaScript(ジャバスクリプト) JavaScriptでのDOM操作の基本について（Document Object Model）
DOM（Document Object Model）とは？DOM（Document Object Model）とは、HTML文書やXML文書をプログラムから操作するための仕組みです。JavaScriptを使ってDOMを操作することで、Web...
JavaScript(ジャバスクリプト) 【JavaScript】九九の表を作成する-Part1
JavaScriptを使用して九九の表を作成してみます。HTMLファイルの作成まず、HTMLファイルを作成します。以下のような新しいHTMLファイルを準備します。<!DOCTYPE html><html><head> <title>九九の表...
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.hreflocation.hrefは、locationオブジェクトのプロパティです。このプロ...
JavaScript(ジャバスクリプト) 【DOM】DOM (Document Object Model) とは？ツリー構造について
DOM (Document Object Model) とは？DOM (Document Object Model) とは、HTML ページや XML 文書を構成する要素を树状構造として表現する仕組みです。この DOM を操作することで、W...
JavaScript(ジャバスクリプト) 加算代入演算子 (+=)とは？【JavaScript】
加算代入演算子 (+=)とは？加算代入演算子(+=)は、変数に対して値を加算するための演算子です。以下のように使用します。変数 += 値加算代入演算子の実行例例えば、下記のようなプログラムを実行したとします。下記のようなコードを実行すると、...
JavaScript(ジャバスクリプト) 【JavaScript】画面移動時にアンカーの位置がズレる？ときの対応方法
そんなことがあるのかな…？と思ったら、そんなことがありましたので記録として残しておきたいと思います…。アンカー要素がfixedの場合にずれる？アンカー要素の position が fixedの場合が考えられます。上部のヘッダーが固定されてい...
JavaScript(ジャバスクリプト) 【JavaScript】document.createElement(“a”);リンク・リンクターゲット設定方法
document.createElement("a");にリンクやターゲットを設定してみます。document.createElement("a");だけではリンクが設定されないdocument.createElement("a");で.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がテキストとしてそのまま出力されました。.in...
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.write(c);<...
JavaScript(ジャバスクリプト) 【JavaScript】new 演算子とは？基本と使い方について
JavaScriptの「const sample = new Sample('A', 'B', 'C');」という書き方について解説していきます。new 演算子は組み込みオブジェクト型のインスタンスを作成するひとことで言うと「組み込みオブジ...
JavaScript(ジャバスクリプト) 【JavaScript】.addEventListener() とは？
JavaScriptを学んでいると「.addEventListener()」がよく出てきますが、よく分からなかったので・・・メモ。.addEventListener()addEventListener() は EventTarget インタ...
