見出し画像
Photo by golchiki

JavaScriptの基礎について

YUTO

Javascriptの基礎を書き、その後HTMLやCSSを動的に操作できるフレームワークであるjQueryについて紹介します。

Google Chromeを用いたJavaScriptの実行方法

JavaScriptは、ブラウザがあればすぐにでも実行ができるので、環境設定が不要ですし、すぐにでも始められるプログラミング言語です。
環境設定は、プログラミングを始める時の一番最初の大きな山場です。この山場を超えないとプログラミングの学習はできませんし、乗り越えられない場合は学習していないのに挫折することにもなりません。
この山場がないということは、誰でも学習ができると言う事であり、取り組みやすいかと思います。その点で、JavaScriptはプログラミング初心者にオススメのプログラミング言語だといえます。
ここでは、JavaScriptのプログラミングを始める前まで、どのようにしていけばいいのかを紹介します。

まず、Chromeブラウザを起動し、設定アイコンをクリックします。

実際にコードを書いてみます

Enterキーを押して、実行してみた結果

コードにエラーがあった場合は・・・

このように、JavaScriptを気軽に始められます。

値と変数について

値について
値とは、数値や文章のことを言います。また、文章の時は" "で括ります。
(例) 123、0.32、"あうい" 、"thie is nemlog"

変数について

変数とは、いわゆる値を保管しておくための入れ物です。
その際、変数であることをvarやletを使って宣言します。

var 変数;
let 変数;

また値を変数に保管する際、以下のように記述します。

let 変数 = 値;

ここで、=(イコールと呼ぶ)の意味は右辺を左辺に代入するということです。
つまり、Aを変数、Bを値とすると、A=B は「BをAに代入する」という意味になります。
数学でのイコールとは意味が違いますので、注意してください。

let x = 1;
let y = 3;

【コラム】letとvarの違い
varは変数の重複を許しますが、letの場合は変数の重複を許しません。
例えば、
　var a = 1
　var a = 2
と書いた場合は変数aは重複を許していますので、aにはまず1が入り、その後2が入る事になります。一方で
　let a = 1
　let a = 2
と書くと、letは変数の重複を許しませんのでエラーを起こします。
つまり、letを使った方が同じ名前の変数をうっかり使ってしまい、変数が予想外のものになったり、バグが発生しにくいと言えます。
　この記事では、letを用いて変数を宣言することにします。

定数について
一度値を宣言したら、二度と代入できない入れ物を定数といい、以下のように宣言します。
const 定数 = 値;

const z = 5;

四則演算について
プログラミングは本来、計算するためにあるものです。なので、四則演算を行う事ができます。これは、数字同士だけでなく、テキストと演算することもできます。

let x = 1 + 4 - 2 × 3;
let y = 'abc' + 123;

制御文について

制御文とは、プログラムを実際に流すための文章を言います。ここでは、代表的なものであるif文とfor文について紹介します。

(1) if文
if文は条件分岐をする際の構文であり、条件に応じて実行する処理を変更します。
この文は、以下のように記述します。

if(条件式){
条件式を満たしているときに、この処理を実行する
} else{
条件式を満たしていないとき、この処理を実行する}

let x = 15;
if(x>=10){
console.log('変数xは10以上です');
} else{
console.log('変数xは10未満です');
}

この例文は、変数xが10以上だと、画面に「変数xは10以上です」と表示され、そうではない場合は「変数xは10未満です」と表示されます。

ここで、条件式を満たしていない処理を実行しない場合は、else以下の文を省略することができます。
ここで、比較演算子について説明します。ここではAとBを値として考えます。

  • A==B　AとBは等しい

  • A != B　AとBは等しくない

  • A < B　AはB未満である

  • A <= B　AはB以下である

  • A > B　AはBより大きい

  • A >= B　AはB以上である

これらの比較演算子をif文の条件式に書きます。

