日曜日, 5月 28, 2023

Let's start JavaScript 07 
使用しているブラウザーのバージョン確認

使用しているブラウザーのバージョン確認です。

<!-- index.html -->

<!DOCTYPE html>
<html lang="ja">
<head>
<title>ブラウザとバージョン確認</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
<!-- linksフォルダーのrule.cssを利用する -->
</head>
<body>
<br>
現在利用しているブラウザのバージョンは以下の通りです
<h1><br>
<script src="links/action.js"></script>
<!-- linksフォルダーのaction.jsを利用する -->
</h1>
</body>
</html>

<!-- index.html -->

JavaScriptは、ほとんどコピー&ペーストですね。
/* action.js */
var browser = "";
var version = 0;
/* browserは無し、versionは0でスタート。ブラウザ判定には[navigator]オブジェクトの[userAgent]プロパティを使用。このプロパティの中にブラウザの「種類」や「バージョン」などの情報が格納されているので、プロパティに指定した文字列(chromeやsafari等)の文字列testメソッドで正規表現チェックし、それが含まれているか否かでブラウザの種類を判断。
[¥d]は半角文字。*/
if (/Opera/.test(navigator.userAgent)) {
browser = "Opera";
version = navigator.userAgent.match (/Opera\/(\d+\.\d+)/)[1];
}
else if (/Edg/.test(navigator.userAgent)) {
browser = "Microsoft Edge";
version = navigator.userAgent.match(/Edg\/(\d+\.\d+)/)[1];
}
else if (/Chrome/.test(navigator.userAgent)) {
browser = "Google Chrome";
version = navigator.userAgent.match(/Chrome\/(\d+\.\d+)/)[1];
}
else if (/Safari/.test(navigator.userAgent)) {
browser = "Apple Safari";
version = navigator.userAgent.match(/Safari\/(\d+\.\d+)/)[1];
}
else if (/Firefox/.test(navigator.userAgent)) {
browser = "Mozilla Firefox";
version = navigator.userAgent.match(/Firefox\/(\d+\.\d+)/)[1];
}
document.write(browser);
document.write("&emsp;" + version);

/* document.write("現在使用中のブラウザー: " + browser);
document.write("バージョン: " + version);
なお、Internet ExplolerのレンダリングエンジンはTrident(開発終了
Chrome28以降はWebKitから分岐されたBlinkを使用
Safari, EdgeのレンダリングエンジンはWebKit、
Firefox や Thunderbird のレンダリングエンジンはGecko、 OperaのレンダリングエンジンはPresto(開発終了)で
15以降はWebKitから分岐されたBlinkを使用  */

/* action.js */


/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}

html
{
overflow-y:scroll;
}

body *, ::before, ::after {
box-sizing: border-box;
}

.clearfix::after {
content: " ";
display: block;
clear: both;
}

body {
color: #000000;
background-color: #dcdcdc;
text-align: center;
font-size: 14px;
font-family: Arial, sans-serif;
line-height: 1.0;
}
h1 {
font-size: 30px;
color: #ff0000;
}
/* rule.css */

上は処理結果です。なんともつまらない結果になりました(^o^)