自分で作った分
--->test1.js
$(function(){
console.log('hoge');
var langs=['java','javaScript','html','css','sql','php'];
var foods=['カレー','ラーメン','チャーハン'];
var favs = ['登山','ギター','酒'];
$('#btn').on('click',function(){
for (var i=0; i<langs.length; i++){
//三項演算子で記述
var hoge = i == 1? '#F00' : '#00F';
ele.css('color',hoge);
/*//普通の書き方
if(i==1){
//$('li').css({'color':'#F00'});//これで論理エラーなのはまだeleが生成されていないのに赤くしようとしたから
ele.css({'color':'#F00'});
}else{
ele.css({'color':'#00F'});
}
*/
$('#tar').append(ele);
}//ここに;はいらないらしい/書いても動く/特に意味のない；になる
});
$('#d1 p').on('click',function(){
console.log('haaaai');
console.log(this);
$(this).css({'background-color':'rgba(255, 255, 255,0.5)'});
});
$('#s1').change(function(){
//$('#tar').text('');
$('#tar').empty();//初期化
var num = $('#s1').val();
if(num == 1){//言語を選択
for (i=0; i<langs.length; i++){
var ele = $('<li>').text(langs[i]);
$('#tar').append(ele);
}
}else if(num == 2){//foodsを選択
for (i=0; i<foods.length; i++){
var ele = $('<li>').text(foods[i]);
$('#tar').append(ele);
}
}else if(num == 3){//favsを選択
for (i=0; i<favs.length; i++){
var ele = $('<li>').text(favs[i]);
$('#tar').append(ele);
}
}
/*
var hoge = $('#s1').val(this.value)
console.log(hoge);
var ele = $('<li>').text(hoge);
$('#tar').append(ele);
*/
});
});
--->先生分
①変数を作って配列ごと入れる
②if文で分岐した後に変数でfor文をまわす
test101.js
$(function(){
console.log('hoge');
var langs=['java','javaScript','html','css','sql','php'];
var foods=['カレー','ラーメン','チャーハン'];
var favs = ['登山','ギター','酒'];
$('#btn').on('click',function(){
for (var i=0; i<langs.length; i++){
//三項演算子で記述
var hoge = i == 1? '#F00' : '#00F';
ele.css('color',hoge);
/*//普通の書き方
if(i==1){
//$('li').css({'color':'#F00'});//これで論理エラーなのはまだeleが生成されていないのに赤くしようとしたから
ele.css({'color':'#F00'});
}else{
ele.css({'color':'#00F'});
}
*/
$('#tar').append(ele);
}
});
$('#d1 p').on('click',function(){
console.log('haaaai');
console.log(this);
$(this).css({'background-color':'rgba(255, 255, 255,0.5)'});
});
/*セレクトプルダウン*/
$('#s1').change(function(){
$('#tar').empty();//初期化
var num = $('#s1').val();//セレクトされた番号をvalで取得
var arr;//配列を入れておく入れ物
if(num == 1){//何が選択されたか
arr = langs;
}else if(num == 2){
arr = foods;
}else if(num == 3){
arr = favs;
}
for (i=0; i<arr.length; i++){//出力
var ele = $('<li>').text(arr[i]);
$('#tar').append(ele);
}
});
});
htmlからvalとかで取得したものは基本的に「文字列」である。
<option value="1">言語</option>
html側で上のように指定している。
つまりダブルコートで囲っている。
すなわちこれは数値型じゃなくて文字列。
だからswitch caseで分岐がきかなかった。
var num = $('#s1').val();
var numm = parseInt(num);
とする必要がある。
JavaScriptにおいて、変数の中には
・数値
・文字列
・配列
・オブジェクトそのもの
・関数
も入れられるらしい。
--->test01.js switch case版
$(function(){
console.log('hoge');
var langs=['java','javaScript','html','css','sql','php'];
var foods=['カレー','ラーメン','チャーハン'];
var favs = ['登山','ギター','酒'];
$('#btn').on('click',function(){
for (var i=0; i<langs.length; i++){
//三項演算子で記述
var hoge = i == 1? '#F00' : '#00F';
ele.css('color',hoge);
/*//普通の書き方
if(i==1){
//$('li').css({'color':'#F00'});//これで論理エラーなのはまだeleが生成されていないのに赤くしようとしたから
ele.css({'color':'#F00'});
}else{
ele.css({'color':'#00F'});
}
*/
$('#tar').append(ele);
}
});
$('#d1 p').on('click',function(){
console.log('haaaai');
console.log(this);
$(this).css({'background-color':'rgba(255, 255, 255,0.5)'});
});
/*セレクトプルダウン*/
$('#s1').change(function(){
$('#tar').empty();//初期化
var num = $('#s1').val();//セレクトされた番号をvalで取得
var numm = parseInt(num);//switch文に入るよう数値にする
var arr;//配列を入れておく入れ物
/*
//if文版
if(num == 1){//何が選択されたか
arr = langs;
}else if(num == 2){
arr = foods;
}else if(num == 3){
arr = favs;
}
*/
switch (numm){
case 1:
console.log('in case1');
arr = langs;
break;
case 2:
arr = foods;
break;
case 3:
arr = favs;
break;
}
for (i=0; i<arr.length; i++){//出力
var ele = $('<li>').text(arr[i]);
$('#tar').append(ele);
}
});
});
hoverはイベントじゃないらしい。
mouseoverがイベントになるらしい。
日付の出力
var today = new Date();//括弧括弧を忘れずに
console.log(today);
//2019/12/09を作る
var y = today.getFullYear();//ドット・ゲットフルイヤーのうえに()が要るよ
var m = today.getMonth()+1;//getMonthはまさかの0始まり。正しい月は+1する
var d = today.getDate();
if(d<10){//頭に0を付ける
d = "0"+d;
}
console.log(y+'/'+m+'/'+d);
