Javascript
try codeJSの基本
プログラミング言語について
プログラミング言語おすすめランキング
JavaScriptでできること
JavaScript とは
Webサイトに動き（ブラウザを操作）をつけたり、Webアプリやゲームを開発に使われる言語
★ 言語としての特徴
・スクリプト言語である（比較的簡単）
・ブラウザやサーバーなどさまざまな環境で利用できる
ECMAScript
・ECMAScriptは標準化された仕様のこと
・ECMAScript2015（ES6）で、これまでの文法や機能が大幅に改定された
・ES6から毎年バージョンは更新されている
JavaScriptの基本
コンソールについて
・Chromeのコンソール表示について確認しておく
・コンソールにはプログラムの実行結果やエラーなどを表示させる
・プログラムのテスト用・確認用の表示であって、開発者のためのもの
JSの記述について
・拡張子は .js
・大文字と小文字は区別される
・コードは外部ファイル化して読み込むのが一般的
【例】 <script src="js/common.js"></script>
・HTMLファイル内に記述する場合はスクリプトタグで囲む
【例】 <script>
// ここにコード
</script>
・外部ファイルを読みこむ、または記述する場所は可能な限り、</body> の直前
それが難しい場合は、<head>や<body>の内部
・文字はシングルクォートで囲む。数字や変数は囲まない。
・JSのコメント文
// 1行コメント
/*
複数行コメント
*/
JavaScriptの基本文法
Strict Modeについて
・スクリプトや関数の先頭に 'use strict'; を追加することで有効になる。
・JavaScriptの機能としてはエラーではないが、落とし穴になる項目をエラーにして バグの発生を抑える。
・安全なコードを書くため
メソッド（オブジェクトへの指示・命令）
オブジェクト.メソッド(パラメータ);
e.g. console.log('猫である');
オブジェクト → 指示の対象 （コンソール）
メソッド → 指示の内容 （ログ）
パラメータ → 指示に必要な情報 （猫である）
★命令の最後には基本、セミコロンを入力
★文字列は基本、シングルクォートで囲む
★数字や数式、変数は、基本シングルクォートで囲まない
プロパティ（オブジェクトの状態）
オブジェクト.プロパティ;
e.g. window.location;
★オブジェクトの状態を表す
★状態を取得、読み取ったり書き換えたりする
メソッドとプロパティいくつか
コンソールにメッセージを表示
console.log(パラメータ);
通常の警告表示
window.alert(パラメータ);
OK,Cancelの選択表示
window.confirm(パラメータ);
※ let ans = window.confirm(パラメータ);
文字の入力ウィンドウ
window.prompt(パラメータ);
※ let ans = window.prompt(パラメータ);
特定のID名を持った要素を取得
document.getElementById('id名');
要素のコンテンツを取得（プロパティ）
document.getElementById('id名').textContent;
変数と定数
文字列や数値などのデータを格納するために使用されるのが 「変数」
変数名のルール
1. 半角英数字、アンダースコア、$ が使用可能（ハイフンは使えません）
2. 大文字と小文字は区別される
3. 日本語も使えるが、基本使わない
4. 先頭に数字は使えない
5. 予約語は使えない
予約語
変数の宣言
JavaScriptで変数を利用するには、最初に変数の宣言を行う
let answer;
★変数の宣言には長く var が使われてきたが、ES6以降、let と const が使用可能となった
値の代入
let answer = 'Yes';
let sum = 250;
★イコールの意味は、右の値を左に代入する ということ
★変数の宣言と値の代入は一緒でOK
定数
宣言時に代入したデータを後から書き換えできない変数が 「定数」
（値の再代入ができない）
const num = 2021;
条件分岐と繰り返し
条件分岐（if）
if 文
if (条件式①) {
条件式①を満たした時の処理
} else if (条件式②) {
条件式①は満たさず、条件式②を満たした時の処理
} 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以上
論理演算子
条件1 && 条件2 → 条件1かつ条件2
条件1 || 条件2 → 条件1または条件2
計算式
a + b
a - b
a / b
a * b
a % b ※aをbで割った余り
繰り返し (ループ)
while 文
let i = 0; //変数の初期化
while (i <= 10) {
// 条件を満たしている間の処理
// i = i + 1; 増減式
}
※条件内での繰り返し
for 文
for (let i = 0; i<=10; i++){
//条件を満たしている間の処理
}
※回数が決まっている繰り返し
※i++ は i = i + 1 と同じ意味（インクリメント）
※（参考） x += y は x = x + y と同じ意味（代入演算子）
テンプレートリテラル
let text = `${prefs} `;
※バックティックは シフト + ＠ で入力する。
※バックティックを使うことで、変数を中に埋め込める
※改行も反映する
メソッド
HTML要素の追加
差し込む基準となる要素.insertAdjacentHTML('挿入する場所','挿入する内容');
【挿入する場所】
1、beforebegin
Elementのタグの直前に挿入します。
2、afterbegin
Elementタグの中の先頭に挿入します。
3、beforeend
Elementタグの中の末尾に挿入します。
4、afterend
Elementのタグの直後に挿入します。
今日やったこと
jQueryとは
jQueryでできること10選
脱jQueryに向けた第一歩
jQueryのメソッド一覧
少しのコードで実装可能な20のjQuery小技集
jQueryは、JavaScriptを簡易的に使えるようにしたライブラリの一種。
jQueryライブラリ(本体)の読み込み
Google Hosted Libraries
1. GoogleCDNから読み込む（google jqueryで検索）
3.x → 現状バージョン
2.x → 古いブラウザの対応なし
1.x → 古いブラウザにも対応
.min → 圧縮され軽量化されたファイル
</body>の直前で
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
2. ダウンロードして読みこむ
コードを入力する
1. HTMLファイル内に入力
<script> ~ </script> 内に入力する。
2. 外部ファイル(〇〇.js)を作成、読み込み、入力する。
<script src="js/main.js"></script>
※両方とも必ず、jQueryライブラリより後に記述する。
入力の基本
$(document).ready(function(){
//何かしらの処理
});
$(function(){
//何かしらの処理
});
どちらも同じ意味。HTMLの読み込みが終わった時点で 何かしらの処理 が実行される。
jQueryのコードは必ず上記 function 内に記述する。
セレクタとメソッド
$('セレクタ').メソッド();
セレクタが命令対象、メソッドが命令
セレクタは、CSSと同じ指定が可能
$('h1').メソッド();
$('#wrapper').メソッド();
$('#header .list').メソッド();
【メソッド例】
- CSSの命令を変更する
css('プロパティ','値');
- 属性値を変更する
attr('属性','値');
- テキストの書き換え
text('変更後の内容');
イベント
$('セレクタ').on('イベント',function(){
$('セレクタ').メソッド();
});
【イベント例】
scroll ドキュメントがスクロールした時に発生
click クリックされた時
dblclick ダブルクリックされた時
mousedown 要素上でマウスが押された時に発生
mouseup 要素上でマウスが押され、上がった時に発生
mousemove 要素上でマウスが移動している時に発生
mouseenter マウスが要素に入った時に発生。子孫要素に入った時には発生しない
mouseleave マウスが要素から外れた時に発生。子孫要素から外れた時には発生しない
keydown キーが押し下げられた時に発生
keypress キーが押された時に発生
keyup キーが上がった時に発生
メソッド
HTML/CSSの操作
■ テキストの変更と操作
$('li').text('Changed!');
■ HTMLの内容の変更
$("p").html("ハローワールド！");
■ CSS（スタイル）の設定 css()
$("p").css("color", "red");
■ 属性値の設定や変更
attr("属性名","属性値");
$("img").attr("src", "img02.png");
■ 属性値の取得
attr("属性名");
$("a").attr("href");
■ 文字の置換（JS）
対象文字列.replace( 置換前の文字列, 置換後の文字列 )
■ 次の弟要素の取得
next();
クラス名の追加と削除
■ クラス名の追加 addClass()
$("p").addClass("orange_box");
■ クラス名の削除 removeClass()
$("p").removeClass("orange_box");
■ クラス名の切り替え
$("p").toggleClass("orange_box");
アニメーション
■ フェードイン fadeIn()
$("p").fadeIn('slow');
■ フェードアウト fadeOut()
$("p").fadeOut('slow');
要素を上下にスライド
■ 要素を開く
$(セレクタ).slideDown(speed);
■ 要素を閉じる
$(セレクタ).slideUp(speed);
■ 要素の開閉
$(セレクタ).slideToggle(speed);
アニメーション
■ アニメーション animate()
$(セレクタ).animate(properties, duration, easing, callback);
$("button").click(function(){
$("div").animate({"left" : "1000px"} , 500);
});
//buttonをクリックすると、div要素が500ミリ秒かけてleft:1000pxまで移動する
■ アニメーションの中止
$("dt").click(function(){
$("dd").stop().slideToggle();
});
//dl要素をクリックすると、dd要素がスライドしながら開閉する
配列
配列
配列とは複数の値を代入することができる変数のこと
let pref = ['青森','秋田','宮城'];
値を取り出すときは
pref[0] ⇒ 青森
pref[1] ⇒ 秋田
となる
配列の値をすべて取り出す
for (let prefs of pref) {
console.log(prefs);
}
※ prefs は任意の変数名（自分で決める）
オブジェクト（連想配列）
オブジェクトとは各種データをひとまとめにして、1つの変数として扱えるデータ
let books = {title: 'JavaScript入門',price: 2500, stock: 3};
値を取り出すときは
オブジェクト名.プロパティ名 e.g. books.title
オブジェクト名['プロパティ名'] e.g. books['title']
となる
オブジェクトの値をすべて取り出す
for (let p in books) {
console.log(p + '=' + books[p]);
}
※ p は任意の変数名（自分で決める）
配列のメソッド
配列変数名.pop() 配列の最後のデータを削除する
配列変数名.push('データ') 配列の最後にデータを追加する
配列変数名.shift() 配列の最初のデータを削除する
配列変数名.pop('データ','データ') 配列の最初にデータを追加する
今日やったこと
要素ノードの取得
※使い分けについて
id,classで要素を取得できる → getElement系を使う
階層が深い、複雑な指定 → query系を使う
id値をキーに取得
document.getElementById('id値');
タグ名をキーに取得
document.getElementsByTagName('タグ名');
クラス名をキーに取得
document.getElementsByClassName('クラス名');
name属性をキーに取得
document.getElementsByName('name値');
セレクタ形式で取得
document.querySelector('セレクタ');
e.g. document.querySelector('#id img');
※単数要素の取得時に利用する。
セレクタ形式で取得（複数要素）
document.querySelectorAll('セレクタ');
SAMPLE
<div class="shop">
<p>港区南青山</p>
<p>リストランテ南青山</p>
</div>
<p>美味しかったです。</p>
<button onClick="getElement();">要素を取得</button>
<script>
function getElement(){
elements = document.querySelectorAll('.shop p');
let len = elements.length;
for (let i = 0; i < len; i++){
console.log('Text: ' + elements[i].textContent);
}
}
</script>
文字列操作
文字列を切り出す
対象の文字列.slice( 開始位置, 終了位置 );
対象の文字列.substr( 開始位置, 切り出す文字数 );
置換・削除
対象の文字列.replace( 置換前の文字列, 置換後の文字列 );
文字列を数値にする
Number( 文字列 );
文字数をカウント
対象の文字列.length;
属性値の取得・設定
src値を取得
ノード.getAttribute('src')
ノード.setAttribute('src','images/01.png');
class値を取得
ノード.getAttribute('class')
ノード.setAttribute('class','text01');
スタイルの変更
インラインスタイルシートとして追加
ノード.style.プロパティ = 値;
e.g. document.getElementById('test').style.fontSize = '2em';
※プロパティ内のハイフンを無くし、ハイフン後の文字を大文字にする。
（background-color ⇒ backgroundColor)
クラスのオン・オフ切り替え
クラスの追加
ターゲットノード.classList.add('クラス名');
クラスの削除
ターゲットノード.classList.remove('クラス名');
クラスの切り替え
ターゲットノード.classList.toggle('クラス名');
そのほか
ウィンドウサイズの取得
window.innerWidth スクロールバーを含まないウィンドウの幅
window.innerHeight スクロールバーを含まないウィンドウの高さ
window.outerWidth スクロールバーを含むウィンドウの幅
window.outerHeight スクロールバーを含むウィンドウの高さ
ページ遷移
location.href = 'ページURL';
window.open('https://acceliv.com/', '_blank');
window.open('https://acceliv.com/',"ウィンドウタイトル初期値","width=450,height=300,top=0,left=0,scrollbars=1");
イベントの種類
click 左クリックしたとき
dblclick 左ダブルクリックしたとき
contextmenu 右クリックしてメニューが開くとき
auxclick 左クリック、右クリック以外のボタン（ホイールクリックなど）を押したとき
mousedown マウスのいずれかのボタンを押した瞬間
mouseup マウスのいずれかのボタンを離した瞬間
select マウスでテキストなどを選択したとき
mouseenter マウスカーソルがHTML要素に乗ったとき（子孫要素も1つの範囲とする）
mouseleave マウスカーソルがHTML要素から離れたとき（子孫要素も1つの範囲とする）
mousemove マウスカーソルが動いたとき
mouseover マウスカーソルがHTML要素に乗ったとき（子孫要素は別範囲とする）
mouseout マウスカーソルがHTML要素から離れたとき（子孫要素は別範囲とする）
event.preventDefault(); //イベントの通常動作をキャンセルする
イベントの使いかた
タグ内の属性として宣言（あまり推奨しない）
html
<input type="button" value='表示' onclick='btn()'>
JavaScript
let btn = function(){
window.alert('ダイアログを表示');
}
イベントの使いかた
要素オブジェクトのプロパティとして宣言
html
<input type="button" value='表示' id="btn">
javascript
document.getElementById('btn').onclick = function(){
window.alert('ダイアログ');
};
イベントの使いかた
addEventListenerで宣言
html
<input type="button" value='表示' id="btn">
javascript
document.getElementById('btn').addEventListener('click', function() {
window.alert('ボタンがクリックされました。');
},false);
対象の要素.addEventListener(種類, () => {
// 処理を記述
});
今日やったこと
ファンクション
よく行う処理を一つにまとめた小さなサブプログラムのこと（パーツ）
e.g.
function total(price) {
const tax = 0.1;
return price + price*tax; // 値を戻す
}
console.log(total(8000)); // 8800と表示される
文字列に関して
str.substr(start, startから何文字切り取るか);
str.length(何文字あるか)
Mathオブジェクト
//小数点以下切り上げ
Math.ceil(数値);
//小数点以下切り下げ
Math.floor(数値);
//小数点以下四捨五入
Math.round(数値);
//整数にする
parseInt('');
日時のオブジェクト
Dateオブジェクト
const now = new Date();
※最初にDateオブジェクトを初期化してから使用する。
const year = now.getFullYear() 日付の「年」を取得する（4桁）
const month = now.getMonth() 日付の「月」を取得する（0 - 11）
const date = now.getDate() 日付の「日」を取得する（1 - 31）
const youbi = now.getDay() 日付の「曜日」を取得する（0 - 6）
const hour = now.getHours() 日付の「時」を取得する（0 - 23）
const min = now.getMinutes() 日付の「分」を取得する（0 - 59）
const sec = now.getSeconds() 日付の「秒」を取得する（0 - 59）
未来・過去に日時を取得する
const future = new Date('2021/12/31 23:59:59');
もしくは
const now = new Date();
now.setFullYear(2021); //2021年をセット
now.setMonth(11); //12月をセット
now.setDate(31); //31日をセット
now.setHours(23); //23時をセット
now.Minutes(59); //59分をセット
now.setSeconds(59) //59秒をセット
残り時間を計算する
const now = new Date().getTime();
※getTime()で1970年1月1日00時00分からの経過ミリ秒を取得
const goal = new Date('2021/12/31 23:59:59').getTime();
※締め切りの日時を取得
const rest = (goal - now);
※残りミリ秒を計算
const sec = Math.floor(rest % 60); //秒数
const min = Math.floor((rest/60) % 60); //分数
const hour = Math.floor((rest/60/60) % 24); //時間
const day = Math.floor(rest/60/60/24); //日
setTimeuot
一定時間後に一度だけ実行する
let stop = setTimeout(ファンクション,待ち時間);
SAMPLE
<script>
let count = 0;
function countUp() {
console.log(count++);
setTimeout(countUp, 1000);
}
countUp();
</script>
//タイマーをストップする
clearTimeout(stop);
今日やったこと
cookie
Cookie・SessionとWeb Storageについて整理する
session
sessionStorageにデータを保存する
//sessionStorage.setItem('key','value');
sessionStorage.setItem('name','太郎');
保存したデータを取得する
//sessionStorage.getItem('key');
sessionStorage.getItem('name');
保存したデータを削除する
//sessionStorage.removeItem('key');
sessionStorage.removeItem('name');
初回判定
sessionStorageはセッションが続く間、値を保持しておくことができるWeb Storage API。
Cookieのようにキーと値のペアで保存することができる。
Cookieのように有効期間等の設定はできないが、
APIで削除、もしくはブラウザを閉じたタイミングでデータをクリアしたい場合に有効。
const keyName = 'visited';
const keyValue = true;
if (!sessionStorage.getItem(keyName)) {
//sessionStorageにキーと値を追加
sessionStorage.setItem(keyName, keyValue);
//ここに初回アクセス時の処理
console.log("初めての訪問です");
} else {
//ここに通常アクセス時の処理
console.log("訪問済みです");
}
cookie
初回判定
// 初回アクセス時
if (document.cookie.indexOf('visited') === -1) {
document.cookie = 'visited=1';
console.log('初回のアクセスです');
} else {
// 2回目以降のアクセス
console.log('2回目以降のアクセスです');
}
今日やったこと
今日やったこと
Gsapとは
GSAPとはアニメーションを実装するために特化したライブラリ。
Gsapの導入
下記サイトにアクセスして、CDNで読み込む
Gsap Install
※本体のGsapとScrollTrigerを使用
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
上記コードを</body>の直前で読み込む。
Gsapの基本
to – アニメーション完了時の状態を指定
from – アニメーション開始時の状態を指定
fromTo – アニメーション開始時と終了時の状態を指定
gsap.to('.box', {
x: 100, // 右方向に100px移動
y: 100, // 上方向に100px移動
rotation: 180, // 180度回転
duration: 1, // 1秒かけてアニメーション
autoAlpha: 0, // 非表示
// delay: 1, // 1秒後にアニメーション
// repeat: -1, // 無限に繰り返し
})
gsap.fromTo('.box',
{
autoAlpha: 0,
},
{
autoAlpha: 1,
}
);
timeline
数値 – 指定時間後にアニメーションを開始、※timelineではtimeline全体の時間を基準に考える
+=1 – そのアニメーション自身を基準に1秒後に発火、delay: 1と同じ
-=2 – そのアニメーション自身を基準に2秒前に発火、delay: -2と同じ
< – 直前のアニメーションの開始時に発火
>3 – 直前のアニメーションが終わってから、3秒後に発火
<4 – 直前のアニメーションが始まってから、3秒後に発火
const tl = gsap.timeline()
tl.to('.box', 1, {
x: 100,
backgroundColor: 'red'
})
.to('.box', 1, {
y: 100,
backgroundColor: 'blue'
})
.to('.box', 1, {
x: 0,
backgroundColor: 'orange'
}, '<') // < 直前のアニメーション開始時に発火
.to('.box', 1, {
y: 0,
backgroundColor: 'green'
})
onComplete: () => {
document.querySelector('.top-fv').display = 'none'
}
最後に要素そのものをdisplay: none しないと下の項目がくりっくできない！
ScrollTriger
gsap.to('.box', { x:200,//←コンマを忘れないように
scrollTrigger:{//xやyと同じ要領でプロパティにscrollTriggerと記述
trigger:'.box',//トリガーとなる要素を設定
start:'top center',//発火始め位置を設定
markers:true,//確認用の印をつける
}
});
