์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- Absolute
- AGI
- ai
- AI agents
- AI engineer
- AI researcher
- ajax
- algorithm
- Algorithms
- aliases
- Array ๊ฐ์ฒด
- ASI
- bayes' theorem
- Bit
- Blur
- BOM
- bootstrap
- canva
- challenges
- ChatGPT
- Today
- In Total
A Joyful AI Research Journey๐ณ๐
[18] 230120 Ch. 10 ์๋ฐ์คํฌ๋ฆฝํธ DOM๊ณผ ์ด๋ฒคํธ ์ฒ๋ฆฌ, ์ ๋ ฅ ๊ฒ์ฆ: 7. ํผ์ ์ ํจ์ฑ ๊ฒ์ฆ [K-๋์งํธ ํธ๋ ์ด๋ 18์ผ] ๋ณธ๋ฌธ
[18] 230120 Ch. 10 ์๋ฐ์คํฌ๋ฆฝํธ DOM๊ณผ ์ด๋ฒคํธ ์ฒ๋ฆฌ, ์ ๋ ฅ ๊ฒ์ฆ: 7. ํผ์ ์ ํจ์ฑ ๊ฒ์ฆ [K-๋์งํธ ํธ๋ ์ด๋ 18์ผ]
yjyuwisely 2023. 1. 20. 12:51230120 Fri 18th class
Ch. 10 DOM๊ณผ ์ด๋ฒคํธ ์ฒ๋ฆฌ, ์
๋ ฅ ๊ฒ์ฆ
์ง๋: p. 407 ~ (๊ต์ฌ: HTML5 + CSS3 + JavaScript๋ก ๋ฐฐ์ฐ๋ ์นํ๋ก๊ทธ๋๋ฐ ๊ธฐ์ด, ์ ์: ์ฒ์ธ๊ตญ)
์ค๋ ๋ฐฐ์ด ๊ฒ ์ค ๊ธฐ์ตํ ๊ฒ์ ์ ๋ฆฌํ๋ค.
์ง๋ ์์ ๋ ๋ฐฐ์ด ๊ฒ ์ค ๋ค์ ๊ธฐ์ตํ ๊ฒ
- ๋ฌธ์์ด ๋งค์นญ p. 355
match() ๋ฉ์๋๋ ๋ฌธ์์ด ์์์ ์ผ์นํ๋ ์ฝํ
์ธ ๋ฅผ ํ์ํ๋ ๋ฐ ์ฌ์ฉ๋๋ค.
์ ๊ท์(regular expression)์ ์ฌ์ฉํ ์ ์๋ค. ์ฆ ?, *, ^ ๋ฑ์ ๊ธฐํธ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
์์)
var str = "Like father, like son.";
//like๋ฅผ ์ฐพ๋๋ค.
//i๋ ๋์๋ฌธ์๋ฅผ ๊ตฌ๋ถํ์ง ์์์ ๋ํ๋ด๋ ์ต์
์ด๋ค.
//g๋ ๊ฒ์๋ ๋ชจ๋ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ค์ ๋ํ๋ด๋ ์ต์
์ด๋ค.
result = str.match(/like/ig);
document.write(result);
๊ฒฐ๊ณผ)
- "demo"์์์ innerHTML๋ x๋ก ์ค์ ๋๋ค.
document.getElementById("demo").innerHTML = x;
innerHTML ์์ฑ์ (ํ
์คํธ)๋ง ๊ฐ์ง๊ณ ์์ ์๋ ์๊ณ , (HTML + ํ
์คํธ)์ผ ์๋ ์๋ค.
ex) <strong> ํ๊ทธ๊ฐ ๋ค์ด๊ฐ ์๋ ์๋ค.
์ด๋ค ์์์ ์ฝํ
์ธ ๋ฅผ ๋ณ๊ฒฝํ๋ผ๋ฉด (์ฆ ์์ ํ๊ทธ์ ์ข
๋ฃ ํ๊ทธ ์ฌ์ด์ ๋ด์ฉ์ ๋ณ๊ฒฝํ๋ ค๋ฉด)
innerHTML ์์ฑ์ ์ํ๋ ๋ด์ฉ์ ๋์
ํด ์ฃผ๋ฉด ๋๋ค.
id = "main"์ธ <div> ์์๋ฅผ ํฌํจํ๊ณ ์๋ค. HTML DOM์ ์ด์ฉํด id = "main"์ธ ์์๋ฅผ ์ฐพ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์์์ ๋ด์ฉ(innerHTML)์ ๋ณ๊ฒฝํ๋ค.
document.getElementById("main).innerHTML = "์น ํ์ด์ง๊ฐ ์์ก๋์์ต๋๋ค.";
์ฐธ๊ณ : https://meaningone.tistory.com/316
- ์์์ ๋ด์ฉ ๋ณ๊ฒฝํ๊ธฐ p. 384
ํน์ HTML ์์์ ๋ด์ฉ์ ๋ณ๊ฒฝํ๊ณ ์ถ์ผ๋ฉด innerHTML ์์ฑ์ ์ฌ์ฉํ๋ฉด ๋๋ค.
innerHTML์ ์์์ ์์ ํ๊ทธ์ ์ข
๋ฃ ํ๊ทธ ์ฌ์ด์ ๋์ธ ๋ชจ๋ HTML ์ฝ๋์ ํ
์คํธ๋ฅผ ์๋ฏธํ๋ค.
<div id = "main"> ์ด๊ฒ์ด div ์์์
๋๋ค. </div>
<div id = "main">: ์์ ํ๊ทธ
์ด๊ฒ์ด div ์์์
๋๋ค.: <div> ์์์ innerHTML
</div>: ์ข
๋ฃ ํ๊ทธ
Ch. 10 ์๋ฐ์คํฌ๋ฆฝํธ DOM๊ณผ ์ด๋ฒคํธ ์ฒ๋ฆฌ, ์ ๋ ฅ ๊ฒ์ฆ
์ฑ ์ ๋ชฉ์ฐจ
-๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(DOM)
-HTML ์์ ์ฐพ๊ธฐ
-HTML ๋ณ๊ฒฝํ๊ธฐ
-DOM ๋ ธ๋ ์ญ์ ์ ์ถ๊ฐ
-๋ธ๋ผ์ฐ์ ๊ฐ์ฒด ๋ชจ๋ธ
-์ด๋ฒคํธ ์ฒ๋ฆฌ
-ํผ์ ์ ํจ์ฑ ๊ฒ์ฆ
7. ํผ์ ์ ํจ์ฑ ๊ฒ์ฆ p. 407
์๋ฐ์คํฌ๋ฆฝํธ๋ HTML ํผ ์์ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ๋ก ๋ณด๋ด๊ธฐ ์ ์ ๊ฒ์ฆํ๋ ๋ฐ ๋ง์ด ์ฌ์ฉ๋๋ค.
ex) ์์ด๋์ ๊ฐ์ ํ์ ์
๋ ฅ
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ฌ์ฉ์์ ์ค์๋ฅผ ์์ ํ ๋ค์์ ์๋ฒ๋ก ๋ณด๋ธ๋ค๋ฉด ์๋ฒ์ ๋ถํ๋ฅผ ๋์ด์ค ์ ์๊ณ , ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๋ณด๋ค ์ ๋ขฐํ ์ ์๊ฒ ๋ง๋ ๋ค.
๊ฒ์ฆ ์ฌํญ ์์)
1. ์ฌ์ฉ์๊ฐ ํ์์ ์ธ ํ๋๋ฅผ ์ฑ์ ๋๊ฐ?
2. ์ฌ์ฉ์๊ฐ ์ ์ํ ๊ธธ์ด์ ํ
์คํธ๋ฅผ ์
๋ ฅํ์๋๊ฐ?
3. ์ฌ์ฉ์๊ฐ ์ ํจํ ์ด๋ฉ์ผ ์ฃผ์๋ฅผ ์
๋ ฅํ์๋๊ฐ?
4. ์ฌ์ฉ์๊ฐ ์ ์ํ ๋ ์ง๋ฅผ ์
๋ ฅํ์๋๊ฐ?
5. ์ฌ์ฉ์๊ฐ ์ซ์ ํ๋์ ํ
์คํธ๋ฅผ ์
๋ ฅํ์ง ์์๋๊ฐ?
์์)
<h3>ํ์๊ฐ์
</h3>
<form>
์ด๋ฆ : <input type = "text" id = "name"><br>
์ฃผ์ : <input type = "text" id = "address"><br>
์์ผ : <input type = "date" id = "birthday"><br>
์์ด๋ (6-8๋ฌธ์) : <input type = "text" id = "username"><br>
์ด๋ฉ์ผ : <input type = "email" id = "email"><br>
ํด๋ํฐ : <input type = "tel" id = "phone"><br>
<input type="submit" value="ํ์ธ"><br>
</form>
๊ฒฐ๊ณผ)
7.1 ํผ ๋ฐ์ดํฐ ์ ๊ทผ p. 408
์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ํผ ๋ฐ์ดํฐ์ ์ ๊ทผํ๊ธฐ ์ํด์๋ ํผ ์์ ์๋ ํ๋์ id๋ name ์์ฑ์ ์ด์ฉํด์ผ ํ๋ค.
<input type = "text id = "addr" name = "addr">
์์)
<script>
function display(form){
//alert("์ฐ๊ฒฐ๋จ.")
//1. alert(document.getElementById("addr").value);๋ก ํด๋ ๊ฒฐ๊ณผ๋ ๊ฐ๋ค.
//2. alert(document.frm1.addr.value);
//3.
alert(form["addr"].value);
}
</script>
</head>
<body>
<h3>ํ์๊ฐ์
</h3>
<form name="frm1">
์ด๋ฆ : <input type = "text" id = "name"><br>
์ฃผ์ : <input type = "text" id = "addr" name="addr" onclick="display(this.form)"><br>
์์ผ : <input type = "date" id = "birthday"><br>
์์ด๋ (6-8๋ฌธ์) : <input type = "text" id = "username"><br>
์ด๋ฉ์ผ : <input type = "email" id = "email"><br>
ํด๋ํฐ : <input type = "tel" id = "phone"><br>
<input type="submit" value="ํ์ธ"><br>
</form>
</body>
๊ฒฐ๊ณผ) ํ ์คํธ๊ฐ ํด๋ฆญ๋๋ฉด ํ์ ์ฐฝ์ด ๋ฌ๋ค.
7.2 ์ธ์ ๋ฐ์ดํฐ๋ฅผ ๊ฒ์ฆํ ๊ฒ์ธ๊ฐ? p. 409
1. ์ฌ์ฉ์๊ฐ ๋ง์ฐ์ค๋ก ์
๋ ฅ ํ๋๋ฅผ ์ ํํ๋ฉด ๊ทธ ์๊ฐ onfocus ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ค.
2. ์ฌ์ฉ์๊ฐ ๋ฐ์ดํฐ๋ฅผ ์
๋ ฅํ ํ์ ์
๋ ฅ ํ๋๋ฅผ ๋ ๋๋ฉด (ํ๋๊ฐ ์
๋ ฅ ํฌ์ปค์ค๋ฅผ ์์ผ๋ฉด) onblur ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ค.ํฌ์ปค์ค๋ฅผ ๋ค์ ์
๋ ฅ ํ๋๋ก ๋๋ ค๋์ต๋๋ค.
3. ํ๋๋ฅผ ๋ ๋ ๋ ์
๋ ฅ ๋ด์ฉ์ด ๋ณ๊ฒฝ๋๋ฉด (ํฌ์ปค์ค๋ฅผ ์์ผ๋ฉด์ ์
๋ ฅ ๋ด์ฉ์ด ๋ณ๊ฒฝ๋๋ฉด) onchange ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ค.
7.3 ๊ณต๋ฐฑ ๊ฒ์ฆ
๊ฐ์ฅ ๊ธฐ์ด์ ์ธ ๋ฐ์ดํฐ ๊ฒ์ฆ์ ํ๋๊ฐ ๋น์ด ์๋์ง๋ฅผ ์ฒดํฌํ๋ ๊ฒ์ด๋ค.
์์) ํ๋๊ฐ ๋น์ด์์ด๋ ๋ฐ์๋๋ onblur ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ค.
์ฌ์ฉ์๊ฐ ์๋ฌด๊ฒ๋ ์
๋ ฅํ์ง ์์ ๊ฒฝ์ฐ๋ฅผ ์ฒดํฌํ๋ ์ฝ๋์ด๋ค.
<script>
function checkNotEmpty(){
var field = document.getElementById("user");
//๋ง์ฝ์ ์ด๋ฆ์ ๊ฐ์ ๊ธธ์ด๊ฐ 0์ด๋ฉด
if(field.value.length == 0){
//ํ๋๊ฐ ๋น์ด์๋ค์! ๋ผ๋ ์๋ฆผ์ฐฝ์ ๋์๋ผ
alert("ํ๋๊ฐ ๋น์ด์๋ค์!")
field.focus();
//<form> ํ๊ทธ๋ฅผ ๋์์ํค์ง ์๋๋ค.
return false;
}
return true;
}
</script>
</head>
<body>
<form>
์ด๋ฆ: <input type = "text" id = "user">
<input type = "button" value = "ํ์ธ" onclick="checkNotEmpty()">
</form>
</body>
๊ฒฐ๊ณผ) ๋น์ด์ง ์ํ์์ ํ์ธ ๋ฒํผ์ ๋๋ฅด๋ฉด ํ์ ์ฐฝ์ด ๋ฌ๋ค.
7.4 ๋ฐ์ดํฐ ๊ธธ์ด ๊ฒ์ฆ p. 410
์ฌ์ฉ์๊ฐ ์ ํด์ง ๊ฐ์์ ๋ฌธ์๋ง์ ์
๋ ฅํ๋๋ก ํ๋ ๊ฒฝ์ฐ๋ ๋ง๋ค. ex) ์ฃผ๋ฏผ๋ฑ๋ก๋ฒํธ: 13์๋ฆฌ
์์) ์ง์ ํ ์ซ์ ๋ฒ์์ ๊ธธ์ด๊ฐ ์๋๋ฉด ๊ฒฝ๊ณ ์ฐฝ์ด ๋ฌ๋ค.
function checkLength(){
var name = document.getElementById("name").value;
//๋ง์ฝ์ ์ด๋ฆ ๊ฐ์ ๊ธธ์ด๊ฐ 6~8 ์ฌ์ด๋ผ๋ฉด
if(name.length >= 6 && name.length <= 8){
//์๋ฒ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๊ณ ,
return true;
}//๊ทธ๋ ์ง ์์ผ๋ฉด
else{
//์ด๋ฆ์ 6~8์ ์ฌ์ด๋ก ์
๋ ฅํด์ฃผ์ธ์ ๋ผ๋ ์๋ฆผ์ฐฝ์ ๋์๋ผ.
alert("์ด๋ฆ์ 6~8์ ์ฌ์ด๋ก ์
๋ ฅํด์ฃผ์ธ์");
//์ด๋ฆ์ ์ปค์๋ฅผ ์ฃผ๊ณ
name.focus();
//์๋ฒ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด์ง ๋ง๋ผ.
return false;
}
}
</script>
</head>
<body>
<form>
์ด๋ฆ: <input type = "text" id = "name">
<input type = "button" value = "ํ์ธ" onclick="checkLength()">
</form>
</body>
๊ฒฐ๊ณผ)
7.5 ์ ๊ท์ (regular expression)
์ ๊ท์์ด๋ ํน์ ํ ๊ท์น์ ๊ฐ์ง๊ณ ์๋ ๋ฌธ์์ด์ ํํํ๋ ์์์ด๋ค. ๋ง์ ํ
์คํธ ์๋ํฐ์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ๋ฌธ์์ด์ ๊ฒ์๊ณผ ์นํ์ ์ํด ์ฌ์ฉ๋๊ณ ์๋ค.
^ [0 - 9] + a b c $
^: ๋ฌธ์์ด์ ์์
[0 - 9]: 0๋ถํฐ 9๊น์ง์ ๋ฌธ์ ์ค์ ํ๋
+: ํ ๋ฒ ์ด์์ ๋ฐ๋ณต
a b c: ๋ฌธ์์ด "abc"
$: ๋ฌธ์์ด์ ๋
์ | ๊ธฐ๋ฅ | ์ค๋ช |
^ | ์์ | ๋ฌธ์์ด์ ์์์ ํ์ํ๋ค. |
$ | ๋ | ๋ฌธ์์ด์ ๋์ ํ์ํ๋ค. /\d\d$/ : ๋์ 2์๋ฆฌ ์ซ์๊ฐ ์๋ ๋ฌธ์์ด ex) "car01", "product82" |
. | ๋ฌธ์ | ํ ๊ฐ์ ๋ฌธ์์ ์ผ์นํ๋ค. /./ : ํ ์๋ฆฌ์ ๋ฌธ์ ex) "A", "1", "$" |
\d | ์ซ์ Find a digit |
ํ ๊ฐ์ ์ซ์์ ์ผ์นํ๋ค. /\d\d\d/ : 3์๋ฆฌ์ ์ซ์ ex) "001", "123" /^\d/ : ๋ฌธ์์ด์ ์์์ด ํ ์๋ฆฌ์ ์ซ์ ex) "123" "2nd" |
\w | ๋ฌธ์์ ์ซ์ Find a word character |
ํ ๊ฐ์ ๋ฌธ์๋ ์ซ์์ ์ผ์นํ๋ค. /\w/: ํ์๋ฆฌ ๋ฌธ์๋ ์ซ์ ex) "8", "A" |
\s | ๊ณต๋ฐฑ ๋ฌธ์ Find a whitespace character |
๊ณต๋ฐฑ, ํญ, ์ค ๋ฐ๊ฟ, ์บ๋ฆฌ์ง ๋ฆฌํด ๋ฌธ์์ ์ผ์นํ๋ค. |
[] | ๋ฌธ์ ์ข ๋ฅ, ๋ฌธ์ ๋ฒ์ | [abc]๋ a ๋๋ b ๋๋ c๋ฅผ ๋ํ๋ธ๋ค. [a-z]๋ a๋ถํฐ z๊น์ง ์ค์ ํ๋์ด๋ค. /[a-z]/: a๋ถํฐ z์ฌ์ด์ ํ ๊ธ์์ ์ผ์น [1-9]๋ 1๋ถํฐ 9๊น์ง ์ค์ ํ๋๋ฅผ ๋ํ๋ธ๋ค. ^[1-9][0-9]*$: ์ฒ์ ์ซ์๊ฐ 0์ด ์๋๊ณ ์ ์ฒด๊ฐ ์ซ์(ex. ๊ฐ๊ฒฉ) |
- /abc/ : ์ ํํ "abc"์๋ง ์ผ์นํ๋ค.
์ ๊ท ํํ์์๋ ๋ฉํ ๋ฌธ์ ๋ค์ ์๋ ํ์ ์(quantifier)๋ฅผ ๋ถ์ผ ์ ์๋ค.
์๋ ํ์ ์๋ ๋ฌธ์๊ฐ ๋ช ๋ฒ ๋ฐ๋ณต๋๋๋๋ฅผ ๋ํ๋ธ๋ค.
์๋ ํ์ ์ | ๊ธฐ๋ฅ | ์ค๋ช |
* | 0ํ ์ด์ ๋ฐ๋ณต Matches any string that contains zero or more occurrences of n |
"a*": "", "a", "aa", "aaa"๋ฅผ ๋ํ๋ธ๋ค /\w*/: ์ด๋ค ๋ฌธ์๋ ์ซ์๋ก ์ด๋ฃจ์ด์ง ๋ฌธ์์ด ^[1-9][0-9]*$: ์ฒ์ ์ซ์๊ฐ 0์ด ์๋๊ณ ์ ์ฒด๊ฐ ์ซ์(ex. ๊ฐ๊ฒฉ) |
+ | 1ํ ์ด์ ๋ฐ๋ณต Matches any string that contains at least one n |
"a+": "a", "aa", "aaa"๋ฅผ ๋ํ๋ธ๋ค. /.+/: ์ด๋ค ๋ฌธ์๊ฐ 1ํ ์ด์ ๋ฐ๋ณต |
? | 0ํ ๋๋ 1ํ Matches any string that contains zero or one occurrences of n |
"a?": "", "a"๋ฅผ ๋ํ๋ธ๋ค. /(Good)?Bye/: "GoodBye" ๋๋ "Bye" |
{m} | mํ ๋ฐ๋ณต | "a{3}": "aaa" /^\d{6}-\d{7}$/: ์ค๊ฐ์ -์ด ์๋ ์ฃผ๋ฏผ๋ฑ๋ก๋ฒํธ /^\d{10}$/: ๊ณ์ข๋ฒํธ(10์๋ฆฌ์ ์ซ์๋ก ๊ฐ์ ) ๊ฒ์ฆ, ์ซ์ 10๊ฐ๋ง์ผ๋ก ๊ตฌ์ฑ๋ ๋ฌธ์์ด |
{m, n} | mํ ์ด์ nํ ์ดํ ๋ฐ๋ณต | "a{1,3}": "a", "aa", "aaa"๋ฅผ ๋ํ๋ธ๋ค. |
(ab) | ๊ทธ๋ฃนํ | (ab)*: "", "ab", "abab" |
2013/06/01 ๋ ์ง ํ๊ธฐ๋ฒ ๊ฒ์ฆ: /^\d{4}\d{2}\d{2}/
2013/6/1 ๋ ์ง ํ๊ธฐ๋ฒ ๊ฒ์ฆ: /^\d{4}\d{1,2}\d{1,2}/
์์)
<script>
function checkNumeric(){
//์ ๊ท์
var exp = /^[0-9]+$/;
var phone = document.getElementById("phone");
//๋ง์ฝ์ ์ฌ์ฉ์๊ฐ ์
๋ ฅํ ํฐ๋ฒํธ(phone)์ ๊ฐ(value)์ด ์ ๊ท์๊ณผ ์ผ์นํ๋ฉด (match)
if (phone.value.match(exp)){
// ๊ทธ๋๋ก ๋ฐ์ดํฐ ์ ์ก
return true;
}else{
alert("์ซ์๋ง ์
๋ ฅํ์ธ์.");
phone.focus();
return false;
}
}
</script>
</head>
<body>
<form>
์ ํ๋ฒํธ(-์์ด ์
๋ ฅ): <input type = "text" id = "phone">
<input type = "button" onclick ="checkNumeric()" value = "ํ์ธ">
</form>
</body>
๊ฒฐ๊ณผ)
//๋ชจ๋ ๊ณต๋ฐฑ ์ฒดํฌ ์ ๊ท์
var empJ = /\s/g;
//์์ด๋ ์ ๊ท์
var idJ = /^[a-z0-9]{4,12}$/;
// ๋น๋ฐ๋ฒํธ ์ ๊ท์
var pwJ = /^[A-Za-z0-9]{4,12}$/;
// ์ด๋ฆ ์ ๊ท์
var nameJ = /^[๊ฐ-ํฃ]{2,6}$/;
// ์ด๋ฉ์ผ ๊ฒ์ฌ ์ ๊ท์
var mailJ = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
// ํด๋ํฐ ๋ฒํธ ์ ๊ท์
var phoneJ = /^01([0|1|6|7|8|9]?)?([0-9]{3,4})?([0-9]{4})$/;
์ฐธ๊ณ : https://sseong66.tistory.com/12
7.6 ์ซ์๋ ๋ฌธ์ ์ ๋ ฅ ๊ฒ์ฆ p. 413
์ฌ์ฉ์๊ฐ ์ ์ฉ์นด๋ ๋ฒํธ, ์ ํ๋ฒํธ, ์ฐํธ๋ฒํธ์ ๊ฐ์ ์ ๋ณด๋ฅผ ์
๋ ฅํ๋ฉด ์น ํ์ด์ง๋ ์ด๋ค์ด ๋ชจ๋ ์ซ์๋ก ๋์ด ์๋ค๋ ๊ฒ์ ๊ฒ์ฆํด์ผ ํ๋ค.
์ ๊ท์ /^[0-9]+$/๋ ๋ฌธ์์ด์ด ๋ชจ๋ ์ซ์๊ฐ ๋์ด ์์ด์ผ ์ผ์นํ๋ค.
^: ์์: ๋ฌธ์์ด์ ์์
[0-9]: ๋ฌธ์ ์ข
๋ฅ, ๋ฌธ์ ๋ฒ์: 0๋ถํฐ 9๊น์ง์ ์ค์ ํ๋๋ฅผ ๋ํ๋ธ๋ค.
+: 1ํ ์ด์ ๋ฐ๋ณต
$: ๋: ๋ฌธ์์ด์ ๋
๋ฌธ์๋ก๋ง ๋ ์
๋ ฅ์ ๊ฒ์ฌํ๋ค.
/^[a-zA-Z]+$/
๋ฌธ์์ ์ซ์๋ก๋ง ๋ ์
๋ ฅ์ ๊ฒ์ฌํ๋ค.
/^[0-9a-zA-Z]+$/
์์) ์ ํ๋ฒํธ ์นธ์ ์ซ์๋ฅผ ์ ๋ ฅํ์ง ์์์ ๊ฒฝ์ฐ ํ์ ์ฐฝ์ด ๋ฌ๋ค.
<script>
function checkNumeric(elem,msg){
var exp = /^[0-9]+$/;
//match: ๋ฌธ์์ด ์์์ ์ผ์นํ๋ ์ฝํ
์ธ ๋ฅผ ํ์ํ๋ค.
if (elem.value.match(exp)){
return true;
} else{
alert(msg);
//ํค๋ณด๋ ํฌ์ปค์ค(์ปค์)๋ฅผ ์ด๋์ํจ๋ค.
elem.focus();
return false;
}
}
</script>
</head>
<body>
<form>
์ ํ๋ฒํธ (-์์ด ์
๋ ฅ) : <input type = "text" id="phone">
<input type="button"
onclick="checkNumeric(document.getElementById('phone'), '์ซ์๋ง ์
๋ ฅํ์ธ์!')"
value='ํ์ธ'>
</form>
</body>
๊ฒฐ๊ณผ)
7.7 ์ด๋ฉ์ผ ๊ฒ์ฆ p. 414
์ํ๋ฒณ(์๋ฌธ์ ๋ฐ ๋๋ฌธ์ ๋ชจ๋) ๋๋ ์ซ์ ์ฌ์ด์ ์ ํจํ ๋ฌธ์๋ฅผ ์์์ ์กฐํฉ์ผ๋ก ๊ฐ์ง๋ ์ผ๋ จ์ ๋ฌธ์๋ฅผ ํํํ๋ค.
^([A-Za-z]|[0-9])+$
์ด๋ฉ์ผ ์ฃผ์์์ ๋ช ๊ฐ์ง๋ง ์ฒดํฌํ๋ค.
- @gmail.com : @ ์์ ๋ฌธ์๊ฐ ์ ํ ์๋ค.
var exp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,}$/;
- ho!ng@gmail.com: ํ์ฉ๋์ง ์๋ ๋ฌธ์ !๊ฐ ํฌํจ๋์ด ์๋ค.
var exp = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
- hong@g_mail.com: ๋๋ฉ์ธ ์ด๋ฆ์๋ _๊ฐ ํ์ฉ๋์ง ์๋๋ค.
var exp = /^([a-zA-Z0-9_.\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,})+$/;
7.8 ์ ํ ๊ฒ์ฆ p. 414
์ฒซ๋ฒ์งธ ์ต์ ์ ๋์๋ง "์ ํํ์ธ์"๋ผ๊ณ ๋๋ค. ๋ง์ฝ ์ฌ์ฉ์๊ฐ ์ ํ์ ํ์ง ์์๋ค๋ฉด ์ด ๋ฌธ๊ตฌ๊ฐ ๋ฐํ๋ ๊ฒ์ด๋ค.
์์)
<script>
function checkSelection(){
var fruit = document.getElementById("fruits");
if(fruit.value == 0){
alert("๊ณผ์ผ ํ๋๋ฅผ ์ ํํ์ฌ์ผ ํฉ๋๋ค.");
fruit.focus();
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form>
๊ณผ์ผ ์ ํ
<select id = "fruits">
<option value="0">์ ํํ์ธ์.</option>
<option value="1">์ฌ๊ณผ</option>
<option value="2">๋ฐฐ</option>
<option value="3">๋ฐ๋๋</option>
</select>
<input type="button" value="ํ์ธ" onclick="checkSelection()">
</form>
</body>
๊ฒฐ๊ณผ)
๋ด๊ฐ ์ด ์ฝ๋) ํ์๊ฐ์
ํผ
<style>
body{text-align:center;}
</style>
<script type="text/javascript">
//์ ํจ์ฑ ๊ฒ์ฌ ์์ค๋ฅผ ๋ถ์ํด์ ์์ฑํด๋ณด์ธ์! :)
function validchk(){//starts
// ํผ ๊ฐ์ ธ์ค๊ธฐ
// (1) ์ด๋ฆ(ํ๊ธ๋ก ์์, ์ต์ 2๊ธ์ ์ต๋ 6๊ธ์)
var name = document.getElementById("name");
var nameJ = /^[๊ฐ-ํฃ]{2,6}$/;
// (2) ์ฐ๋ฝ์ฒ
var phone = document.getElementById("phone");
//0์์ 9๊น์ง: 3~4๊ธ์, 0์์ 9๊น์ง: 4๊ธ์
var phoneJ = /^01([0|1|6|7|8|9]?)?([0-9]{3,4})?([0-9]{4})$/;
// (3) ์ด๋ฉ์ผ
var email = document.getElementById("email");
var mailJ = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
// (4) ๋น๋ฐ๋ฒํธ(ํน์๋ฌธ์ / ๋ฌธ์ / ์ซ์ ํฌํจ ํํ์ 8~15์๋ฆฌ ์ด๋ด์ ์ํธ ์ ๊ท์)
var password = document.getElementById("password");
var passJ = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;
// (4.1) ๋น๋ฐ๋ฒํธ ์ฌํ์ธ
var pwVerified = document.getElementById("pwVerified");
// (1) ์ด๋ฆ ์ ํจ์ฑ ๊ฒ์ฆ
//if(nameJ.test(name.value))๋ก ํด๋ ๊ฐ๋ค.
if(name.value.match(nameJ)){
document.getElementById("msgName").innerHTML = "์ด๋ฆ ์ ํจ์ฑ ๊ฒ์ฆ ์๋ฃ์
๋๋ค.";
document.getElementById("msgName").style.color ="green";
} else {
document.getElementById("msgName").innerHTML = "์ด๋ฆ์ ๋ค์ ์
๋ ฅํ์ธ์.";
document.getElementById("msgName").style.color = "red";
name.focus();
return false;
}
// (2) ์ฐ๋ฝ์ฒ ์ ํจ์ฑ ๊ฒ์ฆ
if(phone.value.match(phoneJ)){
document.getElementById("msgPhone").innerHTML = "์ฐ๋ฝ์ฒ ์ ํจ์ฑ ๊ฒ์ฆ ์๋ฃ์
๋๋ค.";
document.getElementById("msgPhone").style.color ="green";
} else {
document.getElementById("msgPhone").innerHTML = "์ฐ๋ฝ์ฒ๋ฅผ ๋ค์ ์
๋ ฅํ์ธ์.";
document.getElementById("msgPhone").style.color = "red";
phone.focus();
return false;
}
// (3) ์ด๋ฉ์ผ ์ ํจ์ฑ ๊ฒ์ฆ
if(email.value.match(mailJ)){
document.getElementById("msgEmail").innerHTML = "์ด๋ฉ์ผ ์ ํจ์ฑ ๊ฒ์ฆ ์๋ฃ์
๋๋ค.";
document.getElementById("msgEmail").style.color ="green";
} else {
document.getElementById("msgEmail").innerHTML = "์ด๋ฉ์ผ์ ๋ค์ ์
๋ ฅํ์ธ์.";
document.getElementById("msgEmail").style.color = "red";
email.focus();
return false;
}
// (4) ๋น๋ฐ๋ฒํธ ์ ํจ์ฑ ๊ฒ์ฆ
if(password.value.match(passJ)){
document.getElementById("msgPassword").innerHTML = "๋น๋ฐ๋ฒํธ ์ ํจ์ฑ ๊ฒ์ฆ ์๋ฃ์
๋๋ค.";
document.getElementById("msgPassword").style.color ="green";
} else {
document.getElementById("msgPassword").innerHTML = "๋น๋ฐ๋ฒํธ๋ฅผ ๋ค์ ์
๋ ฅํ์ธ์.";
document.getElementById("msgPassword").style.color = "red";
password.focus();
return false;
}
// (4.1) ๋น๋ฐ๋ฒํธ ์ฌํ์ธ (๋ฌธ์์ด์ด ์ผ์นํ๋์ง)
if (password.value == pwVerified.value){
document.getElementById("msgPwVerified").innerHTML = "๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํฉ๋๋ค.";
document.getElementById("msgPwVerified").style.color ="green";
} else {
document.getElementById("msgPwVerified").innerHTML = "๋น๋ฐ๋ฒํธ๋ฅผ ๋ค์ ์
๋ ฅํ์ธ์.";
document.getElementById("msgPwVerified").style.color = "red";
pwVerified.focus();
return false;
}
}
</script>
</head>
<body>
<h2>ํ์ ์ ์ฒญ์</h2>
<form>
์ด๋ฆ: <input type="text" id="name" onblur="validchk()" name="name"><br>
<!-- <label>๋ก๋ ์ฌ์ฉ ๊ฐ๋ฅํ๋ค. -->
<!-- style="color:red" ๋์ style.color๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ก ํด๋ ๋๋ค. -->
<span id="msgName"><br></span><br>
์ฑ๋ณ: <input type="radio" name="gender" value="m">๋จ์ฑ <input type="radio" name="gender" value="f">์ฌ์ฑ<br><br>
ํด๋ํฐ ๋ฒํธ: <input type="text" id="phone" name="phone"><br>
<span id="msgPhone"><br></span><br>
์ด๋ฉ์ผ: <input type="text" id="email" name="email"><br>
<span id="msgEmail"><br></span><br>
ํจ์ค์๋(6-8 ๊ธ์): <input type="password" id="password" name="password"><br>
<span id="msgPassword"><br></span><br>
ํจ์ค์๋ ๊ฒ์ฆ: <input type="password" id="pwVerified" onblur="validchk()" name="pwVerified"><br>
<span id="msgPwVerified"><br></span><br>
<input type="button" value="์ ์ถ" onclick="validchk('name','gender','phone','email','password','pwVerified')">
<input type="reset" value="์ง์ฐ๊ธฐ">
</form>
</body>
๊ฒฐ๊ณผ)
๊ธฐํ
ํ์ ๊ฐ์
ํ ๋ ๋ฉ์์ง ๋ฐ์ ๋จ๊ฒ ํ๊ธฐ
https://velog.io/@party3205/JavaScript-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EA%B0%9D%EC%B2%B4
์ ํจ์ฑ ๊ฒ์ฌ HTML
https://dw3232.tistory.com/9
์๋ฐ์คํฌ๋ฆฝํธ ์ ๊ทํํ์ ๋ชจ์
https://velog.io/@qjspdl/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D-%EB%AA%A8%EC%9D%8C