
スキルアップ
2021.01.08
社会人の勉強は何をするべき?勉強のメリットと勉強方法も紹介!
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
JavaScript
2018.01.31
JavaScript の記述方法のサンプルを挙げてみます。
今回は、閲覧者の情報を一時的に保存するクッキー( cookie )のサンプルを紹介します。
画面で入力された内容を保存するクッキーを作成します。
クッキーに保存する内容を入力して クッキー保存ボタンをクリックしてみて下さい。
また、クッキー削除ボタンもクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- window.onload = function() { var str = ""; str += "クッキーで保存されている内容 : " + getCookie() + "<br>\n"; document.getElementById("dat").innerHTML = str; } function getCookie() { var cookieStr = document.cookie + ";"; var startNum = cookieStr.indexOf("cookie_data"); var txt = ""; if (startNum != -1){ var endNum = cookieStr.indexOf(";",startNum); txt = unescape(cookieStr.substring(startNum + "cookie_data".length + 1, endNum)); } return txt; } function saveCookie() { //入力内容を取得 var txt = document.getElementById("dat2").value; //日付データを作成 var day = new Date(); //クッキーの保存期間として5分後をセット day.setTime(day.getTime() + 60*5*1000); //入力内容と日付データをクッキーへ書き込む document.cookie = "cookie_data=" + escape(txt) + ";expires=" + day.toGMTString(); //ページをリロード location.reload(); } function delCookie() { //日付データを作成 var day = new Date(); //過去の日付データ(1970年1月1日00:00:00)をセット day.setTime(0); //有効期限を過去に設定 document.cookie = "cookie_data=;expires=" + day.toGMTString(); //ページをリロード location.reload(); } //--> </script> <div style="background-color : #CCC;"> <div id="dat"></div><br> <input type="text" id="dat2" placeholder="クッキーに保存する内容を入力して下さい"><br> <input type="button" value="クッキー保存" onclick="saveCookie()"><br> <input type="button" value="クッキー削除" onclick="delCookie()"> </div>
document.cookie に保存する情報を格納します。
クッキーに保存された情報を呼び出す時のために、目印となる文字列(上のサンプルでは「 cookie_data= 」)と共に情報を書き込みます。
サイトを訪問した回数を表示するためのクッキーを作成します。
リロードボタンをクリックしてみて下さい。
クッキー削除ボタンをクリックするとカウントがリセットされます。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- window.onload = function() { var str = ""; str += getCookie() + " 回目の訪問です!"; document.getElementById("dat").innerHTML = str; } function getCookie() { var cookieStr = document.cookie+";"; var startNum = cookieStr.indexOf("cookie_count"); num = 1; if (startNum != -1){ var endNum = cookieStr.indexOf(";",startNum); num = unescape(cookieStr.substring(startNum + "cookie_count".length + 1, endNum)); } return num; } function reload() { //カウントをインクリメント num++; //日付データを作成 var day = new Date(); //クッキーの保存期間として5分後をセット day.setTime(day.getTime() + 60*5*1000); //入力内容と日付データをクッキーへ書き込む document.cookie = "cookie_count=" + escape(num) + ";expires=" + day.toGMTString(); //ページをリロード location.reload(); } function delCookie() { //日付データを作成 var day = new Date(); //過去の日付データ(1970年1月1日00:00:00)をセット day.setTime(0); //有効期限を過去に設定 document.cookie = "cookie_count=;expires=" + day.toGMTString(); //ページをリロード location.reload(); } //--> </script> <div style="background-color : #CCC;"> <div id="dat"></div><br> <input type="button" value="リロード" onclick="reload()"><br> <input type="button" value="クッキー削除" onclick="delCookie()"><br> </div>
クッキーに保存された情報を呼び出す際に目印となる文字列(上のサンプルでは「 cookie_count= 」)と共に、訪問回数をdocument.cookie に書き込んでいます。
上のサンプルでは 便宜上リロードボタンをクリックした時に呼び出される reload関数に処理を定義していますが、通常は onload 時の処理として定義します。
スキルアップ
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.