JavaScript（未経験者向け）

JavaScriptとは

ウェブサイトを操作して表示を変化させたいときや、画面を更新せずにサーバと通信したい時に使用します。
ex.いいね機能など

Javaとは全く違うよ

Javaというプログラミング言語がありますが、JavaScriptは全くの別言語です。名前が似てるだけで全く別物なので注意です！

基礎文法

#####●アラートの表示

script.js

window.alert('こんにちは');

テキストはシングルクォート（'）かダブルクオート（"）で囲みます。

※window.alert()
ブラウザでアラートを表示させるメソッドです。引数としてアラートに表示させる情報を渡します。

#####●コンソールにテキストを表示させる
ブラウザ上で二本指クリック→「検証」を選択→Consoleを選択でコンソールを開く
↓
index.htmlを開いているブラウザをリロード
↓
コンソールにテキストが表示されたら成功！

※console.log()
ブラウザのコンソールにテキストを表示させるメソッドです。引数としてコンソールに表示させる情報を渡します。
window.alertと同様に変数を引数に渡すこともできます。Rubyにおけるputsメソッドと同様に使えます。

#####●変数を宣言する

script.js

var name = 'harada';
console.log(name + 'さん、こんにちは');

修正ができたら、もう一度ブラウザをリロードして、「haradaさん、こんにちは」と
表示されていれば成功です。

#####●ES2015(ES6)バージョン以降の変数宣言
ES2015(ES6)バージョン以降は、letとconstを使います。
letの場合

script.js

let name = 'mitsui';
console.log(name + 'さん、こんばんは');

letは、後で書き換えることができる
constは、後で書き換えることができません

条件分岐

if文を使います。

if (条件式1) {
  // 条件式1がtrueのときの処理
} else if (条件式2) {
  // 条件式1がfalseで条件式2がtrueのときの処理
} else {
  // 条件式1も条件式2もfalseのときの処理
}

☆条件式は()でくくること
☆条件式の後に続く波括弧{}内の処理が実行されること
☆複数条件を指定する場合は、elseのあとに続けてif文を記述すること

Rubyではelsifですが、JavaScriptではelse ifと書くことを注意です！

num = 36

if num % 15 == 0
  puts num.to_s + 'は2と4の倍数です'
elsif num % 3 == 0
  puts num.to_s + 'は2の倍数です'
elsif num % 5 == 0
  puts num.to_s + 'は4の倍数です'
else
  puts num.to_s + 'は2の倍数でも、4の倍数でもありません'
end

配列

JavaScriptにおいても配列の概念があります。

script.js

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list);

ブラウザをリロードすると、配列の中身を確認することができます。

1.要素を取得
取り出したい文字列の番号を記述
2.要素数を取得
lengthメソッドが利用できます
3.要素を追加
Pushメソッドが利用できます
4.要素を削除
popメソッドが利用できます
配列の最後の要素を取り除きます。Rubyの場合はpopメソッドの引数に数字を渡すことで「何個分要素を取り除くか」という数を指定できるが、JavaScriptのpopメソッドではそれができません。

先頭の要素を取り除くためにshiftメソッドが利用できます

オブジェクト

データのまとまりのこと。オブジェクトは名前と値をセットにしてデータを管理します！
オブジェクトを作成するには波括弧を使用します。

オブジェクトの定義

let hoge = { name: 'harada' };

script.js

let obj = { name: 'harada', age: 18, address: 'nagoya' };
console.log(obj);

変数hogeはnameプロパティを持っています。
プロパティは必ず属性名である*「プロパティ名」とデータである「値」*をセットで持ちます。
つまり、nameはプロパティ名、'harada'は対応する値です。

1.プロパティの値を取得する

let obj = { name: 'mita', age: 30, address: 'tokyo' };
console.log(obj.name);

2.プロパティの値を変更する

let obj = { name: 'mita', age: 30, address: 'tokyo' };
obj.name = 'tanaka';
console.log(obj.name);

繰り返し処理を実装

#####for文

for (let i = 0; i < 繰り返す回数; i = i + 1) {
  // 繰り返す処理の内容
}

#関数を定義

#####function文

function 関数名(引数) {
  // 処理の内容
}

#####関数の戻り値

returnを使う
JavaScriptではreturnを用います！

function calc(num1,num2){
  return num1*num2;
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

無名関数を定義

JavaScriptにおける関数の定義には2種類で、
一つが関数宣言
二つ目が無名関数を用いたものです。

// 関数宣言
function hello(){
  console.log('hello');
}

// 関数式（無名関数）
let hello = function(){
    console.log('hello');
}

基本編は以上になります。ここまで読んでいただきありがとうございます＾＾