職案人

求職・歴史・仏教などについて掲載するつもりだが、自分の思いつきが多いブログだよ。適当に付き合って下さい。

Javascriptの超入門編12(算術演算)

2018年08月26日 | JavaScript
算術演算用のオブジェクトを使って見よう

~Mathオブジェクト~


【開発環境】
OS;Window10
Webブラウザ:Google Chrome
テキストエディタ:Brackets

【Mathオブジェクト】
Mathオブジェクトは、算術演算用のメソッド/プロパティがまとめて用意されてるオブジェクト。更に、メソッドはインスタンスに依存しないスタテックメソッドである。
・メソッド

・プロパティ


■例文
1)円の面積
入力画面

結果


2)少数を整数に
入力画面

結果


3)乱数
.指定した整数値未満の乱数を得るには
入力画面

結果


コメント
  • Twitterでシェアする
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

Javascriptの超入門編11

2018年08月22日 | JavaScript
Stringオブジェクト(文字列の操作)


【開発環境】
OS;Window10
Webブラウザ:Google Chrome
テキストエディタ:Brackets

【Stringオブジェクト】
Javascriptの文字列はプリミティブ型なので、Stringオブジェクトのプロパティ/メソッドを使用する。

■文字列の基本操作
1)文字列の長さを調べる
lengthプロパティの例文


2)文字列からの文字抽出
charAt()メソッド


3)文字列[インデックス]
str[0]


4)文字列の中に指定した文字列が含まれているかを調べる
・startswith(文字列)メソッド
・endswith(文字列)メソッド
・indswith(文字列)メソッドなど


5)文字列から指定した範囲を取り出す
・slice(開始位置、終了位置)メソッド
・substring(開始位置、終了位置)メソッド


6)Stringオブジェクトの主なメソッド


7)HTMLのアンカーやリンクを設定
.アンカーとは、HTMLファイル内の「目印」


・リンクを設定する
コメント
  • Twitterでシェアする
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

Javascriptの超入門編10

2018年08月19日 | JavaScript
オブジェクトとインスタンス

ここでは組み込みオブジェクトを活用する上で必要な、インスタンの生成方法や、ミュータブルとイミュータブルと言ったデータの分類について説明する

【開発環境】
OS;Window10
Webブラウザ:Google Chrome
テキストエディタ:Brackets

【インスタンスの生成】
書式
変数 = new コンストラクタ(引数)
※コンストラクタ名はオブジェクト名と同じものを使う
・例文「showDate1.html」
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>

<body>
<script>
var now = new Date();
          //toDateString()はインスタンスメソッド
console.log(now.toDateString());
</script>
</body>

</html>
・実行


●メソッドについて
メソッドには、インスタンス型とスタティック型がある
スタティック型はインスタンスに依存しない
Date.now()を実行する


【データ型】
javascriptのデータには、後から値を変更可能なミュータブルな型と、変更可能なイミュータブルな型がある。

1.プリミティブ型(数字・文字)→イミュータブルな型
var myNum = 3;
myNum += 2;
myNumは5成るが、プログラムの途中でmyNumの値を変える事が出来ない。

2.Dateオブジェクトはミュータブルなオブジェクト
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>

<body>
<script>
var now1, now2;
now1 = new Date();
now2 = now1
console.log("now1 == now: " + (now1 == now2));
          //日付表示
console.log("now1: " + now1.toDateString());
console.log("now2: " + now1.toDateString());
//年の値を変えて、日付を表示
now1.setFullYear(100);
console.log("now1: " + now1.toDateString());
console.log("now2: " + now1.toDateString());
</script>
</body>
</html>
実行


コメント
  • Twitterでシェアする
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

Javascriptの超入門編9

2018年08月12日 | JavaScript
ループ文(for文・while文)

一連の処理を繰り返すもので、条件文と同じ様にプログラムではよく使われる

【開発環境】
OS;Window10
Webブラウザ:Google Chrome
テキストエディタ:Brackets

【ループ文】

