JavaScript & jQyery

参考資料

• MDM Web Docs
• 【超入門】jQuery とは？できること・基本をわかりやすく解説

JavaScript

JavaScriptとは

JavaScript はウェブページに複雑な機能を実装することを可能にするスクリプト言語、またはプログラミング言語です。ウェブページがただそこに座って静的な情報を表示する以上のことをする場合、タイムリーなコンテンツの更新、操作可能な地図、アニメーションする 2D/3D グラフィック、スクロールする動画ジュークボックスなどがある場合、 JavaScript が関わっていることは間違いないでしょう。 これはウェブ標準技術のレイヤーケーキの 3 層目にあたります。 参考記事：JavaScript とは

JS基礎

イベントハンドラ属性

htmlの属性としてjsの機能をあてがうことができる。非推奨。 現在はイベントリスナーが一般的。

<button onclick="alert('こんにちは！')">

変数

var 変数名;
let 変数名；
const 定数名;

var → 昔のバージョンの書き方で、スコープの考え方が独特なため現在は使われていない。 let → 通常の変数を宣言する際に使用 const → 定数を宣言 jsは型を型を意識せず使用することができる

配列

et fruits = ['りんご', 'バナナ', 'ぶどう'];
fruits.length; //要素数の取得
fruits.unshift('みかん'); //先頭に要素を追加
fruits.shift(); //先頭から要素を取り出す
fruits.push('みかん') //末尾に要素を追加
fruits.pop(); //末尾から要素を取り出す

特殊処理

分岐処理 if , switch → Javaと同様

繰り返し処理 for ,while → Javaと同様

関数

//関数の定義
function 関数名(引数){
処理
return 戻り値;
}
//関数の再利用
let 変数 = 関数(引数); 

オブジェクト

変数や関数をひとまとめにしたデータ型

//オブジェクトの定義
let user = {
  name: '山田太郎',
  sayHi: function() {
    console.log('こんにちは' + this.name + 'です');
}
//オブジェクトの再利用
user.sayHi(); // こんにちは山田太郎です

• オブジェクト内のメソッドは無名関数で記述すること
• 変数はコロンで区切る

オブジェクトには動的に変数(プロパティ)や関数(メソッド)を追加することができる。

user.address = '東京都';
user.sayAddress = function() {
  console.log('住所は' + this.address + 'です');
};

オブジェクト内にオブジェクトを所持することも可能。

let member = {
  name: '山田太郎',
  job: {
    name: 'デザイナー',
    company: 'ABCデザイン事務所',
    getInfo: function() {
      console.log(this.company + '[' + this.name + ']');
    }
  }
};
member.job.getInfo(); //再利用方法

クラス

class User{
  name; //プロパティ
  age;
  constructor(name, age){ 
    this.name = name;
    this.age = age;
    }//コンストラクタ
    showInfo(){
      console.log(this.name + '(' this.age ')');
    }//メソッド
}
let user = new User('test1', 10); //インスタンスの生成

windowオブジェクト

ブラウザ上で実行されるjsでは、windowオブジェクトを通じて操作を行うことができる。

window.alert('Hello'); //アラートで文字列の表示
window.prompt('text'); //ユーザーに入力を求めるウィンドウの表示
window.setTimeout(); //一定時間後に処理を実行する

頻出メソッドメモ

メソッド名	処理内容	補足
getElementById(任意のID)	指定したIDにマッチするHTML要素（ドキュメント要素）を取得するメソッド。例：document.getElementById("myid")	.textContent プロパティを使うと、HTMLタグの中のテキストのみ取得できる。例：document.getElementById("myid").textContent

jQuery

jQueryとは

多くのwebサイトで利用されているJavaScriptのライブラリ。

jQuery基礎

基本構文

• 通常形式 -> ページが読み込み終わって(Readyになって)から処理が実行される

$(document).ready(function(){
 $(a).b()
});

• 略式

$(function(){
  $(a).b()
})

a → セレクタ(該当する要素) b → メソッド(処理)

例

//html
 <p class="test">テスト</p>
 //jQuery
 $(function(){
    $(".test").css("color","green")
});
//test属性のテキストがcssメソッドで色が変わる

頻出メソッドメモ

メソッド名	処理内容	補足
.css(属性, 値)	対象要素の style 属性に指定したCSS値を設定する。例：$(".test").css("color", "green")	.css({ 属性1: 値1, 属性2: 値2, ... }) の形式で複数のCSSプロパティを一括で設定できる。