TECHCAMP名古屋10日目 応用カリキュラム13％まで

★Rubyで学んだこと★
1.sub
正規表現で文字列の指定した部分を、別の文字列に置き換える
最初の部分のみ置き換える

2.gsub
正規表現で文字列の指定した部分を、別の文字列に置き換える
全て置き換える

3.match
引数に指定した文字列が含まれているかどうかを正規表現を用いてチェック
一致すればMatchDataオブジェクトが、一致しなければnilが返る
英数字8文字以上かどうかのチェックやメールアドレスのドメイン部分のみの抽出に使える

4.upcase
文字列を全て大文字にする

5.downcase
文字列を全て小文字にする

6.split
文字列を区切る

★JavaScriptで学んだこと★
1.ブラウザで試しにjavascriptを動かす方法
右クリックで検証を開き、コンソールにコードを打つ

2.htmlでjavascriptを読み込む方法
headタグ内部でスクリプトタグを使いsrcにjavascriptのパスを指定する
<script src=“script.js”></script>

3.ES5とES6の変数宣言の書き方の違い
ES5 var
ES6 let(変数)とconst(定数)

4.VSCODEでかっこの対応を見やすくするためのプラグイン
BracketPairColorizer

5.DOM
Document Object Modelの略
HTMLを解析し、データを作成する仕組み

6.DOMツリー
HTMLがDOMによって解析されてできた階層構造
ドキュメントツリーとも言う

7.イベント
HTMLの要素に対して行われた処理要求のこと

8.イベント駆動
イベントが発生したらそれをきっかけにコードが実行される仕組み

9.イベントリスナー
1つのイベントと1つの関数を紐付ける仕組み

10.ページの読み込み完了時にjavascriptのメイン処理を実行する方法
window.addEventListener("load",function(){});の中に処理を記述
そうしないとHTMLファイルを読み終わる前にjavascriptが実行されエラーとなる

11.console.log
コンソール上にテキストを表示

12.alert
ポップアップを表示

13.length
配列の要素数を取得

14.push
配列の末尾に要素を追加

15.pop
配列の末尾の要素を削除

16.shift
配列の先頭の要素を削除

17.getElementById
DOMツリーから引数に渡したIDを持つ要素を取得

18.getElementsByClassName
DOMツリーから引数に渡したclass名を全て取得

19.querySelector
DOMツリーから引数に渡したセレクタに合致するもののうち最初に見つかったものを取得

20.addEventListener
1つのイベントに1つの関数を紐付けるメソッド

21.window.onload
window.addEventListener("load",function(){});と同じ
window.onload = function(){}と書く

22.innerHTML
要素内のHTMLテキストを変更する

23.classList
要素に割り当てられているクラスを全て取得

24.classList.add
要素に割り当てるクラスを追加

25.classList.remove
要素に割り当てるクラスを削除

26.Array.porototype.slice.call
引数に取ったオブジェクトを配列に変換

27.forEach
配列に対して行う繰り返し処理

28.indexOf
DOMを引数に取り、一致した要素番号を戻す

29.jQuery
javascriptをより簡単に扱えるようにしたjavascriptのライブラリの一つ
WebサイトやWebアプリケーションで使われることが多い
とにかく簡単にHTMLとCSSを操作できる

30.React
Facebookが開発したライブラリ
仮想DOMの概念によってより早い高速なアプリケーション実装が可能
AndroidやiOSに対してもReactNativeを使用すればReactを適用でき、柔軟性も高いことから最近大きく人気が増加
書き方は、JavaScriptとHTMLを合わせて書く

31.Vue.js
近年JavaScriptのフレームワークとして使用される現場がとても増え、人気
React同様、仮想DOMの概念がある
HTML、CSSを中心にしたWebアプリ開発が可能

32.仮想DOMを利用するメリット
仮想DOMの差分だけDOMに反映することで処理を速くする

★jQueryで学んだこと★
1.メリット
javascriptと比べて、コードを短く書くことができる
ブラウザごとの対応が不要
プラグインが豊富

2.デメリット
処理が遅い、
他のライブラリと共存しにくい

3.導入する方法
導入する一文を載せているサイトがあるので、x snippetの行をHTMLのheadにコピペ
https://developers.google.com/speed/libraries/#jquery

4.window.addEventListener(“load”, function(){});を省略して記述する
$(function(){});

5.idセレクタでHTML要素を取得する
$("#idSelector")

ドルマーク シャープ ID名

6.クラスセレクタでHTML要素を取得する
$(".classSelector")

ドルマーク ドット クラス名

7.要素セレクタでHTML要素を取得する
$("h1")

ドルマーク 要素名

8.属性セレクタでHTML要素を取得する
$("input[type='radio']")

ドルマーク 要素名 属性名　属性値

9.フォームの送信ボタンが押された時にイベントリスナーを追加する方法
$(“form”).on(“submit”,function(){
// 処理
});

ドルマーク フォーム　オン サブミット ファンクション

10.フォームの普通のボタンが押された時にイベントリスナーを追加する方法
$(“button”).on(“click”,function(){
// 処理
});

ドルマーク ボタン オン クリック ファンクション

11.addClass
javascriptで利用していたclassList.addを短く書くためのメソッド

12.removeClass
javascriptで利用していたclassList.removeを短く書くためのメソッド

13.index
javascriptで利用していたindexOfを使う時に、配列化しなくても要素番号を取得できるメソッド

14.eq
HTML要素を配列で取得した時に、指定した要素番号のHTML要素を抽出できるメソッド

15.preventDefault
ブラウザにデフォルトで備わっているイベントをキャンセル

16.find
引数にセレクタを指定し、合致するセレクタを全て取得

17.each
要素の数だけループを回す
要素番号、要素を引数に取る

18.prop
要素のプロパティを取得
チェックボックスにチェックがされているかどうかをif文で判定する時などに使用

19.attr
要素の値を取得

20.val
フォームに入力された値を取得

21.text
要素内に表示文字列をセット

22.RegExp
文字列を正規表現として扱う

23.append
指定した子要素の最後にテキスト文字やHTML要素を追加

24.split
引数に指定した記号で区切り、文字列の配列に分割

25.map
配列から要素を1つずつ取り出し、引数に与えられた関数の処理を行った結果から新しい配列を作成

26.join
配列のすべての要素をつないだ文字列を作成
引数に文字列を渡すと、その文字列で文字と文字を繋げる