Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@otupy(py 乙)

100日後にエンジニアになるキミ - 23日目 - Javascript - JavaScriptの基礎6

Last updated at Posted at 2020-04-12

今日もJavaScriptの続きになります。

前回のはこちら

100日後にエンジニアになるキミ - 22日目 - Javascript - JavaScriptの基礎5

例外処理(try , catch)

プログラム上では様々なエラーが発生します。
エラーが発生すると、通常はそこでプログラムが停止してしまいます。

プログラムを動かし続けるには、こういったエラーに対処する必要があります。
例外処理はこういったエラーに対処するための構文です。

例外処理の構文

try {
    処理;
} catch (e) {
    例外時の処理;
} finally {
    最後に行う処理;
}

エラーが発生しそうな部分をtry{}catchで囲みます。

try {
    a3=a10;
} catch (e) {
    console.log(e);
} finally {
    console.log('finish');
}

ReferenceError: a10 is not defined at :2:5
finish

エラーが発生すると、catchの部分のブロックが実行されます。
finallyのブロックはエラーが有っても無くても最後に実行される部分になり
省略することが可能です。

エラーの種類

種類（オブジェクト名） エラー内容
Error 一般的なエラー
TypeError 型が間違っているエラー
ReferenceError 存在しない変数が参照されたエラー
SyntaxError 文法エラー
URIError URIが間違っているエラー
RangeError 値が配列内に存在しない、または値が許容範囲にないエラー
MediaError Video APIまたはAudio APIに関するエラー
FileError FileSystem APIに関するエラー
EvalError evalメソッドが不適切に使用されたエラー
InternalError JavaScriptエンジンの内部エラー

プログラム上、文法などが間違っている場合はエラーになります。
このようにたくさんのエラーがあるので、エラーが発生する場合は
例外処理を行う必要が出てくる場合があります。

ビルトイン関数

ビルトイン関数とは、プログラム言語に初めから備わっている関数になります。
通常「関数」は定義しなければ使えませんが、初めから定義されているものもあります。

主なビルトイン関数を見ていきましょう。

変換

引数のデータ型を変更することができる。

Number(引数) : 文字列を数値に変換する
parseInt(引数 , 10) : 文字列を10進数に変換する
parseInt(引数 , 16) : 文字列を16進数に変換する
parseInt(引数 , 2) : 文字列を2進数に変換する
parseInt(引数 , 8) : 文字列を8進数に変換する
parseFloat(引数) : 文字列を小数点値に変換する

console.log(Number('10'));
console.log(parseInt('11',10));
console.log(parseInt('11',16));
console.log(parseInt('11',2));
console.log(parseInt('11',8));
console.log(parseFloat('3.14'));

10
11
17
3
9
3.14

String(引数) : 文字列に変換する
encodeURIComponent(文字列) : URLエンコードする
decodeURIComponent(文字列) : URLデコードする

let st = String(123);
console.log(st);
let url = 'http://sample.com/?a=';
let euc = encodeURIComponent(url+st);
console.log(euc);
let duc = decodeURIComponent(euc);
console.log(duc);

123
http%3A%2F%2Fsample.com%2F%3Fa%3D123
http://sample.com/?a=123

文字列

文字列に対して、色々な操作をすることができる。

文字列.includes(検索文字列) : 文字列に検索文字列があるか検索結果を返す
文字列.startsWIth(検索文字列 ) : 検索文字で始まるかの判定結果を返す
文字列.endsWIth(検索文字列 ) : 検索文字で終わるかの判定結果を返す
文字列.replace(検索文字,置換文字) : 文字の検索文字を置換文字にする
文字列.slice(開始値(省略可),終了値) : 文字列を開始終了位置で切り出す
文字列.split(区切り文字) : 文字列を区切り文字で配列に分割する
文字列.toLowerCase() : 文字列を小文字に変換する
文字列.toUpperCase() : 文字列を大文字に変換する
文字列.trim() : 文字列の両端の空白を削除する

let str1 = 'abcde';
let str2 = 'a,b,c';
let str3 = 'ABCDE';
let str4 = ' a c ';
console.log(str1.includes('bcd'));
console.log(str1.startsWith('abc'));
console.log(str1.endsWith('cde'));
console.log(str1.replace('a','x'));
console.log(str1.slice(1,4));
console.log(str2.split(','));
console.log(str3.toLowerCase());
console.log(str1.toUpperCase());
console.log(str4.trim());