(2) for文
for文は繰り返し処理をする際に用いられる構文であり、以下のようにして記述されます。
for(初期値;繰り返し処理をする条件;処理した後の処理){
繰り返し処理をする内容
}
説明すると、まず初期値の所で変数と繰り返し処理をする際の一番最初の値を設定します。それから「繰り返し処理をする条件」に当てはめ、条件式を満たした場合に「繰り返し処理をする内容」を実行し、その次に「処理した後の処理」に入ります。それから「繰り返し処理する条件」にあてはめ、その条件を満たしたら、また「繰り返し処理をする内容」を実行し、その次に「処理した後の処理」に入ります。それを繰り返し条件をする条件を満たさなくなるまで継続します。
つまり、
初期値→繰り返し処理をする条件→繰り返し処理をする内容→処理した後の処理→繰り返し処理をする条件→繰り返し処理をする内容→処理した後の処理・・・
とループをしていくということです。

for(var x=8;x<10;x++)
 console.log('xの値は' + x);
}

この例文の処理結果は8と9が出力されます。
初期値として8を設定し、x<10を満たしているので、 console.log('xの値は' + x)を実行します。それから、xを1つ足します。するとxは9になり、x<10を満たしているのかをチェックします。この時は満たしているので、console.log('xの値は' + x)を実行します。それから、xを1つ足します。するとxは10になり、x<10を満たしているのかをチェックします。このとき、満たしていないので、処理は終了となるということです。
ここで、x++とはx=x+1を表し、x=x+1はx++として書きます。

関数について

関数とは、ある処理をひとまとめにして書いたものであり、入力された値と出力された値のパイプ役となるものです。
それは、JavaScriptで定義されているものと、自分で定義するものがあります。
JavaScriptで定義されている場合は、以下のように書きます。
　関数名(引数);
ここで得られた値を以下のようにして変数に代入することもできます。
　let 変数 = 関数(引数);
自分で関数を定義する場合は、基本的に以下のようになります。
　 function 関数名(引数){処理内容};
また、関数を与えることで得られた値を以下のように記述することで、変数に代入することもできます。
　 let 変数 = function (引数){処理内容} ;
　 let 変数 = (引数)=>{処理内容};
このときに使う変数が関数名となります。また、引数とは、関数に入れたい入力値の事をいいます。
以下の例文では、alertがJavaScriptで定義されている関数で、引数の値を画面に表示します。

