WEB/JavaScript
[JS] day2- 시험
애플쩀
2022. 5. 30. 12:25
1번
js
jq
$("button").click(function(){
//$("input[type=text]")
$("#demo").text($(":text").val());
$(":text").focus()
.val("");
// .select();
});
2번
/* document.querySelector("button")
document.querySelector("button:first-child")
document.querySelector("button:nth-of-type(1)") */
document.querySelector("button:first-of-type").onclick=function(){
this.disabled="disabled";
document.querySelector("button:nth-of-type(2)").disabled="";
}
document.querySelector("button:nth-of-type(2)").onclick=function(){
this.disabled=true;
document.querySelector("button:nth-of-type(1)").disabled=false;
}5번
js
document.querySelector("button").onclick= function(){
// document.getElementsByName("htmlapply")[0].checked;
if(document.getElementsByName("htmlapply")[0].checked){
document.querySelector("#demo").innerHTML=document.querySelector("input[type=text]").value;
}else{
document.querySelector("#demo").innerText=document.querySelector("input[type=text]").value;
}
}jq
6번
마지막 문제 jq
$("button").click(function(event){
/* :radio==[type=radio]
:text==[type=text]
:checkbox==[type=checkbox]
체크된 체크박스만 얻어오기 $(":checkbox:checked") */
//var result="";
$(":checkbox:checked").each(function(i,element){
//result+=element.value+"/";
$("#demo").text(function(index,text){
return text+(text ?",":"")+ $(element).val();
});
});
});
전체
1. 문자열을 입력 후 확인 버튼을 클릭할 때 입력한 문자열을 p 태그에 출력하는 js 코딩을 하세요.
<input type="text">
<br>
<button>확인</button>
<p id="demo"></p>
1)
function check(){
var msg=document.querySelector("input[type=text]").value;
var pdemo=document.getElementById("demo");
pdemo.innerText=msg;
}
2)
document.querySelector("button").onclick=function(){
document.getElementById("demo").innerText=document.querySelector("input[type=text]").value;
}
1-2. 위의 코딩을 jquery로 수정하세요 .
$("button").click(function(){
//$("input[type=text]")
$("#demo").text($(":text").val());
$(":text").focus()
.val("");
// .select(); 텍스트부분이 드래그상태가 된다.
});
</script>
2. Turn on 버튼을 클릭하면 Turn on 버튼은 비활성화시키고, Turn off 버튼은 활성화시키는 js 코딩을 하세요.
<button>Turn on</button>
<button disabled="disabled">Turn off</button>
1)
document.querySelector("button:first-of-type").onclick=function(){
this.disabled=true;
document.querySelector("button:nth-of-type(2)").disabled=false;
}
document.querySelector("button:nth-of-type(2)").onclick=function(){
this.disabled=true;
document.querySelector("button:first-of-type").disabled=false;
}
2)
function turn_on(){
document.querySelector("button:first-of-type").disabled=true;
document.querySelector("button:last-of-type").disabled=false;
}
2-2. 위의 코딩을 jquery로 수정하세요 .
-------
$("button:first-of-type").click(function(){
$(this).prop("disabled",true)
.next().prop("disalbed",false);
});
$("button:last-of-type").click(function(){
$(this).prop("disabled",true)
.prev().prop("disalbed",false);
});
3. p 태그에 마우스를 올리면
ㄱ. 글자색 빨강
ㄴ. 글크기 35px
ㄷ. 테두리 1 solid gray
스타일을 바꾸는 js 코딩을 하세요.
<p id="demo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi incidunt
fugiat voluptas totam nisi iste ab iure beatae veritatis laudantium id
quidem quasi et quis tempora natus cum dicta perferendis.
</p>
1)
document.getElementById("demo").onmouseover=function(){
document.getElementById("demo").style.color="red";
document.getElementById("demo").style.fontSize="35px";
document.getElementById("demo").style.border="1px solid gray";
}
2)
document.getElementById("demo").onmouseover=function(){
this.style.color="red";
this.style.fontSize="35px";
this.style.border="1px solid gray";
}
3-2. 위의 코딩을 jquery로 수정하세요 .
$("#demo").mouseover(function(){
$(this).css({
"color":"red",
"font-size":"35px",
"border":"1px solid gray"
});
});
4. 하나의 버튼으로 Turn on/Turn off 기능을 js로 구현하세요
<button>Turn on</button>
<img alt="" src="../images/pic_bulboff.gif" style="width: 100px;">
function turn_on_off(){
if(!sw){
img.src="../images/pic_bulbon.gif";
btn.innerText="turn off";
}
else{
img.src="../images/pic_bulboff.gif";
btn.innerText="turn on";
}
sw=!sw;
}
4-2. 위의 코딩을 jquery로 수정하세요 .
$("#btn").click(function(){
if(!$("img").attr("src").match("off.gif")){
$("img").prop("src","../images/pic_bulboff.gif");
$("#btn").text("turn on");
}else{
$("img").prop("src","../images/pic_bulbon.gif");
$("#btn").text("turn off");
}
});
5. 확인 버튼을 클릭할때 html 적용시에는 굵은 bold 스타일로 홍길동이 출력되고
html비적용 시에는 <b>홍길동</b>가 출력되는 js 코딩을 하세요.
<fieldset>
<legend>html 적용여부</legend>
<input type="radio" checked="checked" value="apply"><label>적용</label>
<input type="radio" value="not apply"><label>비적용</label>
</fieldset>
<input type="text" value="<b>홍길동</b>">
<br>
<button>확인</button>
<p id="demo"></p>
라디오버튼이 두개가 적용이되어서 name 속성을 똑같이 줘야한다.
5-2. 위의 코딩을 jquery로 수정하세요
.
$("button").click(function(){
if($(":radio:checked").val()=="apply"){
$("#demo").html($(":text").val());
}else{
$("#demo").text($(":text").val());
}
});
6. select 태그에서 과목을 선택해서 라디오버튼의 선택한 과목을 체크하는 js 코딩을 하세요
<select id="subject" name="subject">
<option>선택하세요.</option>
<option value="kor">국어</option>
<option value="eng">영어</option>
<option value="mat">수학</option>
<option value="pe">체육</option>
</select>
<br>
<input type="radio" name="subject" value="kor"><label>국어</label>
<input type="radio" name="subject" value="eng"><label>영어</label>
<input type="radio" name="subject" value="mat"><label>수학</label>
--------------------------------
document.getElementById("subject").onchange=function(){
//선택된 옵션에 value속성을 가져오기
console.log(this.selectedIndex);//선택된 옵션의 인덱스
//option 컬렉션
console.log(this.options[this.selectedIndex].value);
console.log(this.options[this.selectedIndex].text);
var subjectRadios=document.getElementsByName("subject");
//alert(subjectRadios.length);
// subjectRadios[this.selectedIndex-1].checked="checked";
subjectRadios[this.selectedIndex-1].checked=true;
}
</script>
--------------------------------------
6-2. 위의 코딩을 반대로 jquery로 수정하세요 .
$("#subject").change(function(event){
// alert($("#subject").val());
$(":radio[value="+$(this).val()+"]").prop("checked",true);
});
$(":radio[name=subject]").click(function(event){
// $("#subject option:eq(index)").prop("selected",true);
$("#subject").val($(this).val()).prop("selected",true);
});
7. 좋아하는 과목을 여러 개 선택하고 확인 버튼을 클릭하면 좋아하는 과목의 value 속성을 #demo 태그에 출력하는 js 코딩을 하세요.
<input type="checkbox" value="kor" name="subject" id="s_kor" ><label for="s_kor">국어</label>
<input type="checkbox" value="eng" name="subject" id="s_eng" checked="checked"><label for="s_eng">영어</label>
<input type="checkbox" value="mat" name="subject" id="s_mat" ><label for="s_mat">수학</label>
<input type="checkbox" value="pe" name="subject" id="s_pe" ><label for="s_pe">체육</label>
<br>
<button >확인</button>
<p id="demo"></p>
<script>
function check(){
var pdemo=document.getElementById("demo");
var chbox=document.querySelectorAll("[type='checkbox']");
for (let i = 0; i < chbox.length; i++) {
if(chbox[i].checked){
pdemo.innerText+=chbox[i].value+", ";
}
}
}
강사님 코드
<script>
document.querySelector("button").onclick=function(){
var result="";
// var subjects= document.querySelectorAll("input[type=checkbox][name=subject]");
var subjects= document.querySelectorAll("input[name=subject]");
//alert(subjects.length);
for (let i = 0; i< subjects.length; i++) {
if(subjects[i].checked){
result+=subjects[i].value+"/";
}
}//for
document.getElementById("demo").innerText=result;
}
</script>
</script>
한글로 찍고싶다면
result+=subjects[i].nextElementSibling.innerText+"/";
7-2. 위의 코딩을 반대로 jquery로 수정하세요 .
$("button").click(function(event){
var result = "";
$("input[name=subject]").each(function(index, element) {
// console.log=index+":"+element.value+"/"+element.checked;
if(element.checked){
result += element.value+"/";
}
});
$("#demo").text(result);
});
$("button").click(function(event){
/* :radio==[type=radio]
:text==[type=text]
:checkbox==[type=checkbox]
체크된 체크박스만 얻어오기 $(":checkbox:checked") */
//var result="";
$(":checkbox:checked").each(function(i,element){
//result+=element.value+"/";
$("#demo").text(function(index,text){
return text+(text ?",":"")+ $(element).val();
});
});
});