
スキルアップ
2021.01.08
社会人の勉強は何をするべき?勉強のメリットと勉強方法も紹介!
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
JavaScript
2017.12.22
JavaScript の記述方法のサンプルを挙げてみます。
今回は、新しいウィンドウを開いたり閉じたりする際の記述と ウィンドウの生成方法についてのサンプルを紹介します。
1.ウィンドウを開く
2.ウィンドウを生成する
3.ウィンドウを閉じる
新しいウィンドウを開きます。
開くボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- function winOpen() { window.open("https://programmercollege.jp/","","width='50%',height='90%'"); } //--> </script> <div style="background-color : #CCC;"> <input type="button" value="開く" onClick="winOpen()"> </div>
「 window.open(“”, “”, “”); 」で新しいウィンドウを開くことができます。
第 1 引数には、新しく開いたウィンドウに表示するページの URL を指定します。
第 2 引数には、ウィンドウ名を指定することができます。
特に必要がなければ指定無しでOKです。
第 3 引数には、ウィンドウの特徴を設定するオプションを指定することができます。
この指定は 複数のパラメーターをカンマ区切りで指定するため、引用符(「 ” 」と「 ‘ 」)の使い分けに注意が必要です。
オプション指定を省略すると、ブラウザの新規ウィンドウと同じ仕様で開きます。
上のサンプルでは、第 3 引数でウィンドウの横幅と高さを指定していますが、ここで指定可能なパラメータのうち主要なものは次の通りです。
パラメーター 値 意味 width 数値 ウィンドウ幅 height 数値 ウィンドウ高さ left 数値 ウィンドウ位置左 top 数値 ウィンドウ位置上 menubar yes/no メニューバー有無 toolbar yes/no ツールバー有無 location yes/no アドレスバー有無 status yes/no ステータスバー有無 resizable yes/no リサイズ可否 scrollbars yes/no スクロールバー有無
既存のWebページではなく、プログラムの中でWebページを作成して表示することもできます。
タイトルと本文を入力して 生成ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- function winCreate() { var newWin, wkWin; var dat1 = document.getElementById("dat1").value; var dat2 = document.getElementById("dat2").value; //ウィンドウを開く wkWin = window.open("","","width='50%',height='90%'"); //ウィンドウ移動 wkWin.focus(); //ドキュメントを開く wkWin.document.open(); //ドキュメントクリア wkWin.document.clear(); //ドキュメントに文字列を出力 newWin = "<html><head><title>" + dat1 + "</title></head><body>" + dat2 + "</body></html>"; wkWin.document.write(newWin); //ドキュメントを閉じる wkWin.document.close(); } //--> </script> <div style="background-color : #CCC;"> <div style="display:inline-flex;"> タイトル : <input type="text" id="dat1"> </div> <div style="display:inline-flex;"> 本文 : <input type="text" id="dat2"> </div> <input type="button" value="生成" onClick="winCreate()"> </div>
動的に作成した内容を 別のウィンドウに表示したい場合、ファイルを用意して中身を書き換える方法もありますが、上のサンプルのように 1 から作ることもできます。
新しいウィンドウの内容を作成する際には( 上のサンプルの「 newWin = “ ・・・ ”; 」の部分 )、変数など文字列以外に引用符(「 ” 」や「 ‘ 」)を付けないように注意して下さい。
ウィンドウを閉じるボタンを作成します。
現在のページが閉じられないように、新しく開いたウィンドウに閉じるボタンを設置します。
開くボタンをクリックして新しくウィンドウを開いた後、閉じるボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- function winClose() { var newWin, wkWin; //ウィンドウを開く wkWin = window.open("","","width='50%',height='90%'"); //ウィンドウ移動 wkWin.focus(); //ドキュメントを開く wkWin.document.open(); //ドキュメントクリア wkWin.document.clear(); //ドキュメントに文字列を出力 newWin = "<html><head><title>ウィンドウを閉じるサンプルページ</title></head>" + "<body>閉じるボタンをクリックして下さい!" + "<input type='button' value='閉じる' onClick='window.close()'>" + "</body></html>"; wkWin.document.write(newWin); //ドキュメントを閉じる wkWin.document.close(); } //--> </script> <div style="background-color : #CCC;"> <input type="button" value="開く" onClick="winClose()"> </div>
「 window.close(); 」で 現在開いているウィンドウを閉じることができます。
スキルアップ
2021.01.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
スキルアップ
2021.01.08
独学でフリーランスエンジニアを目指す方へ向けて、未経験からフリーランスエンジニアになるための手順や独学でのプログラミング学習法、必要なスキルなどをご紹介します。 独学とスクールどちらで勉強すればいいか迷っている、そもそも […]
スキルアップ
2021.01.05
高卒女子の就職内定率は大卒女子とほぼ同じ。でも知恵袋には「高卒女性が応募できる正社員求人って少ないのでは…?」と心配する人たちもいるようですが、資格なしでも高収入が期待できる仕事はたくさんあります。そこで今回は現役女子高 […]
スキルアップ
2020.12.30
プログラマの仕事に興味はあるものの「プログラマの仕事はきつい」というのを耳にして不安に思ったりしていませんか?なぜプログラマの仕事はきついといわれるのか?そもそも未経験からでもプログラマになれるのか?本記事では、プログラ […]
スキルアップ
2020.12.21
技術の進歩に伴い、IT業界も人気の業界のひとつとなりましたが、「IT業界はブラック企業が多いからエンジニアを目指すのはやめとけ」という声も聞こえてきます。これは本当なのでしょうか?この記事では、実際の疑問の声に対する理由 […]
スキルアップ
2020.12.18
仕事にやりがいを感じられず悩んではいませんか?本記事では、仕事で満足感を得るにはどうすればいいのか、やりがいの感じやすいお仕事7選、仕事にやりがいを見つけるポイント、転職しなくても仕事の満足度をあげる方法などをご紹介しま […]
INTERNOUS,inc. All rights reserved.