function nem(){alert('hello! NEMber)};
let nem = function {alert('hello! NEMber)};
let nem = ()=> {alert('hello! NEMber)};

　また処理内容には、戻り値を設定することがあります。戻り値とは関数内で処理された結果として得られた値です。つまり、出力値です。
　戻り値を設定することで、処理内容に書かれた処理を終わらせ、そして呼び出し先の関数が出力値として値となります。
　ここでごはんに例えると、ごはんを炊く前の米が引数、炊飯器が関数、炊いた米が戻り値になります。
これはreturn文で書かれ、記述の仕方としては以下のようになります。
　return 値(もしくは式) ;
例文を用いて説明します。

function nem(name) {
　return 'Hello!!' + name ;
}
console.log(nem('YUTO'));

これは、Hello! YUTOと出力されます。
なぜならnem('YUTO')と関数を呼び出すことで、YUTOが引数(入力値)として関数内で処理され、nem('YUTO')は「'Hello!!' + YUTO」として値(出力値)になるからです。
　ここで、console.log()とは、出力して欲しい値を画面に表示してくれるコードであり、以下のようにして書きます。
　console.log(値);
console.log()の詳しい説明については、この後の「配列とオブジェクトについて」で説明するので、ここでは出力値を画面に表示してくれるコードを考えていいです。

オブジェクト指向について

配列とオブジェクトについて

プリグラミングコードを書く際、変数をいくつも定義すると、コードが複雑になることがあります。そのときに役に立つのが配列です。配列は、複数の値をまとめて保管できる変数です。ここで定義した変数を配列名といい、以下のように記述します。
　let 配列名 = [値1, 値2, …] ;

let x = [1,2,3,4];

また、配列にはインデックス番号が割り振られていて、先頭より0、1、2と割り振られています。その定義した配列より値を表示したい場合は、以下のように記述します。
　配列名[インデックス番号];
さっきの例文で3をPC上で表示させたい場合は以下のようにします。

console.log(x[2]);

ここで、インデックス番号の代わりに文字を使った場合の配列をオブジェクトといい、その文字をプロパティ名と言います。ここでプロパティ名と値を合わせてをプロパティと言い、以下のようにして記述します。
　プロパティ名1:値1
この時の配列名をオブジェクト名と言い、以下のように記述します。
　 let オブジェクト名 = [プロパティ名1:値1, プロパティ2:値2,…];

 let ob =[utopian:1,future:3];

ここで、その定義したオブジェクトに入っている値を表示させたい場合は、以下のようにします。
　オブジェクト名.プロパティ名 ;　(ドット演算子による記法)
　オブジェクト名['プロパティ名'];　 (ブラケット構文)

console.log(ob.utopinan)  #これだと1と表示されます
console.log(ob.future)　 #これだと3と表示されます

　ここでオブジェクトにおいて、関数を値として代入することができ、この時のプロパティ名をメソッド名といいます。ここでメソッド名と関数のセットをメソッドをいい、以下のようにして記述します。
　メソッド名:function (引数){処理内容}
そうすると、以下のようにオブジェクトを書く事もできます。
　let オブジェクト名 = [メソッド名1:function (引数){処理内容} , プロパティ名1:値1…];

 let riji = [zemzem:function(){処理内容},essan:5};

例文の場合、rijiがオブジェクト名であり、zemzemがメソッド名になります。
ここで、その定義したオブジェクトに入っている値(や関数)を表示させたい場合は、以下のようにします。
　オブジェクト名.メソッド名 ;　
なので、rijiオブジェクトの中のzemzemメソッドを使って表示させ、そのメソッドへの入力値として8を設定する場合、

console.log(rizi.zemzem(8));

と書く事になります。また入力値は数字でなく、テキストや関数を使っても構いません。

　この考え方を使って、画面にプログラミングの結果を表示させるコマンドであるconsole.log(値);について考えます。
　comsole.log(値)について、consoleはオブジェクト名で、logはメソッド名です。()の中身に表示させたい値(出力値)を書く事で、画面に値を表示するというものです。ここでconsoleオブジェクトは、ブラウザに標準でついているので、コードを書く際はオブジェクトを定義する必要はありません。

ここまでをまとめると、オブジェクトとは、プロパティとメソッドから構成されていると言えます。
プロパティとはモノの状態や特性を表す情報であり、メソッドとはモノを操作するための道具だといえます。
それらを使ってコードを書く手法をオブジェクト指向といいます。

引用：https://blog.codecamp.jp/javascript_object

インスタンスについて

オブジェクトは、コードで定義しても直接利用はできません。そのかわり、コードで定義されたオブジェクトを複製してオブジェクトを利用します。複製することをインスタンス化といい、そうしてできたオブジェクトをインスタンスといいます。そのインスタンスを作るには、以下のようにします。
　var 変数名　= new オブジェクト名(引数)
つまり、newを使います。
このインスタンスから、プロパティやメソッドを使いたい場合は以下のようにします。
　変数名.プロパティ名
　変数名.メソッド名(引数)
また、インスタンスを生成せずにプロパティやメソッドが使える場合は、以下のようにします。
　オブジェクト名.プロパティ名 ;
　オブジェクト名.メソッド名 ;　
つまり、前の章ではインスタンスを生成せずにプロパティやメソッドを使える場合を説明していたのです。

組み込みオブジェクトについて

組み込みオブジェクトとは、JavaScriptに初めから入っているオブジェクトの事をいいます。このオブジェクトは自分で定義せずに利用ができます。例として、以下のような物があり、どんなことができるのかは各自で調べる必要があります。
・Object
・Array
・Number
・Function
・Symbol
・Math
・Date

ここでSymbolが登場しました。次世代NEMの名前はSymbolですが、コードとして書く時、ブロックチェーン名前であるSymbolなのか、オブジェクトのSymbolなのか間違えることがあり得そうです。多分、これがSymbolという名前が技術者にとって嫌だという理由なのかもしれません・・

コンストラクタ関数

コンストラクタとは、インスタンス(オブジェクト)を生成する時に、オブジェクトを初期化する処理を書いたメソッド(関数)を言います。コンストラクタ関数は基本として以下のように記述し、そのあとにインスタンスを生成します。

function 関数名 (引数) {
　　this.プロパティ = 値;
　　this.メソッド = function)(){処理内容}
}
var 変数 = new インスタンス(引数)

ここで使われる関数を、コンストラクタ関数といいます。
またtihsは自分自身を表すオブジェクト(インスタンス)を表し、インスタンスのプロパティやメソッドを以下のようにして設定できます。
　this.プロパティ名 = 値 ;
　this.メソッド名 = 関数 ;
ここで、コンストラクタ関数について、以下の例文を用いて説明します。

function obj(nem, sym){ 
  this.xem = nem; 
  this.xym = function() {
   console.log(sym); 
  };
 } 

let com = new obj('eco', 'mov'); 
console.log(com.xem);
com.xym();

この例文の実行結果は、ecoとmovとなります。
また、objがコンストラクタ関数になり、thisはインスタンスthisはobj('eco', 'mov');を表します。
　ここで、例文のプログラムの処理について説明します。
まず、コンストラクタ関数をつくり、その後
var com = new obj('eco', 'mov');
とすることより、コンストラクタ関数objは複製され、その複製関数はnew obj('eco', 'mov')としてインスタンスになることを意味します。
インスタンスでの引数はecoとmovであることから、コンストラクタと比較すると、ecoがnemへ、movがsymへ入力されることになります。そうすることで
this.xem = nem;
の右辺にecoが入力されるので、xemはecoという値を持ったプロパティとなります。つまり、
this.xem = eco
という事になります。また、
this.xym = function() { console.log(sym); };
の右辺にmovが入力され、xymというconsole.log('mov')を実行させるメソッドとなります。つまり、
this.xym = function() { console.log(mov); };
という事になります。
そして、
console.log(com.xem);
において、xemというプロパティを使うことで、ecoという言葉が出力されます。また
com.xym();
で、xymというメソッドを使うことになるので、movという言葉が出力されます。
つまり、例文の最後の3行
var com = new obj('eco', 'mov');
console.log(com.xem);
com.xym();
というコードは

var com = obj('eco', 'mov'); {
　　this.xem = 'eco';
　　this.xym = function() {
　　console.log('mov');
　};
}
　console.log(com.xem);
　com.xym();

という感じになるということです。

クラスについて

クラス(厳密にはプロトタイプ)とは、「あるオブジェクトの元になるオブジェクト」の事をいいます。
クラスを用意することで、コンストラクタ、プロパティ、メソッドを一つにまとめることができます。その構文は以下のようにして記述し、その後にインスタンスを作ります。

class クラス名{
コンストラクタの定義
プロパティの定義
メソッドの定義
…
}
var 変数 = new インスタンス名;

ここで、コンストラクタの定義は以下のようにし、クラス全体の初期化を行います。
　コンストラクタ名(引数){処理内容}
また、メソッドの定義もまた同様にします。
　メソッド名(引数){処理内容}
ここで、プロパティを定義するとき、getやsetを用いて定義することができます。
　get プロパティ名{ 値を取り出す処理} ;
　set プロパティ名(value) { 値を代入する処理} ;
これらをそれぞれゲッター、セッターと言います。
ゲッターはプロパティとしてアクセスされた場合ゲッターで設定された関数を実行します。セッターはプロパティに値を代入された際に、セッターで設定された関数を実行します。

class Test {
  constructor(x, y) {
    this.x = x; 
    this.y = y;
  }

  // ゲッター
  get distance() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }

  // セッター
  set coodinary(arr) {
    this.x = arr.x;
    this.y = arr.y;
  }
}

const test1 = new Test(3, 4);
console.log(test1.distance); 
test1.coodinary = {x: 6, y: 8};
console.log(test1.distance);

この例文は( https://qiita.com/niisan-tokyo/items/83582bc0646239cf6cb8)からの引用です、
この処理について説明します。
　const test1 = new Test(3, 4);
で、クラスを複製し、インスタンスを作り、同時にそのインスタンス内のコンストラクタのxに3、yに4を代入します。
そうすることで、

　constructor(x, y) {
　　this.x = 3; // x座標を入れる
　　this.y = 4; // y座標を入れる
　}
として考えます。次に
　console.log(test1.distance);

でゲッターから値を習得することになります。そのとき、

の結果が出力される事になります。次に
　test1.coodinary = {x: 6, y: 8};
とすることで、xに6、yに8を代入することになります。そうするとセッターにおいて
　this.x = 6;
　this.y = 8;
となります。そうすることで、クラス内の引数が変更になります。その状態で
　console.log(test1.distance);
を実行すると

の結果が出力されます。

モジュールについて

　モジュールとは、JavaScriptの機能を拡張するファイルの事です。そのファイル内に機能をソースコードとして書きます。そのファイル内にある機能を使うためには、以下のようにして定義します。
　export 〇〇;
ここで、〇〇には関数やオブジェクト、クラスなどが入ります。こうする事で、exportで指定した機能が外部でも使えるようになります。
そして、その機能を使うには以下のようにして読み込みます。
　import {読み込みたい機能} from 'ファイルのパス'
これらを使った例文を見ていきます。

export function sayMessage(message) { alert(message); }

　このスクリプトのファイルパスを./sample-alert.jsとし、ファイル名をsample-alert.jsとします。ここで、ファイルパスとはファイルが現在のディレクトリからどのように進めていくと、目的のファイルへ到着するのかを表したものです。ここでは、.が現在のディレクトリを表し、lib、Utilとファイルをクリックすると、目的のファイルにたどり着きます。
　そうすると、読み込みたいファイルの中身は以下のような例文になります。
(また例文は、https://ics.media/entry/16511/ より引用しました)

import { sayMessage } from "./sample-alert.js";
sayMessage("こんにちは世界");

　だが、この方法だと、モジュールとして使うスクリプトで使われる方(exportする方)で、どんなコンストラクタ関数の名前が用意されているのかを把握しなくては、読み込む(importする)ことができません。
　そこで、これらの例文をexport defaultを用いて書き直す事で、exportする方のコンストラクタ関数を知らなくても、読み込む事ができます。
　つまり「export default」とは、読み込まれた方(つまりimportする方)で名前をつけ、exportする方では名前を付けないという方法です。
そうすると、以上の例文は、このように変更されます、

モジュールとして使う例文

export default function () { alert(message); }

本体として使う例文

import  sayMessage  from "./sample-alert.js";
sayMessage("こんにちは世界");

ここで、sayMessageはどんな名前でも構いません。

次に、HTMLをモジュールを適用する方法を紹介します。
このとき、HTMLファイルに
　<script type="module">
と定義した上で、import文を書きます。つまり、以下のような例文になります。

<html>
 <head>
　 <meta charset="UTF-8">
　 <script type="module">
　　 import {sayMessage} from "./sample-alert.js";
　　 sayMessage("こんにちは世界");
　 </script>
 </head>
 <body>
 </body>
</html>

またこの例文は、HTMLファイルとJavaScriptファイルに分割することもできます。

HTMLファイル

<html> 

  <head>
　  <meta charset="UTF-8">
　  <script type="module" src="index.js"></script>
  </head>
 <body>
 </body>
</html>

JavaScriptファイル

import { sayMessage } from "./sample-alert.js";
sayMessage("こんにちは世界");

このJavaScriptが書かれたファイルの名前をindex.jsとします。
つまり、　
　<script src="index.js">
というコードを書く事でHTML内において、index.jsというJavaScriptファイルを読み込みたい時に読み込めると言う事になります。

jQueryの基礎について

JavaScriptはDOMを使ってHTMLやCSSを動的に操作する事ができます。
JavaScriptで書くと長くなる事があるので、jQueryを使う事でより少ないコードで簡単に記述できます。
つまり、jQueryはJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリです。

このことについて、これから説明します。
なお、ここではHTML、CSS、Javascriptの基礎的な内容は既知として進めます
また、ここではDOMに関する知識がなくても読む事ができます。
jQueryを学んだ方は、DOMを使って生のJavascriptで書くとどうなるのかを学んで、動作原理を知る事もいいでしょう。

jQueryを使う準備

JQueryを導入する方法は以下の２つがあります。
　① jQueryファイルをダウンロードする
　② ネットワークで公開されているファイルを読み込む
方法としては②が手軽なので、そちらの方法を用います。
まず、こちらにアクセス → https://jquery.com/　

そしたら、このコードをHTML要素内のhead要素内にコピペしてください。

これで完了です!!

jQueryの書き方

Queryの書き方はこのようにして書きます。

$(“セレクタ”).メソッド(“引数”);

セレクタには操作対象とするHTMLの要素、メソッドは処理内容を書きます。より具体的で細かい処理を指定したい場合はパラメータを使います。
例えば、「h1要素」に対して「文字列を太字にしたい」場合、セレクタでh1を指定し、CSSを指定するメソッドcss()を使用します。

$('h1').css('color','red');

この1行だけでJavascriptでのDOM操作が簡単にできます。
ここからは、この事について詳しく説明します。

$について

$はjQueryで使う関数という意味です。JavaScriptでは$を書いても何の意味もありませんが、jQueryライブラリを読み込むことで、$はjQueryで記述した関数ということになります。
またjQueryにおいては、「$()」と「jQuery()」は同じ関数です。なので、下記２つのコードは同じ意味となります。

$("#target").hide();
jQuery("#target").hide();

もし他のjQuery以外のフレームワークを使う場合、「$」のみでは競合が生じる可能性があるので、その場合は後者を使いますが、一般的には「$」のみで十分です。

jQueryオブジェクトについて

jQueryで、要素を取得したい場合は以下のようにして書きます。

$("セレクタ");

例えば、id名がcatのdiv要素を取得し、変数catへ代入する場合は

let cat = $("#cat");

というように書きます。ここで、セレクタを用いて取得した要素をjQueryオブジェクトといいます。

メソッドについて

jQueryオブジェクトに対して、jQueryが用意している機能をメソッド(イベント)といい、その名前をメソッド名(イベント名)といいます。これは、何を実行するのかを指定します。そうすることで、取得したHTMLを変更したり、CSSを変更したり、アニメーション、イベント設定ができます。

それは、以下のようにして書きます。

jQueryオブジェクト.メソッド名(引数);

一番最初に紹介したjQueryの書き方である

$(“セレクタ”).メソッド名(“引数”);

も同義であり、「$("セレクタ)」がjQueryオブジェクトになります。また「.メソッド(引数)」をメソッドチェーンといい、ここに指定したセレクタに対して何らかの命令を書きます。

ここからは、代表的なメソッドについて紹介します。

CSS( )メソッド
CSSを追加、変更、削除を動的に行うメソッドです。

CSSを設定する場合

$('セレクタ').css('プロパティ','値');

例文

 $('.text').css('color','#ff0000');

これは、クラスとしてtextを指定した要素を赤色にします。

複数のプロパティをまとめて設定する場合

$('セレクタ').css({'プロパティ':'値','プロパティ':'値'});

例文

 $('.text').css({'color':'#0000ff','font-size':'2em'});

これは、class「text」がついた要素のcss「color」指定を赤色かつ文字サイズを2emに変更します。

CSSを削除する場合

$('セレクタ').css('プロパティ','');

例文(class「test」がついた要素のcss「color」指定を削除したい場合)

$('.test').css('color','');

これは、class「test」がついた要素のcss「color」指定を削除します。

マウスイベント関係

.click( )要素
セレクタで指定した要素をクリックした時、命令を実行します。

$('セレクタ').click( );

例文

  $('.click').click(function(){
      alert('Hello NEMber!');
    });

class「click」がついた要素をクリックすると「Hello NEMber! 」と表示させます。

.hover( )要素
要素にマウスカーソルが乗ると命令を実行します。

$('セレクタ').click( );

例文

 $('.hvr').hover(function(){
     alert("Hello NEMber!")
    });

class「hvr」がついた要素にマウスカーソルが乗ると「Hello NEMber! 」と表示させます。

クラスの追加と削除について

指定した要素にクラスを追加するとき

 $("セレクタ").addClass( );

を使って、例文のようにします。

例文(ID「target」が付いた要素にクラス「show」を付けたいとき)

$("#target").addClass("show");

この例文でjQueryを実行すると、以下のHTML

<div id="target"></div>

は、このようになります。

<div id="target" class="show"></div>


要素を削除したいとき

 $("セレクタ").removeClass( );

を使って、このように書きます。

$("#target").removeClass("show");


トグル処理(指定した要素に指定したclassがない場合は追加、すでにある場合は削除するメソッド)をしたいとき

 $(‘セレクタ’).toggleClass( );

を使ってこのようにして書きます。

$("#target").toggleClass("border");

これで、ID「target」が入った要素にクラス「border」がないときは追加、あるときは削除をする事ができます。

要素の追加と削除について

text()要素
これは要素にテキスト情報を追加・変更するメソッドであり、「$("セレクタ").text("文章")」と書きます。

例文

実行前

<body>
<p>こんにちは</p>
 
<script>
    $('p').text('おはよう');
</script>
</body>

実行後

<p>おはよう</p>

これは、p要素におはようという文章が上書きされることを意味しています。これで、指定した要素内のテキストが変更されたのがわかります。もし、p要素の中を削除する場合は、empty()要素を使います。

実行前

<body>
<p>こんにちは</p>
 
<script>
    $('p').empty();
</script>
</body>

実行後

<p></p>

p要素そのものを削除する場合は、remove()要素を使います。

html()要素
これは、特定のHTML要素を追加・変更するメソッドであり、「$("セレクタ").html("要素")」と書きます。

例文

実行前

<body>
<div></div>
 
<script>
    $('div').html('<p>こんにちは</p>');
 
    console.log( $('div').text() );
</script>
</body>

実行後

こんにちは

イベントリスナー

イベントの発生に応じて呼び出される処理のかたまりをイベントリスナーといいます。
イベントを発生させるとき、以下のようにして記述することが可能です。

jQueryオブジェクト.メソッド名(function(e){
     イベントが起きたときの処理(イベントハンドラ)
 });

　イベントリスナーの引数に渡されている「e」はイベントオブジェクトと呼ばれ、マウスの座標情報、押されたキーの種類など、イベントが起きたときの処理を収得するためにあるものです。イベントリスナーの中で利用しない場合には、省略しても構いません。また、イベントが起きたときにする処理をイベントハンドラといいます。

　例文

$("#btn").click(function(){
     console.log("clicked");
   });
});

これは、IDがbtnである要素がクリックされると、console.log("clicked") が実行されるというプログラムになります。

以上のように、jQueryを使ってイベントやアニメーションを加える事ができます。
ここでは一部しか紹介していませんが、他にどんなメソッド(イベント)があり、それでどんな事ができるのかをQiita等で適宜調べる必要があります。

一例として、メソッド名は以下のものが用意されています。

  • メソッド名　概要

  • click　要素をクリックした時

  • dblclick　要素をダブルクリックした時

  • mousedown　マウスボタンを押した時

  • mouseup　マウスのボタンを離した時

  • mouseenter　要素にカーソルが入った時

  • mouseleave　要素からカーソルが出た時

  • mouseover　要素にカーソルが乗った時

  • mouseout　要素からカーソルが外れた時

  • mousemove　要素内をカーソルが移動した時

  • focus　要素にフォーカスを当てた時

  • blur　要素からフォーカスを外した時

  • focusin　要素にフォーカスを当てた時（イベントバブリングあり）

  • focusout　要素からフォーカスを外した時（イベントバブリングあり）

  • change　要素の値を変更した（input、selectなど）

  • select　テキストボックス／テキストエリアのテキストを選択した時

  • submit　フォームから送信した時

  • keydown　キーを押した時

  • keypress　キーを押し続けている時

  • keyup　キーを離した時

  • resize　ウィンドウのサイズを変更した時

  • scroll　スクロールした時

  • contextmenu　コンテキストメニューを表示する前

参考資料

「ノンプログラマのためのjavascriptはじめの一歩」 外村和仁 (技術評論社)
jQueryとは(https://www.sejuku.net/blog/6436)
イベントに応じて処理を実行するには？（イベントメソッド）

この記事が気に入ったらサポートをしてみませんか？