【jQuery】基本的な使い方
皆さんこんばんは(^o^)１週間が始まりましたね。
今日は制作現場でもよく使うjQueryの使い方をご紹介します。
jQueryはライブラリを読み込み利用しますが今回は割愛します。
▼変数定義について
慣習上、変数の冒頭に$をつけます。
const $input = $("input");
▼テキストの中身を変える方法
$("p").text("こんにちは");
テキストの中身を変えるには.text()を利用します。
JavaScriptと書き方が若干違うので注意。
▼クラスの追加
$("p").addClass(red");
クラスの追加の方法
addClassでCSSの追加が可能。
上記は一例なのでまた改めて紹介させていただきます(^o^)
今週も頑張っていきましょう！
【JavaScript】ローカルストレージを使ってメールアドレスを保存しよう
こんばんは(^o^)今日は蒸し暑かったですね。
前回のクッキー保存に引き続き今日はローカルストレージに保存する方法をご紹介します。ローカルストレージはHTML5から対応しています。
それではindex.htmlを用意します。
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<input type="text" id="email" name="email">
</div>
<button id="save">メールアドレスを保存する</button>
<script>
document.getElementById('save')
.addEventListener('click',()=>{
localStorage.setItem('email',document.getElementById
})
('email')
</script>
</body>
</html>
まずHTMLはテキスト入力フィールドとボタンを用意します。
<div>
<input type="text" id="email" name="email">
</div>
<button id="save">メールアドレスを保存する</button>
続いてJavaScriptです。
<script>
document.getElementById('save').addEventListener
('click',()=>{
localStorage.setItem('email',document.getElementById
})
('email')
</script>
順に解説していきます。
まずボタンを押したら発火させたいのでボタン要素を取得しクリックイベントを設定します。続いてテキストフィールドに入力していたメールアドレスの値を取得しsetItemメソットを利用しローカルストレージに保存します。
確認はchromeで検証を開きアプリケーションのローカルストレージより参照してください。Cookieですと保存期限がありましたがローカルストレージには期限がありません。
そして最後にテキストフィールドにgetItemメソッドでemailのキーを取得し反映させます。以上でプログラムが完成です。
手軽にできるプログラムなので皆さん是非やってみてください＼(^o^)／
【JavaScript】Cookieを使ってメールアドレスを保存しよう
皆さんこんばんは(^o^)
今日は夏を彷彿させる暑さでしたね・ω・
体調を崩しやすい季節なので体調管理には気をつけていきましょう。
今日はお問い合わせフォームなどでよく使われているCookieえを保存する方法を
ご紹介します。
先ずはindex.htmを用意します。
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="email" name="email">
</div>
<button id="save">保存</button>
<script>
const getCookie=(key)=>{
console.log(cookies)
for(let i = 0 ;i < cookies.length;i++){
let k = cookies[i].split('=');
if(k[0] === key){
return decodeURIComponent(k[1]);
}
}
return ""
}
document.getElementById('save').addEventListener
('click',function(){
let email = encodeURIComponent(document.getElementById
})
</script>
</body>
</html>
上記が完成版のコードです。一つずつ見ていきましょう。
document.getElementById('save').addEventListener
('click',function(){
let email = encodeURIComponent(document.getElementById
})
まずここで何をしているかというと保存ボタンの要素を取得しています。
そして保存ボタンの要素に対してクリックイベントを設定します。
次に変数emailにinput要素に入力された値を格納します。
ここでeccodeURIComponentメソッドを使ってデータを別の形式にエンコード（変換）します。
次にdocument.cookieを用いてメールアドレス情報を’email'をkeyにして保存します。
chromeでしたら検証のアプリケーションメニューにあるcookieより確認することができます。ちなみにmax-age=3600とは決り文句のコードで1時間保持することを示しています。数字を変えれば秒数分の時間保持されます。
const getCookie=(key)=>{
console.log(cookies)
for(let i = 0 ;i < cookies.length;i++){
let k = cookies[i].split('=');
if(k[0] === key){
return decodeURIComponent(k[1]);
}
}
return ""
}
次にこの部分ですが関数を定義しメールアドレスをreturnする仕組みとなります。
現時点ではcookieは2種類保存されていています。
入力したメールアドレスとダミーの値です。
let cookies =document.cookie.split(';');ですが２つのcookieが;のあとに連結されているのでsplitを用いて分割します。
そしてcookieoの数だけfor文を用いてまわし配列を操作します。
配列の変数kを定義しそれぞれのcookieを=を軸にsplitで分割します。
そして値がemail出会ったらemailの値をリターンするプログラムとなり一度入力されたメールアドレスが保存される仕組みが完成です。
サイドに関数を実行しinput要素に出力します。これでまた一つ使いやすいサイトができます。皆さんも是非、コードを書いてみてください＼(^o^)／
【JavaScript】要素を生成しリストを作ろう
1週刊がやっと終わりましたね(^o^)
今週は忙しい日々でくたくたです(笑)
さて今日はJavaScriptを用いてリストを生成する方法をお伝えします。
まずはindex.htmlを用意します。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>lists</title>
</head>
<body>
<ul></ul>
<script>
const ul = document.querySelector("ul");
for(let i = 0;i < 10;i++){
let li = document.createElement('li');
li.textContent = `テスト${i + 1}`;
ul.append(li);
}
</script>
</body>
</html>
HTMLはulタグだけを用意します。
次にscriptタグを記述します。
<script>
const ul = document.querySelector("ul");
for(let i = 0;i < 10;i++){
let li = document.createElement('li');
li.textContent = `テスト${i + 1}`;
ul.append(li);
}
</script>
こちら順に見ていきましょう。
まずliタグを生成する前にulタグを取得します。
ここで取得したulタグにliタグを追加していく流れです。
今回はリストを1から10まで生成します。
for(let i = 0;i < 10;i++){
let li = document.createElement('li');
li.textContent = `テスト${i + 1}`;
ul.append(li);
}
必要回数分、回せばいいのでここではfor文を利用します。
要素を生成するにはcreateElement(生成する要素)を用います。
ここで生成した要素をliタグに格納します。
次にliのテキストをtextContentを用いて指定します。
テスト${i}の箇所はiタグを用いて1を足します。これでリストの番号を表現可能です。
そして最後に取得していたul要素にapeend()メソッドを用いて追加します。
appendを用いることでul要素の末尾に要素の追加が可能です。
これをfor文で指定した回数分、li要素が追加される仕組みです。
以上でJavaScriptを用いたリスト作成は完了です。
【JavaScript】画面をロードするごとに表示する画像を切り替えよう
最近仕事が忙しく今日もギリギリの更新になってしまいました。
これから寒くなっていくので体調には気をつけていきましょう！
今日は画面をロードするごとに画像が切り替わる仕組みをお伝えします。
まず画像を3枚用意してください。種類はなんでもOKです。
画像名はimg01.jpg、img02.jpg、img03.jpgとします。
次にindex.htmlを作成します。
index.html (完成版)
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div><img src="img01.jpg" id = "img" alt="画像"></div>
<script>
window.onload = function(){
let num = Math.floor(Math.random()* 10);
if(num >= 3){
num = 0
}
const target = document.getElementById("img");
let img = `img0${num + 1 }.jpg`;
console.log(img)
target.setAttribute('src',img)
}
</script>
</body>
</html>
下記の通り初期値はimg01.jpgを初期値とします。
<div><img src="img01.jpg" id = "img" alt="画像"></div>
続いてJavaScriptを書いていきます。
<script>
window.onload = function(){
let num = Math.floor(Math.random()* 10);
if(num >= 3){
num = 0
}
const target = document.getElementById("img");
let img = `img0${num + 1 }.jpg`;
console.log(img)
target.setAttribute('src',img)
}
</script>
ここでは画面を読み込んだ際に処理を実行したいのでwindow.onloadを用いて処理をします。
次に変数numに乱数を生成するMath.random()メソッドを使い0〜9の数字を生成します。小数点以下はMath.floorメソッドで切り捨てます(^o^)
さてここで問題なので数字が3以上になった場合です。画像が3枚しかないので3以上の場合だと画像が足りません。
if(num >= 3){
num = 0
}
そこでif文を用いて乱数が3以上の場合は数字を0にしています。これで３以上になることはありません。
const target = document.getElementById("img");
let img = `img0${num + 1 }.jpg`;
console.log(img)
target.setAttribute('src',img)
そして変数targetにimgタグの要素を取得します。
次に変数imgに乱数をテンプレートリテラルを用いてファイル名の形に整えます。
ここで重要なのがnumに1を足して0が出た場合は1、1の場合は2、2の場合は3にして変数imgに格納します。
そして変数targetに取得したimg要素のsrc属性にimgタグを引数にして渡します。
これで完成です。画面をみるとロードするたびに画面が変わっているはずです。
是非試してみてくださいね。
ファイル管理にお困りのリモートワーカーへ【Web-luck（ウェブ・ラック）】 
【JavaScript】Ajaxを使ってJSONデータを受信しよう
こんばんは。今日も雨が振りましたね。
ただ秋に突入しだんだんと過ごしやすい気候になってきました。
さて、今日は少し難しいのですがAjax通信を用いたコードを展開します。
まず2つファイルを用意します。(コピペしてお試しください)
cakes.json
[
{
"name": "ショートケーキ",
"price": "300円"
},
{
"name": "チョコレートケーキ",
"price": "400円"
},
{
"name": "ミルクレープ",
"price": "500円"
}
]
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="output"></div>
<!-- ここに、JavaScriptを記述します -->
<script>
const getLocations = () => {
return new Promise(function (resolve) {
xhr.open('GET', url);
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(result);
}
}
})
}
getLocations().then(function(locations) {
let html = '';
for (let i=0; i<locations.length; i++) {
html += locations[i].name + '/' + locations[i].address
+ '<br>'
}
document.getElementById('output').innerHTML = html;
})
</script>
</body>
</html>
上記が完成版のコードです。
<div id="output"></div>
<!-- ここに、JavaScriptを記述します -->
<script>
const getLocations = () => {
return new Promise(function (resolve) {
xhr.open('GET', url);
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(result);
}
}
})
}
一つずつ見ていくとここでは変数urlを定義しcakes.jsonファイルを格納します。
そしてそれ以降はAjax通信を始めるにあたっての決まり文句となりますのでここでは解説を割愛いたします。
getcakes().then(function(cakes) {
let html = '';
for (let i=0; i<cakes.length; i++) {
html += cakes[i].name + '/' + cakes[i].address +
'<br>'
}
document.getElementById('output').innerHTML = html;
})
</script>
そしてAjax通信のgetcakes()関数を実行し各種データをfunction(cakes)に格納します。
そしてデータの個数分だけfor文を回し変数htmlに格納します。
これでブラウザを見るとケーキと金額が個数分出ていると思います。Ajax通信は複雑で分かりづらいのですが是非試してみてください＼(^o^)／
ファイル管理にお困りのリモートワーカーへ【Web-luck（ウェブ・ラック）】
【JavaScript】npm-scriptsをつかってWEB制作を効率的する(Pug編2)
おまたせしました！今日はPug編の2回目です。
今日はPugを使った基礎的な記法をご紹介いたします＼(^o^)／
1回目では環境構築の記事を書いているのでまだの方はぜひ見ておいてください！
まずはフォルダにsrc/pug/というディレクトの下にindex.pugというファイルを作成します。続いてPugに下記の記述をします。
doctype html
html(lang="en")
head
meta(name="viewport", content="width=device-width,
initial-scale=1.0")
title Document
body
p.test1 これはテスト
p.test2 これはテスト
p.test3 これはテスト
p.test4 これはテスト
p.test5 これはテスト
見てみると閉じタグがないですよね！これがPugの書き方です。
PugはCSSでいうとSassのようなものなのでこれをコンパイルしてHTMLに変換します。
上記の書き方ですとbodyタグの中にpタグを入れ子にするために半角スペースをあけますそうすると下記のようなHTMLファイルが出力されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="test">これはテスト</p>
<p class="test2">これはテスト</p>
<p class="test3">これはテスト</p>
<p class="test4">これはテスト</p>
<p class="test5">これはテスト</p>
</body>
</html>
実行にはターミナルに下記コマンドを打ち込みます。
npm run watch:pug
これによりPugが変更があるかを随時監視し変更があったら都度コンパイルを実行することができます。いかがでしたでしょうか？Pugはいろんな書き方があるので習得することで効率的にWEB制作ができるので必見です！
ブログ始めました！
— フロントエンドブログ(よーさん) (@frontend_blog23) 2021年8月30日
よろしければ見ていってください！https://t.co/5oZys8GAIq#フロントエンジニア #WEB制作#WordPress
