Webデザイナーを目指す人のブログ

Webサイト作成時に勉強したことの備忘録

JavaScript サイト構築

【Javascript】組み込みオブジェクト〜MathオブジェクトとDateオブジェクト〜

投稿日:

                                                                                                                                 

組み込みオブジェクト

本日は昨日に引き続き組み込みオブジェクトについて見ていきます。
すごく簡単に復習しますが、組み込みオブジェクトとはJavascriptで元々用意されているオブジェクトのことです。
今日はMathオブジェクトとDateオブジェクトについて見ていきます。

Mathオブジェクト

Mathオブジェクトでは数学に関するオブジェクトになります。
MathオブジェクトはStringやArrayで記述する必要があったnewを記載せずに定義することができます。
コンソールに書き出す場合は

console.log(Math.プロパティ名);

のように記述します。
さて、どんなものがプロパティとして用意されているのか調べてみると、本当に数学的なものばっかりでした。
ネイピア数(オイラー数)って知っていますか?
自然対数の底として用いられる数学定数で、約2.718らしいのですが、そもそも知らない。
唯一わかったのが円周率と平方根
円周率は3.14159
平方根は1.41421356
ですね。
なのでとりあえずこの2つをコンソールに書き出してみましょう。

// 円周率
console.log(Math.PI) 


// 平方根
console.log(Math.SQRT2) 

きちんと書き出されました。

Mathオブジェクトのメソッド

メソッドも用意されています。
メソッドもタンジェントやらlogやら久しぶりに聞く単語が沢山あって白目を向きそうです。
わかりやすいのをいくつか書いていきます。

Math.ceil(x) 引数として与えた数以上の最小の整数を返す
Math.floor(x) 引数として与えた数以下の最大の整数を返す
Math.round(x) 引数として与えた数を四捨五入して、近似の整数を返す
Math.sign(x) 引数として与えた数の符号 (正、負または 0) を返す

例を見ていきましょう。

// 引数として与えた数以上の最小の整数を返す
console.log(Math.ceil(4.8)); 



// 引数として与えた数以下の最大の整数を返す
console.log(Math.floor(4.8)); 



// 引数として与えた数を四捨五入して、近似の整数を返す
console.log(Math.round(4.8)); 



// 引数として与えた数の符号 (正、負または 0) を返す
console.log(Math.sign(-4.8)); 

プロパティとメソッドの一覧はこちらのページから見ることが出来ます。
Mathオブジェクトのプロパティ一覧

Dateオブジェクト

Dateオブジェクトとは日付に関するオブジェクトです。
Dateオブジェクトを定義するときは以下のように書きます。

var オブジェクト名 = new Date();

現在の時刻をコンソールツールに書き出すには以下のようにします。

var d = new Date();
console.log(d); 

また、呼び出したい日付を指定するには以下のように書きます。

var オブジェクト名 = new Date(年,月,日,時,分,秒);

2017年6月14日6時14分30秒を指定してみます。

var d = new Date(2017,5,14,6,14,30);
console.log(d); 

ひとつ気をつける部分があります。
月に関してのみ0から数え始めるので(1月が0、2月が1…)、指定したい月から1引いた数を記載する必要があります。

-JavaScript, サイト構築

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSS基礎編 .vol2

backgroundプロパティ backgroundプロパティについて調べているときに今まで使ったことがなかったbackgroud-attachmentというプロパティが出てきました。 これは画面や要 …

no image

【jQuery】初心者が勉強するjQuery

jQueryとは Web制作に携わっている人であれば一度は必ず耳にしているであろうjQuery。 私の中ではjQueryというのはなんとなくJSの難しい版だと勝手に解釈していました。 今回、改めてjQ …

no image

CSS基礎編 vol.07

FlexBox 今日の今日まで存在をしらなかったFlexBox レスポンシブデザインを作る時にとても便利そうなので使い方を調べてまとめてみます。 最初に設定方法です。 FlexBoxはFlexBoxコ …

no image

CSSレイアウト vol.02

2カラムレイアウトをつくる 2カラム・3カラムのレイアウトを作る場合によくfloatが使われます。 今回はmainのcontainerの中にleftとright2つの領域を作っていきます。 <! …

no image

CSSレイアウト vol.01

今回からはレイアウトを整えていく方法について勉強した内容をまとめていきます。 reset.cssとnormalize.css WEBの勉強を始めた当初、htmlとcssを用意してブラウザに反映させてみ …