1.for文
カウンタとして使用する制御変数iをカウントアップしながら、処理をロープさせ、iが指定した値まで進んだら、処理を終了する。
書式
for(カウンタの初期化;条件式;カウンタの更新){
   処理

・例文
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>

<body>
<script>
//iは制御変数
for (var i = 1; i <= 12; i++) {
console.log(i + "月");
}
</script>
</body>
</html>

実行


2.while文
条件が成り立つまで処理を繰り返す文

書式
while(条件式){
  処理


例文「while1.html」
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>

<body>
<script>
var i = 1;
while (i <= 12) {
console.log(i + "月");
i++;
}
</script>
</body>

</html>

実行結果


3.do~while文
書式
do{
 処理
}while(条件式)

例文「while2.html」
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>

<body>
<script>
var num = prompt("回数を入力してください");
var i = 1;
do {
console.log(i + ":こんにちはJavaScript");
i++;
} while(i <= num);
</script>
</body>

</html>
実行
値「3」を入力

コンソール表示


4.無限ループ
while文の条件式に、treや「1」など、必ず条件が成り立つ値を指定すると、ループが延々とくりかえされてプログラムが終わら無くなる無限ループなる。そこで、breakやcontineを使って抜け出す

break文
例文
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>

<body>
<script>
var i = 1;
while(true){
console.log(i + "月");
i++;
if (i > 12) break;//12より大きければ、抜け出る
}
</script>
</body>

</html>
実行


contine文
contine文を使うと、現在のループの処理を中断してループの先頭に戻る事ができます。breakと同様にifと一緒に使う

例文
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>

<body>
<script>
var i = 0;
while(i <= 100){
i++;
if ((i % 9) != 0) continue;
console.log(i);
}
</script>
</body>

</html>
実行





コメント
  • Twitterでシェアする
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

Javascriptの超入門編8

2018年08月12日 | JavaScript
条件文(if文・switch文)

条件判断の結果に応じて処理を切り分ける方法について学ぶ

【開発環境】
OS;Window10
Webブラウザ:Google Chrome
テキストエディタ:Brackets

【if】
●if文
1.書式
if(条件式){
 処理1
} else {
処理2
}
2.例文
スクリプト

値を入力

コンソール表示

・比較演算子
a == b →aとbが等しければ真
a === b→aとbが厳密に等しければ真
a != b→aとbが等しくなければ真
a < b→aがbより、小さければ真
a <= b→aがb以下であれば真
a > b→aがbより大きければ真
a >= b→aがb以上であれば真
「==」と「===」は違う、「===」の場合は入力したものを数字に直すためにparselnt関数を使う必要がある。

・プリミティブ型とオブジェクト型の比較の違い
1.プリミティブ型
var s1="JavaScript";
var s2="JavaScript";
s1 == s2 或いはs1 === s2 が成り立つ

2.オブジェクト型
var s1 = new String("JavaScript");
var s2 = new String("JavaScript");
s1 == s2 或いはs1 === s2 は不成立
成立するには
var s1 = new String("JavaScript");
var s2 = s1;とする。

●if~else文
書式
if(条件式1){
条件が成り立った場合の処理

}else if(条件式2){
 条件式1が成り立たず、条件式2が成り立った場合の処理

}else if(条件式3){
 条件式1、条件2が成り立たず、条件式3が成り立った場合の処理

}else{
 すべての条件式が成り立たなかった場合の処理

}
例文→スクリプト「fare1.html」
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>
<body>
<script>
var age = prompt("年齢を入力してください");
if (age < 3) {
console.log("無料");
} else if (age < 7) {
console.log("500円");
} else if (age < 12) {
console.log("1,000円");
} else if (age < 64) {
console.log("2,000円");
} else {
console.log("無料");
}
</script>
</body>
</html>

●if文を入れ子にする
書式
if (条件式1){
処理1
  if (条件式2){
処理2
}
}else{
if(条件式3){
処理3
  }
}
例文→スクリプト「fare2.html」
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>
<body>

<script>
var age = prompt("年齢を入力してください");
if (age < 0) {
alert("年齢には正の値を入力してください");
} else {
if (age < 3) {
console.log("無料");
} else if (age < 7) {
console.log("500円");
} else if (age < 12) {
console.log("1,000円");
} else if (age < 64) {
console.log("2,000円");
} else {
console.log("無料");
}
}
</script>

</body>
</html>

●三項演算子
書式
(条件式)?値1:値2
例文
<!DOCTYPE html>
<html lang="ja">
<head>
<meta>
<title>JavaScriptのテスト</title>
</head>

<body>
<script>
var rate = prompt("点数を入力してください");
var result;
result = (rate >= 80) ? "合格" : "不合格";
console.log(rate + "点は" + result);
</script>
</body>
</html>
値入力

コンソール表示


●switch文
書式
switch(num){
  case 1:
処理1
break;
case 2:
処理2
break;
case 3:
処理3
break;

・・・・・
default:
}
例文
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>

<body>
<script>
var season = prompt("春、夏、秋、冬を入力してください");
switch(season){
case "春":
console.log("Spring");
break;
case "夏":
console.log("Summer");
break;
case "秋":
console.log("Autumn");
break;
case "冬":
console.log("Winter");
break;
default:
console.log("春、夏、秋、冬を入力してください");
}
</script>
</body>
</html>
値入力

コンソール表示


 
コメント
  • Twitterでシェアする
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする