<td>
<a class="btn btn-xs btn-danger" onclick="lectureDelete(${lecture.lectureNo });">DELETE</a>
</td>

DELETE 키 누를 때 화면에 여부 확인후 값 값진행하기....

자바스크립트로 여부 문의하는 함수이다.

 

function lectureDelete(lectureNo){
var check=confirm("정말 삭제하겠습나까?");
if(check){
location.href="/lecture/delete.do?lectureNo="+lectureNo;
}
return false;
}

 

CHECK값이 TURE이면 LOCATION에 따라 간다.. 

<h2>노드.....Collection과 비슷한.....</h2>
<!--   인덱스 번호로 엑세스 할수 있다.-->
<p id="demo10"></p>

<script>
const myNodelist = document.querySelectorAll("p");  //  getElementByTagName 같게 적용하여 인덱스값이 필요함

document.getElementById("demo10").innerHTML =
"2번째 p요소의 내부 html은 다음과 같다.: " + myNodelist[1].innerHTML;  //2번째  태그의 값을 가져옴..

</script>

------------------
<button onclick="myFunction2()">Try it</button>
<script>
    function myFunction2() {
      const myNodelist = document.querySelectorAll("p");
      for (let i = 0; i < myNodelist.length; i++) {
        myNodelist[i].style.color = "red";
      }
      myNodelist[1].style.color = "blue"; //2번째태그의 글자를 파란색으로 변경시킨다.
    }
    </script>

'JAVASCRIPT > 함수들' 카테고리의 다른 글

addEnevtListener()메서드  (0) 2022.08.28
이벤트 처리: 마우스 지나가거나 클릭등  (0) 2022.08.28
document 들....  (0) 2022.08.28
정규표현식  (0) 2022.08.25
이벤트 중단방법  (0) 2022.08.25
이예제에서는 addEnevtListener()메서드를 사용하여 사용자가 단추를 클릭할때 함수를 실행
</h2>
    <button id="myBtn">Try it</button>
    <script>
        document.getElementById("myBtn").addEventListener("click", myFunction);

        function myFunction() {
        alert ("Hello World!");
        }
    </script>

    <h3>많은 이벤트 추가</h3>  
    <button id="myBtn2">Try it</button>
    <p id="demo6"></p>

    <script>
        var z = document.getElementById("myBtn2");
        z.addEventListener("mouseover", myFunction);
        z.addEventListener("click", mySecondFunction);
        z.addEventListener("mouseout", myThirdFunction);

        function myFunction() {
            document.getElementById("demo6").innerHTML += "Moused over!<br>";
        }
        function mySecondFunction() {
             document.getElementById("demo6").innerHTML += "Clicked!<br>";
        }
        function myThirdFunction() {
            document.getElementById("demo6").innerHTML += "Moused out!<br>";
        }
    </script>

-------------------------------------


    <p>화면과 관련 예제</p>
   
    <p>랜덤수를 찾아 화면으로 보여줌.</p>
   
    <p id="demo7"></p>
   
    <script>
    window.addEventListener("resize", function(){  //resize 화면이 변경될때.
      document.getElementById("demo7").innerHTML = Math.random();
    });
    </script>

 

'JAVASCRIPT > 함수들' 카테고리의 다른 글

querySelectorAll  (0) 2022.08.28
이벤트 처리: 마우스 지나가거나 클릭등  (0) 2022.08.28
document 들....  (0) 2022.08.28
정규표현식  (0) 2022.08.25
이벤트 중단방법  (0) 2022.08.25
<h2>이벤트 처리기</h2>
<!--
    html 이벤트의 예:
    사용자가 마우스를 클릭할 때
웹 페이지가 로드된 경우
이미지가 로드된 경우
마우스가 요소 위로 이동할 때
입력 필드가 변경되는 경우
HTML 양식을 제출하는 경우
사용자가 키를 칠 때
-->
<!--<h1 onclick="this.innerHTML='Ooops!'">글자 클릭하세요</h1>-->
<h2 onclick="changeText(this)"> 글자를 클릭하세요.</h2>
<script>
    function changeText(id){
        id.innerHTML="Ooops!";
    }
</script>  // 클릭하면 Ooops! 으로 변경

<button onclick="displayDate()" >날짜 시간 표시</button>
<script>
    function displayDate(){
        document.getElementById("demo4").innerHTML=Date();
    }
</script>
<p id="demo4"></p>  //이안에 지금의 날짜와 시간이 표시된다.
<hr>
<!-- 온, 언 로드는 페이지 들어가거나 나갈때 트리거 됨-->
<p id="demo5"></p>
<script>
    function checkCookies(){
        var text="";
        if(navigator.cookieEnabled==true){ 
/navigator.cookieEnabled쿠키가 활성화되었는지 여부를 나타내는 부울 값을 반환
            text="cookies are enabled.";            
        }else{
            text="Cookies are not enabled.";
        }
        document.getElementById("demo5").innerHTML=text;
        document.getElementById("demo5").style.background = "green";
    }
</script>
<!--마우스 지나갈때ㅣ....-->
    <div onmouseover="mOver(this)" onmouseout="mOut(this)"
    style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
    Mouse Over Me</div>

    <script>
    function mOver(obj) {
    obj.innerHTML = "Thank You"  //지나가면 표시되는 문구
    }

    function mOut(obj) {
    obj.innerHTML = "Mouse Over Me" //평소에 표시되는 문구
    }
    </script> 

<hr>
        <!--마우스 클릭-->
    <div onmousedown="mDown(this)" onmouseup="mUp(this)"
    style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
    Click Me</div>

    <script>  //클릭되면 글씨가 변경됨
        function mDown(obj) {
          obj.style.backgroundColor = "#1ec5e5";
          obj.innerHTML = "Release Me";
        }
       
        function mUp(obj) {
          obj.style.backgroundColor="#D94A38";
          obj.innerHTML="Thank You";
        }
        </script>

<h2>

 

'JAVASCRIPT > 함수들' 카테고리의 다른 글

querySelectorAll  (0) 2022.08.28
addEnevtListener()메서드  (0) 2022.08.28
document 들....  (0) 2022.08.28
정규표현식  (0) 2022.08.25
이벤트 중단방법  (0) 2022.08.25
<h2>애니메이션 컨테이너 만들기</h2>
  <p><button onclick="myMove()">나를 클릭하세요.</button></p>
  <div id="container">
    <div id="animate">b</div>
 </div>
 <style>
    #container{
        width: 400px;
        height: 400px;
        position: relative;          
        background: yellow;
    }
    #animate{
        width:50px;
        height: 50px;
        position: absolute;
        background: red;
    }
</style>

    <script>
        function myMove(){
            let id=null;
            const elem=document.getElementById("animate");
            let pos = 0;
            clearInterval(id);
            id = setInterval(frame,5);
            function frame(){
                if(pos==350){
                    clearInterval(id);
                }else{
                    pos++;
                    elem.style.top=pos+"px";
                    elem.style.left=pos+"px";
                }
            }
        }
       
    </script>

'JAVASCRIPT > 예제들' 카테고리의 다른 글

input 빈칸시 경고창띄우기  (0) 2022.08.28
select 의 옵션 value 선택하여 img 속성넣기 문제  (0) 2022.08.27
정규표현식 2  (0) 2022.08.25
정규 표현식 예제1  (0) 2022.08.25
대소문자 변경예제  (0) 2022.08.25
<h2>JavaScript Validation :  요소 검사하여 경고창 띄우기</h2>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>
<script>
function validateForm() {
    let x = document.forms["myForm"]["fname"].value;
    if (x == "") {
      alert("Name must be filled out");
      return false;
    }
  }
  </script>
 

빈칸인채로 Submit을 누르면 경고창이 나온다...

회원가입등에 주요 기능중 하나

'JAVASCRIPT > 예제들' 카테고리의 다른 글

애니메니션 : div가 div안에서 이동  (0) 2022.08.28
select 의 옵션 value 선택하여 img 속성넣기 문제  (0) 2022.08.27
정규표현식 2  (0) 2022.08.25
정규 표현식 예제1  (0) 2022.08.25
대소문자 변경예제  (0) 2022.08.25
    <!--
        찾기
        document.getElementById(id)
                .getElementByTagName(name)
                .getElementsByClassName(name)
 
 

 

div 박스의 값을 id로 지정하고 그안의 p태그로 다시 값 조회할때 주의점...id가 아니 다른것은 유일한 것이 아니라서 여러개의 값을 주고 단 하나의 태그라고 하더라도 배열처럼 인덱스를 주어야만 원하는 값을 받는다.

----------------------------------------------------------------------------               .

        변경
        element.innerHTML   //태그안의 값을 반영해줌.
               .attribute=new value
               .style.property=new stlye
       요수 추가 및 삭제
        document.createElement(element) //개체생성
                .remeveChild(element)  //자식개체삭제하기
                .appendChild(element)   //자식개체 추가하기
                .replaceChild(new, old)  //old자식개체를 new개체로 변경
                .write(test)

    <div>

        <span id="childSpan"> foo바</span>
    </div>
    <script>
        //빈요소노드 생성,,,ID, 속성 콘텐츠 없다.
        const sp1=document.createElement("span");
        console.log(sp1); //span
        //'newspan이라는 id속성을 부여
        sp1.id="newSpan";
        console.log(sp1.getAttribute("id"));  // newSpan
        //일부 콘텐츠를 만듬
        const sp1_content=document.createTextNode("new replace");
        //새요소에 적용
        sp1.appendChild(sp1_content);
        console.log(sp1);  //<span id="newSpan">new replace</span>
        //교체할 기존 노드엔 대한 참조 작성
        const sp2=document.getElementById("childSpan");
        console.log(sp2); //<span id="childSpan"> foo바</span>
        const parentDiv=sp2.parentNode;  //부모 요소 지정
        console.log(parentDiv); //부모  div가 나옴...
        //기존 노드 sp2르,ㄹ 새 스펜요소 sp1로 교체
        parentDiv.replaceChild(sp1,sp2);

    </script>
 
foo바 가  new replace로 변경까지.

 

 

--------------------------------------------------

      속성
                .hasAttribute(name) //속성의 존재확인
                .getAttribute(name)  //속성값을 가져옴
                .setAttribute(attribute, value) ///속성값을 변경함.
                .removeAttribute(name)- //속성값을 제거함.
 

속성값을 2가지로 변경할수 있다.

1. setAttribute('속성명', '변경값')....

2. input. id='newId';  alert(input.getAttribute('id')); //newId 로 갱신된다.

그러나 value처럼 동기화 속성에서는 안먹힘으로 1번째 방법으로 하길 바람.

 

 

'JAVASCRIPT > 함수들' 카테고리의 다른 글

querySelectorAll  (0) 2022.08.28
addEnevtListener()메서드  (0) 2022.08.28
이벤트 처리: 마우스 지나가거나 클릭등  (0) 2022.08.28
정규표현식  (0) 2022.08.25
이벤트 중단방법  (0) 2022.08.25

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function changeImage(){
var sel = document.getElementById("sel");
var img = document.getElementById("myImg");
}
</script>
</head>
<body>
<select id="sel" onchange="changeImage()">
<option value="images/Lemon.png">레몬</option>
<option value="images/Lime.png">라임</option>
<option value="images/Strawberry.png">딸기</option>
</select>
<img id="myImg">
</body>
</html>
<!-- * select 박스를 이용해 선택한 과일의 이미지가 화면에 나타나도록 하고자 코드를 작성하였다.
    이미지가 화면에 나타나도록 하나의 과일을 선택했지만 선택한 과일의 이미지가 나타나지 않았다.
    화면에 이미지가 나타지 않은 원인과 조치내용을 작성하시오.
-->
이미지파일을 넣기위해 문구수정을 하였음....

---------------------------------------

</style>
<script>
function changeImage(){    
var sel = document.getElementById("sel");  //select선택
var str='';// 옵션값 받을 변수
var img = document.getElementById("myImg");  //이미지 속성추가할 변수
console.log(sel.length);
for (let i=0;i<sel.length;i++){
    if(sel[i].selected) {  // 옵션선택시는 checked와 같은것인 select인데...해깔린다....
        str=sel[i].value;
        console.log(sel[i].value);  //확인
        img.setAttribute("src",sel[i].value);
        // img.setAttribute("src",str);  //속성추가는 set/ 확인은 get 다같은데......제대로 모르면 해깔림
        console.log(img.getAttribute("src"));  //잘들어갔틑지 확인
    }
   
}

}
</script>
</head>
<body>
<select id="sel" onchange="changeImage()">
<option value="/img/만두그라탕.jpg">레몬</option>
<option value="/img/오감자.jpg">라임</option>
<option value="/img/치치면.jpg">딸기</option>
</select>
<img id="myImg" >

</body>

'JAVASCRIPT > 예제들' 카테고리의 다른 글

애니메니션 : div가 div안에서 이동  (0) 2022.08.28
input 빈칸시 경고창띄우기  (0) 2022.08.28
정규표현식 2  (0) 2022.08.25
정규 표현식 예제1  (0) 2022.08.25
대소문자 변경예제  (0) 2022.08.25

+ Recent posts

티스토리툴바