スキルアップを始める!

JavaScript(ジャバスクリプト)

JavaScript(ジャバスクリプト)

JavaScriptでtitleとdescriptionを書き換える方法

titleを書き換える|document.title JavaScriptを使用して、ウェブページのタイトルを書き換えるには、以下のように書きます。 document.title = "新しいタイトル"; このコードでは、documentオ...
JavaScript(ジャバスクリプト)

【JavaScript】郵便番号検索APIを使って住所を自動取得する(zipcloud)

無料で使える郵便番号検索APIを使って、住所を自動入力してみます。 zipcloud フォームのHTMLを作る まずは、フォームのHTMLを作ります。 <form> <label for="zip">郵便番号:</label> <input...
JavaScript(ジャバスクリプト)

【Javascript】URLパラメータの値を取得する|window.location.search

window.location.searchプロパティ JavascriptでURLパラメータの値を取得するには、以下のようにwindow.location.searchプロパティを使用します。このプロパティは、現在のページのURLの?以降...
JavaScript(ジャバスクリプト)

【JavaScript】他のページにリダイレクトさせる|location

JavaScriptで他のページにリダイレクトするには、以下のように設定します。 .location.href locationオブジェクトのhrefプロパティにリダイレクト先のURLを設定します。 window.location.href...
JavaScript(ジャバスクリプト)

【JavaScript】セミコロン(;)の記号を忘れるとどうなるのか?

セミコロン(;)の記号を忘れると JavaScriptにおいて、セミコロン(;)を忘れると、次のような影響があります。 文法エラー: セミコロンはJavaScriptの文の終わりを示す重要な役割を果たしています。セミコロンを忘れると、文法エ...
JavaScript(ジャバスクリプト)

【JavaScript】XMLHttpRequestオブジェクトの基本について

XMLHttpRequestとは? XMLHttpRequest(XHR)は、JavaScriptを使用してウェブページとサーバーとの間でデータを非同期に送受信するためのAPIです。XHRは、ウェブページの再読み込みなしでデータを取得したり...
JavaScript(ジャバスクリプト)

【JavaScript】addEventListener()で登録できるイベント一覧と読み込む順番

.addEventListener()とは? JavaScriptで、.addEventListener()はイベントリスナーを登録するためのメソッドです。 下記のように使用します。 window.addEventListener('loa...
JavaScript(ジャバスクリプト)

【JavaScript】じゃんけんゲームを作る(Part1)

JavaScriptでじゃんけんゲームを作ってみます。プログラミングの勉強にもなりますので、ぜひ挑戦ください。 じゃんけんのルール 改めて、じゃんけんのルールをおさらいしてみます。 じゃんけんのルール プレイヤーは「グー」「チョキ」「パー」...
JavaScript(ジャバスクリプト)

【JavaScript】Canvas(キャンバス)とは?

Canvas(キャンバス)とは? Canvasは、JavaScriptでグラフィックスを描画するためのHTML5要素の1つです。 Canvas要素は、width(幅)とheight(高さ)属性を指定してHTMLドキュメント内に配置されます。...
JavaScript(ジャバスクリプト)

【JavaScript】コールバック関数とは?基本について

コールバック関数とは? コールバック関数とは、JavaScriptにおいて非同期処理を行うための重要な概念の1つです。 非同期処理は、処理の完了を待たずに次の処理を実行することを可能にするため、プログラムのパフォーマンスを向上させることがで...
JavaScript(ジャバスクリプト)

【JavaScript】アロー関数の使い方(基本)

アロー関数とは? アロー関数は、ES6(ECMAScript 2015)で導入された、簡潔な構文で関数を定義する方法です。従来の関数定義よりも簡潔で読みやすく、特にコールバック関数を扱う際によく利用されます。 以下はアロー関数の基本的な書き...
JavaScript(ジャバスクリプト)

JSON(JavaScript Object Notation)とは何か?基本について

今回は、json(JavaScript Object Notation)とは何か?についてご紹介します。 JSONとは? JSONとは「JavaScript Object Notation」の略で、データを表現するための軽量でテキストベース...
JavaScript(ジャバスクリプト)

【JavaScript】ul要素の子要素であるli要素から各li要素の子要素であるa要素を取得してli要素と入れ替える

このスクリプトは、ul要素の子要素であるli要素から、各li要素の子要素であるa要素を取得して、li要素と入れ替えるものです。 各li要素の子要素であるa要素を取得して、li要素と入れ替える このスクリプトを実行することで、特定のクラス名の...
JavaScript(ジャバスクリプト)

JavaScriptを使ったアニメーションの実装方法と3つの事例について

JavaScriptのアニメーションを作成することで、目を引くウェブサイトを作成することができます。以下は、人々を驚かせるかもしれない、いくつかのアイデアです。 サンプルページはこちら▼ JavaScriptの4つのアニメーション例 キャン...
JavaScript(ジャバスクリプト)

JavaScript初心者必見!抑えておくべき10つのポイント

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メソッドとは? addEventListen...
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を操作することで、We...
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.href location.hrefは、locationオブジェクトのプロパティです。こ...
URLをコピーしました!