JavaScriptによるブラウザ操作 入門
今回はJavaScriptのwindowオブジェクトのWeb APIを使ったブラウザ操作の方法を解説していきます。
学んでおいて損はない内容かと思いますので、ぜひ参考にしてください。
では早速、よく使うAPIたちを解説していきます。
alertとconfirm, prompt
まずは、alertのようなポップアップを出すAPIをいくつか紹介していきます。
alert
alertはその名の通り、警告などを表示させることができます。
こちらのメソッドの返り値はundefinedとなります。
alert('hello')
confirm
次はcofirmを紹介します。
こちらはユーザーにOK/Canselの質問をすることができます。
OKの場合は返り値がtrueに、Canselの場合はfalseになります。
confirm('元気ですか？')
prompt
最後はpromptです。
こちらは、ユーザーに文字を入力させることができます。
実際に入力された値が、このメソッドの返り値となります。
第一引数がラベル、第二引数がデフォルト値になります。
prompt('name','shinya')
navigatorとscreen
次に紹介するのが、navigatorとscreenになります。
これらのAPIを使うことで、クライアントのブラウザやOSの情報などを取得することができます。
navigator
まずnavigatorですが、こちらのAPIはクライアントの様々な情報を取得することができます。
主によく使われるプロパティは次の通りです。
| プロパティ名 | 説明 |
|---|---|
| userAgent | ブラウザやOSの情報 |
| language | 言語設定 |
| mediaDevices | カメラなどのメディア情報 |
| clipboard | コピーした値の保存場所 |
| geoLocation | ユーザーの場所 |
console.log(navigator.userAgent)
screen
次に解説するのが、screenになります。
こちらもよく使われるものの解説にとどめます。
| プロパティ名 | 説明 |
|---|---|
| width | スクリーンの横幅 |
| height | スクリーンの縦幅 |
| orientation | スクリーンの向きの情報など |
console.log(screen.width)
locationとhistory
最後に、locationとhistoryを解説します。
これらはブラウザの移動などを制御できるAPIになります。
location
こちらは現在表示してるページのURLを取得できます。
hrefメソッドでページの移動ができ、reloadメソッドでページのリロードができます。
location.href = "https://zenn.dev/"
location.reload()
history
次に説明するのがhisotryです。
こちらはブラウザの遷移などを取得することができます。
主なプロパティをそれぞれ説明すると、次の表の通りです。
| プロパティ名 | 説明 |
|---|---|
| current | 現在のURL |
| previous | 1個前のURL |
| next | 1個後のURL |
| back() | 1個前のURLに戻る |
| forward() | 1個後のURLに進む |
| go(n) | n個後のURLに進む(負の数の場合は戻る) |
ちなみに、ついでにURLオブジェクトというものを紹介します。
こちらのオブジェクト使うことで、URLを楽に扱えるようになります。
以下が簡単な例になります。
const url = new URL('https://javascript.info/url');
alert(url.protocol); // https:
alert(url.host); // javascript.info
alert(url.pathname); // /url
詳しい解説は下のリンクよりどうぞ。
console
その他にconsoleというAPIもあるのですが、こちらの記事のが分かりやすかったので参考にどうぞ。
このAPIを使うことで、ブラウザの開発者ツールのコンソールなどに様々な形でログを出せるので、デバッグの際などに役立ちます。
まとめ
今回はJavaScriptのwindowオブジェクトのWebAPIを使ったブラウザ操作の方法を解説しました。
ぜひ、こちらの記事を参考にフロントエンドの開発力を高めてください！
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion