JavaScript:基本

基本をはるだけです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="sample">サンプル</div>
    
    <script src="js/app.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

/*
//データ型
String 文字列
Number 数値
Boolean true false
Symbol インスタンスが固定で不変となるデータ型
null null値
undefined 定義がない状態
Object 上記以外の特殊なデータ型

//エスケープシーケンス
\n 改行する
\t タブを入れる
\" ""で囲まれた文字列中に"をいれる
\' "で囲まれた文字列中に'をいれる
\\ 文字列中にバックスラッシュを入れる

//ダイアログ
alert('');
confirm('');
prompt('');

//変数
let v = 100;
const human = 'Mike';
console.log('値を表示 : ', v);
console.log('名前を表示 : ', human);

//BMI プログラム

let height = prompt('身長を入力してください cm : ');
let weight = prompt('体重を入力してください kg : ');

let bmi = weight / (height * height);
console.log(bmi);
alert('あなたのBMIは : ' + bmi + ' です');




//条件分岐
let money = prompt('Input your money.');
money = parseFloat(money)

if (money > 800){
    alert('You are a rich man!');
}
else if(money > 500){
    alert('Your are a middle class man.');
}
else{
    alert ('You are a poor man.');
}

//厳密に等しい場合 === 厳密に等しくない場合 !== を使おう
//and && / or || / not ! 


// ランダム
let num_rand = Math.random() // 0 to 1
console.log(num_rand)

let num10 = num_rand * 10 // 0 to 1
console.log(num10)

let num_int = parseInt(num10) // 0 to 1
console.log(num_int)

//関数定義
function print_num(x, y){
    console.log(x+y);
}

print_num(100, 200);

//while文
let cnt = 0
while (cnt < 10){
    console.log(cnt);
    cnt= cnt + 1;
}

//do while文
let cnt_do = 0;
do {
    console.log(cnt_do);
    cnt_do = cnt_do + 1
}while(cnt_do < 10);

//for文
for (let i = 0; i <=10; i++) {
    console.log(i);
}
*/
//cssの操作

function change_innerhtml(element){
    let new_text = prompt('書き換えたい文字を入れてください ： ')
    element.innerHTML = new_text;
    console.log(element.innerHTML)
    return element.innerHTML
}
let element = document.getElementById('sample')
//console.log(element);           //<div id="sample">サンプル</div>
//console.log(element.innerHTML); //サンプル
//console.log(element.innerText); //サンプル

element.addEventListener('click', change_innerhtml);

//element.innerHTML = change_innerhtml(element)

100

101

102

103

104

105

106

107

108

109

110

//データ型

String 文字列

Number 数値

Boolean true false

Symbol インスタンスが固定で不変となるデータ型

null null値

undefined 定義がない状態

Object 上記以外の特殊なデータ型

//エスケープシーケンス

\n 改行する

\t タブを入れる

\" ""で囲まれた文字列中に"をいれる

\' "で囲まれた文字列中に'をいれる

\\ 文字列中にバックスラッシュを入れる

//ダイアログ

alert('');

confirm('');

prompt('');

//変数

let v = 100;

const human = 'Mike';

console.log('値を表示 : ', v);

console.log('名前を表示 : ', human);

//BMI プログラム

let height = prompt('身長を入力してください cm : ');

let weight = prompt('体重を入力してください kg : ');

let bmi = weight / (height * height);

console.log(bmi);

alert('あなたのBMIは : ' + bmi + ' です');

//条件分岐

let money = prompt('Input your money.');

money = parseFloat(money)

if (money > 800){

alert('You are a rich man!');

}

else if(money > 500){

alert('Your are a middle class man.');

}

else{

alert ('You are a poor man.');

}

//厳密に等しい場合 === 厳密に等しくない場合 !== を使おう

//and && / or || / not !

// ランダム

let num_rand = Math.random() // 0 to 1

console.log(num_rand)

let num10 = num_rand * 10 // 0 to 1

console.log(num10)

let num_int = parseInt(num10) // 0 to 1

console.log(num_int)

//関数定義

function print_num(x, y){

console.log(x+y);

}

print_num(100, 200);

//while文

let cnt = 0

while (cnt < 10){

console.log(cnt);

cnt= cnt + 1;

}

//do while文

let cnt_do = 0;

do {

console.log(cnt_do);

cnt_do = cnt_do + 1

}while(cnt_do < 10);

//for文

for (let i = 0; i <=10; i++) {

console.log(i);

}

//cssの操作

function change_innerhtml(element){

let new_text = prompt('書き換えたい文字を入れてください： ')

element.innerHTML = new_text;

console.log(element.innerHTML)

return element.innerHTML

}

let element = document.getElementById('sample')

//console.log(element); //<div id="sample">サンプル</div>

//console.log(element.innerHTML); //サンプル

//console.log(element.innerText); //サンプル

element.addEventListener('click', change_innerhtml);

//element.innerHTML = change_innerhtml(element)

この記事を書いた人
最新の記事

Keita N

最新記事 by Keita N (全て見る)