true
true
true
xbcde
bcd
["a", "b", "c"]
abcde
ABCDE
a c

数学

数学的な計算をするための関数です。

Math.abs(数値) : 数値の絶対値を返す
Math.min(配列) : 配列の最小の値を返す
Math.max(配列) : 配列の最大の値を返す
Math.random() : 0以上1未満の乱数を返す
Math.round(数値,桁) : 小数点を桁で四捨五入(誤差が大きいので注意)

let num1 = 123.45;
let arr1 = [1,2,3,4,5];
console.log(Math.abs(-1*num1));
console.log(Math.min(...arr1));
console.log(Math.max(...arr1));
console.log(Math.random());
console.log(Math.round(num1,2));

123.45
1
5
0.4373924234156359
123

HTMLとの兼ね合いもあり、数値計算や文字列操作は
よく使う関数なので覚えておきましょう。

HTML要素の取得(document)

「document」オブジェクトはブラウザに読み込まれたウェブページを指し
「document」オブジェクトを用いるとHTML要素へアクセスできる。

要素取得の書き方

document.head : head要素を取得
document.body : body要素を取得
document.cookie : cookieを取得
document.getElementById(要素名) : id属性の値で要素を取得
document.getElementsByName(要素名) : name属性の値で要素を複数取得
document.getElementsByClassName(要素名) : class属性の値で要素を複数取得

「document」からgetElementByIdで取得したものは「element(要素)」となる

要素.textContent:テキスト
要素.className:クラス名
要素.id:id名
要素.name:name名
要素.content:content
が取得できる。

getElementsは複数形になるので配列が返ってくるので注意

sample.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      onload = function(){
        let id = document.getElementById('id1');
        let na = document.getElementsByName('name1');
        let cl = document.getElementsByClassName('class1');
        console.log(id.textContent);
        console.log(na[0].textContent);
        console.log(cl[0].textContent);
      };
    </script>
  </head>
  <body>
    <div id='id1'>div1</div>
    <div name='name1'>div2</div>
    <div class='class1'>div3</div>
  </body>
</html>

div1
div2
div3

HTML要素へ出力

JavaScriptから要素を探して、要素の内容を変更することができます。

document.write(値) : 値を出力する
element.innerHTML = 値 : テキストを値に書き換える(タグ出力する)
element.textContent = 値 : テキストを値に書き換える(テキスト出力する)
※ document.writeの使用は推奨されていない

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      onload = function(){
        let cl4 = document.getElementsByClassName('class4')[0];
        let cl5 = document.getElementsByClassName('class5')[0];

        cl4.innerHTML = '<h1>abcde</h1>';
        cl5.textContent = '<h2>abcde</h2>';
      };
    </script>
  </head>
  <body>
    <div class='class4'>div4</div>
    <div class='class5'>div5</div>
  </body>
</html>
スクリーンショット 2020-04-12 17.20.41.png

上の例ではHTML読み込み時にタグの要素を書き換えています。
innerHTMLではタグ出力
textContentでは文字出力になるので
うまく使い分けましょう。

オブジェクトのデータ取得

JavaScriptではブラウザー内の
様々なオブジェクトからデータを取得することができます。

ブラウザーでの表示領域はwindow
表示されている画面はscreen
ブラウザー情報は'navigator'
HTML文書の情報はdocument

document.cookie :クッキーを取得
document.documentElement.clientWidth :ドキュメントの幅を取得
navigator.userAgent :UserAgentを取得
navigator.language :ブラウザの対応言語
screen.width :画面の横幅を取得
screen.height :画面の高さを取得
window.outerWidth :表示領域の横幅を取得
window.outerHeight :表示領域の高さを取得

console.log(document.documentElement.clientWidth);
console.log(navigator.userAgent);
console.log(navigator.language);
console.log(screen.width);
console.log(screen.height);
console.log(window.outerWidth);
console.log(window.outerHeight);

150
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36
ja
2560
1440
772
1010

サイトを見ている人のブラウザー情報などから、JavaScriptを用いて
様々な操作を行うことができるので、概念を押さえておきましょう。

まとめ

JavaScriptではブラウザーやページから
様々な情報をオブジェクトとして受け取り
それを操作することができるので、概念と使い方を押さえておきましょう。

データ型を操作したり制御文で条件分岐させたりするので
今までの基礎編の文法を全て押さえておきましょう。

君がエンジニアになるまであと77日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?