スキルアップを始める!

JavaScript(ジャバスクリプト)

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の2つの違いについて。 .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; ...
JavaScript(ジャバスクリプト)

【JavaScript入門】新規作成方法|アラートの表示|favicon.ico|console.log

ということで、JavaScriptを作ってみましょう! まずは<script></script>を作ります。 window.alert(); ブラウザの画面にアラートを表示させます。 window.alert("ハロー"); 画面を表示させ...
JavaScript(ジャバスクリプト)

【JavaScript入門】演算子の種類について|算術演算子

javascriptには、いくつかの演算子がありますが、その中でも基本の演算子となる「算術演算子」について。 加算 +(プラス)の記号を使います。 例:2+1 結果:3 減算 -(マイナス)の記号を使います。 例:10-1 結果:9 乗算 ...
JavaScript(ジャバスクリプト)

【JavaScript入門】画面にalertを表示させる方法

JavaScript 皆さん、プログラミングやっていますか~\(^o^)/ 今回は、プログラミング(JavaScript)のアラートを表示させる方法です! Alertを表示させる <script></script>と書くと、JavaScri...
JavaScript(ジャバスクリプト)

【JavaScript】画面にポップアップされた入力枠に文字列を入力してデータを渡す方法|prompt();

prompt(); 画面にポップアップが表示されて、文字列や値が入力できるようになります 。 <!DOCTYPE html> <html> <head> <script> message=prompt(); alert(message); ...
JavaScript(ジャバスクリプト)

【JavaScript】外部ファイルをHTMLに読み込んだときの文字化けの対処法

文字化け? 調べていると、どうやらHTMLで使われている文字コードと、外部参照している(この場合JSファイル)の文字コードが違うためにこの問題が発生しているようです。 外部JavaScript →  Shift-JIS JSP(HTML) ...
URLをコピーしました!