728x90

자바스크립트 for in문 간단 연습

 

    <h4>for in문</h4>
    <button onclick="forInTest();">for in문</button>
    <!-- 자바 foreach랑 비슷함 -->
    <script>
        function forInTest(){
           var rst = "";
           var arr = ['a','b','c','d'];
            
            for(var i in arr){
                console.log(i)      // 0123
                // rst = arr[i] + " "; // 값 자체는 0~3까지 다 들어감. 마지막 들어간게 3이라 덮어씌워지면서 3의 자료인 d가 출력
                rst += arr[i] + " "; // += 변경해야 추가됨
           }
           alert(rst);
        }
    </script>


    <button onclick="forInTest2();">for in문2</button>
    <!-- 자바 foreach랑 비슷함 -->
    <script>
    function forInTest2(){
        var forin = "";
        var forinArr = ['ㄱ','ㄴ','ㄷ','ㄹ'];

        for(var i in forinArr) {
            console.log(i);
            forin += forinArr[i] + " ";
        }
        alert(forin);
    }
    </script>
728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][jQuery] 연결 방식4가지, 선택자 6가지  (0) 2022.04.16
[1일1코딩][HTML,CSS] 화면 구현하기  (0) 2022.04.15
[1일1코딩][JS] 데이터입출력, HTML태그에 접근하기  (0) 2022.04.13
[1일1코딩][JS] 전역변수&지역변수, 데이터타입,형변환,for in문  (0) 2022.04.12
[1일1코딩][SQL][ORACLE] DML(INSERT, UPDATE, DELETE)  (0) 2022.04.11
728x90

 

document.write()
console.log()

 

innerHTML
window.confirm()
window.prompt()
getElementById()
getElementsByName()
 
 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">

<title>cheer up</title>


<style>
	.area{width: 300px; height: 100px; border: 1px solid blue;}
</style>

</head>
<body>

    <script>
        document.write("혼자출력");
        console.log;    // 노에러 작동x
        console.log(document.write("콘솔출력")); // undefined
        console.log("document.write() : 콘솔 출력"); // 콘솔 출력 : a
        // 값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환
    // JavaScript에는 '없음'를 나타내는 값이 두 개 있는데, 
    // 바로 null와 undefined입니다. 두 값의 의미는 비슷하지만, 
    // 각각이 사용되는 목적과 장소가 다릅니다
    // null은 '객체가 없음'

    // https://helloworldjavascript.net/pages/160-null-undefined.html
    // ? 왜 address null 넣는걸 잘 안하지? 명시적인게 더 낫지않나?
        
    </script>

    <script>
        // alert('알림창띄워보기');
        // window.alert("win 생략가능");
    </script><br>

    
    <button onclick="doCon();">console.log() : 콘솔창 출력</button>
    <script>
        function doCon(){
            console.log("클릭하면 함수 실행")   // 클릭하면 함수 실행
            window.console.log("정석은 window.console.log()")
        }
    </script>
    
    <h4>innerHTML</h4>
    <div id="inner2">innerHTML : 태그 엘리먼트의 값을 읽거나 변경할 때 innerHTML 속성 사용<br>
        누르면 div 내용 사라지고
    </div>
    <p>p태그도 사라지나? 유지되고 div 내용만 사라지고<br>
        in2.innerHTML = " "에 담긴 내용이 출력됨
    </p>
    <button onclick="innerHTML2();">데이터출력 - innerHTML()</button>
    <script>
        function innerHTML2(){
            var in2 = document.getElementById("inner2");
            console.log(in2);
            console.log(typeof in2); // in2타입:object
            // console.log(in2.innerHTML);
            in2.innerHTML = 'innerHTML 동작 성공'; // 즉, innerHTML은 object를 읽어온 것
        }
    </script>

    <h3>데이터 입력</h3>
    <h4>window.confirm : Y/N 질문창. 확인버튼은 true, 취소 버튼은 false 반환 </h4>
    <button onclick="testconfirm();">데이터입력 - window.confirm()</button>
    <script>
        function testconfirm(){
            var cfm = window.confirm('확인과 취소 창');
            console.log(cfm); // 확인은 true받았고 취소는 false받음

            if(cfm){
                console.log("확인 누름"+cfm);
                alert("확인 누름"+cfm);
            }else{
                console.log("취소 누름"+cfm);
                alert("취소 누름"+cfm);
            }
            var cheerUp = window.confirm("힘내고 있니?");
            alert(cheerUp);
        }
    </script>

    <h4>window.prompt</h4>
    <div class="area">div inner2</div>
    <p>
        텍스트 필드와 확인, 취소 버튼이 있는 대화상자  
        입력한 메세지 내용을 리턴받음
    </p>
    <button onclick="testPrompt();">데이터출력 - window.prompt()</button>
    <script>
        function testPrompt(){
            var prom = window.prompt("window.prompt() 창 떴는가?");
            console.log(prom);  // a누르고 a를 반환받아 var prom에 저장
            console.log(typeof prom);  // str
            prom.innerHTML = "메세지 저장완료"; // prom이 str이라 안되는듯

        }
    </script>



    <h2> ▷html태그에 접근하기◁</h2>
    <h3>아이디로 접근 : getElementById()</h3>
    <div id="gebyId1">getElementById()</div>
    <button onclick="testGetelementById();">html태그 접근 - 아이디 - getelementByid() </button>
    <script>
        function testGetelementById(){
            var byId1 = document.getElementById('gebyId1');
            console.log(byId1);
            console.log(typeof(byId1));
            byId1.innerHTML = '변수는 오브젝트'; // div내용이 '변수는 오브젝트'로 변경됨
            // innerHTML, div의 id를 읽어왔기에 그 내용을 변경한 듯?
            // name에서도 이어서 테스트

        }
    </script>

    <h3>name으로 접근</h3>
    <p>
        getElementsByName() : 반환타입 [] Node list
        해당 name 속성값을 가지는 요소를 모두 선택함.
    </p>
    <form>
		<fieldset>
			<legend>취미</1egend>
			<table>
				<tr>
					<td><input type="checkbox" name="hobby" value="game1" id="game2"><label>게임</label></td>
					<td><input type="checkbox" name="hobby" value="music1" id="music2"><label>음악</label></td>
					<td><input type="checkbox" name="hobby" value="movie1" id="movie2"><label>영화</label></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="hobby" value="book1" id="book2"><label>독서</label></td>
					<td><input type="checkbox" name="hobby" value="travel1" id="travel2"><label>여행</label></td>
					<td><input type="checkbox" name="hobby" value="exercise1" id="exercise2"><label>운동</label></td>
				</tr>
			</table>
		</fieldset>
	</form>
    <div id="byname1" class="area">getElementsByName() : 반환타입 [] list</div>
    <button onclick="testByname1();">데이터접근 - name접근 - getElementsByName()</button>
    <script>
        function testByname1(){
            var tbn1 = document.getElementsByName('hobby');
            console.log(tbn1);  // NodeList(6) <- table 6개<td>데이터수 // input#game2는 각 input태그의 id
            console.log(typeof tbn1); // object
    
            var checkName='';
            for (var i = 0; i < tbn1.length; i++){
                checkName = tbn1[i].value + "선택함<br>";
            }
            byname1.innerHTML = checkName;  // 54 // 비추천방법
            document.getElementById('byname1').innerHTML=checkName; // 54
        }
    </script


</body>
</html>
728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][HTML,CSS] 화면 구현하기  (0) 2022.04.15
[1일1코딩][JS] for in문  (0) 2022.04.14
[1일1코딩][JS] 전역변수&지역변수, 데이터타입,형변환,for in문  (0) 2022.04.12
[1일1코딩][SQL][ORACLE] DML(INSERT, UPDATE, DELETE)  (0) 2022.04.11
[1일1코딩][SQL][ORACLE] 권한삭제, 계정삭제  (0) 2022.04.10
728x90
728x90
반응형

'small steps > 운동 - 체력이 국력' 카테고리의 다른 글

22.04.16 운동기록  (0) 2022.04.17
22.04.15 운동기록 & 짐의 이사문제로 목요일 휴무 대체분 운동  (0) 2022.04.16
22.04.08 운동기록 & 목 부상으로 일주일 쉼  (0) 2022.04.08
22.04.02 운동기록  (0) 2022.04.02
22.03.31 운동기록  (0) 2022.04.01
728x90

 

전역변수 지역변수

    지역변수 : 함수 내부에서 'var 변수명;'
    전역변수 : 함수 내부에서 '변수명;'
    전역변수 : 함수 밖에서 '변수명;' 혹은 'var 변수명;'
 

자료형

typeof연산자 : 값의 자료형을 확인하는 연산자
        }
문자열과 숫자의 +연산
문자열과 숫자가 연산하면 str화된다

 

데이터 형변환

Number(), parseInt(), parseFloat()

for in문

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">

<title>02_BasicGrammar_prac</title>

</head>
<body>

    <h2>변수 선언</h2>
    <script>
        // 함수 외부
        str1 = '전역변수';      // var 안붙은건 죄다 전역변수
        var str2 = '전역변수';  // var 붙었는데 함수 밖이면 전역변수

        window.onload = function(){
            // 함수 내부
            var str1 = "지역변수1"; // 함수 내부라 var변수명이라도 지역변수
            var str3 = "지역변수2";

            console.log('str1 :' + str1);       // 지역변수
            console.log('this.str1 :' + this.str1);   // 전역변수 : 함수 내부에서는 전역변수를 this.나 window.을 찍어서 구분해줘야한다
            console.log('window.str1 : '+ window.str1); // // 전역변수 : 함수 내부에서는 전역변수를 this.나 window.을 찍어서 구분해줘야한다
            
            what = '난 뭘까?';  // 전역변수
            showWhat(); 

        }
        function showWhat(){    
            console.log(typeof what);          //                
            console.log(typeof this.what);     // 
            console.log(window.what);   // 
        }

    </script>
        

    <h3>자료형</h3>
    <p>자바스크립트에서는 자료형 별로 변수 타입이 지정되지 않고 리터럴에 의해서 자료형 결정</p>
    <button onclick="typeTest();">자료형 테스트ㄱㄱ</button>     
    <script>
        function typeTest(){
            var name = "강건강";                         // 문자열
            var age = 20;                           // 숫자
            var check = true;                       // 논리값        
            var hobby = ['축구', '야구', '농구'];    // 배열
            var user = {                            // 객체   
                name: '강건강',
                age: 20,
                id: 'user01'              
            };
            var testFunction = function(num1, num2){
                var sum = num1 + num2;
                alert(sum);
            };
                        // 콘솔창에서 '값' 확인
                        console.log(name);
            console.log(age);
            console.log(check);
            console.log(hobby);
            console.log(user);
            console.log(testFunction);


            // 콘솔창에서 '타입' 확인
            console.log(typeof(name));
            console.log(typeof(age));
            console.log(typeof(check));
            console.log(typeof(hobby));
            console.log(typeof(user));
            console.log(typeof(testFunction));    
        }


    </script>



    <h2>데이터 형변환</h2>
    <h3>문자열과 숫자의 +연산</h3>
    <!-- 문자열과 숫자가 연산하면 str화된다 -->
    <p>문자열과 숫자가 연산하면 str화된다</p>
    <button onclick="testPlus();">문자열과 숫자의 +연산</button>
    <script>
        function testPlus(){
            var test1 = 7 + 7;          // 14
            var test2 = 7 + '7';        // 77
            var test3 = '7' + 7;        // 77
            var test4 = '7' + '7';      // 77
            var test5 = 7 + 7 + '7';    // 147
            var test6 = 7 + '7' + 7;    // 777
            var test7 = '7' + 7 + 7;    // 777

            console.log(test1);
            console.log(test2);
            console.log(test3);
            console.log(test4);
            console.log(test5);
            console.log(test6);
            console.log(test7);

            // console.log(test2 + 1);
            // console.log(test3+1);
            console.log(Number(test3)+1);       
            console.log(parseFloat(test3)+2); // 79
            console.log(parseInt(test7)+3); 780

        }
        </script>        

        
    <h4>for in문</h4>
    <button onclick="forInTest();">for in문</button>
    <!-- 자바 foreach랑 비슷함 -->
    <script>
        function forInTest(){
           var rst = "";
           var arr = ['a','b','c','d'];
            
            for(var i in arr){
                console.log(i)      // 0123
                // rst = arr[i] + " "; // 값 자체는 0~3까지 다 들어감. 마지막 들어간게 3이라 덮어씌워지면서 3의 자료인 d가 출력
                rst += arr[i] + " "; // += 변경해야 추가됨
           }
           alert(rst);
        }
    </script>


</body>
</html>
728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][JS] for in문  (0) 2022.04.14
[1일1코딩][JS] 데이터입출력, HTML태그에 접근하기  (0) 2022.04.13
[1일1코딩][SQL][ORACLE] DML(INSERT, UPDATE, DELETE)  (0) 2022.04.11
[1일1코딩][SQL][ORACLE] 권한삭제, 계정삭제  (0) 2022.04.10
[1일1코딩][SQL][ORACLE] 계정 생성 및 권한부여  (0) 2022.04.05
728x90

 

DML (Data Manipulation Language) :  데이터 조작어

INSERT, UPDATE, DELETE

 

1.INSERT 데이터 삽입

INSERT INTO 테이블명(데이터를 삽입할 컬럼명) VALUES(테이블의 컬럼 수에 맞게 값 삽입);
INSERT INTO 테이블명 VALUES(테이블의 컬럼 수에 맞게 값 삽입);
    - 테이블의 모든 컬럼에 값을 넣을 때는 컬럼명 생략가능

    - 컬럼 순서대로 데이터값이 들어가기에 순서명이 정확해야함

INSERT INTO MEM VALUES(1,'김철수',001,01012345678);
INSERT INTO MEM(EMPLPOYEE_ID,EMPLOYEE_NAME,EMPLOYEE_NUMBER,PHONE);

 

원하는 컬럼에 데이터값 넣기

INSERT INTO MEM(EMPLOYEE_ID) VALUES(2);
INSERT INTO MEM(EMPLOYEE_NAME) VALUES('박철수');
INSERT INTO MEM(EMPLOYEE_NUMBER,PHONE) VALUES('002','01012345679');

 

2.UPDATE 데이터 수정

 UPDATE 테이블명 SET 컬럼명 [WHERE]

UPDATE MEM SET EMPLOYEE 
UPDATE MEM SET EMPLOYEE = WHERE EMPLOYEE_ID = '002';

 

3.DELETE 데이터 삭제

DELETE FROM 테이블명 [WHERE] 컬럼명;

DELETE 제약조건 무시
기본적으로는 부모 참조 자식 테이블 있으면 삭제 불가

DELETE로 삭제한거는 롤백으로 복원 가능
TRUNCATE는 롤백으로 복원 불가능

DELETE FROM MEM;
DELETE FROM MEM WHERE EMPLOYEE_ID='001';

 

 

 

 

 

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][JS] 데이터입출력, HTML태그에 접근하기  (0) 2022.04.13
[1일1코딩][JS] 전역변수&지역변수, 데이터타입,형변환,for in문  (0) 2022.04.12
[1일1코딩][SQL][ORACLE] 권한삭제, 계정삭제  (0) 2022.04.10
[1일1코딩][SQL][ORACLE] 계정 생성 및 권한부여  (0) 2022.04.05
[1일1코딩][HTML] <img> <map> <area> <audio> <video> <a href=>  (0) 2022.04.04
728x90

1.CMD 진입

2. sql진입 : sqlplus 명령어 입력 & 엔터

3. 계정로그인

4. 시스템계정 진입 : conn/as sysdba;

5.권한 삭제 : revoke connect,resource from 유저명'; 

6.계정 삭제 : drop user아이디 cascade;   

      - cascade를 빼도 삭제는 되지만 관련된 내용들까지 깨끗이 지우기 위해서는 필수

7.저장 : commit;

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][JS] 전역변수&지역변수, 데이터타입,형변환,for in문  (0) 2022.04.12
[1일1코딩][SQL][ORACLE] DML(INSERT, UPDATE, DELETE)  (0) 2022.04.11
[1일1코딩][SQL][ORACLE] 계정 생성 및 권한부여  (0) 2022.04.05
[1일1코딩][HTML] <img> <map> <area> <audio> <video> <a href=>  (0) 2022.04.04
[1일1코딩][HTML] <table> 관련 : border,caption,figure // 보더 지정 & 미지정 차이  (0) 2022.04.03
728x90


운동 중에 다친게 아닌 직후 집에와서 장시간 줌 미팅 때문에 그때 많이 결리고 뭉쳤던 것 같다
아침에 일어나자마자 머리감는데 아무래도 목에 힘주어 고정시키고 마리를 박박 문질러야하니 이 과정에서 제대로 빠직…
처음 10분은 진짜 1mm도 움직일 수 없고 통증이 계속 되었고 이후에도 목을 거의 움직일 수 없는 정도였으니…

여튼 일단 가볍게 컨디셔닝 체킹과 하체하고 조금씩 해보고 운동 진행함


728x90
반응형

'small steps > 운동 - 체력이 국력' 카테고리의 다른 글

22.04.15 운동기록 & 짐의 이사문제로 목요일 휴무 대체분 운동  (0) 2022.04.16
22.04.12 운동기록  (0) 2022.04.12
22.04.02 운동기록  (0) 2022.04.02
22.03.31 운동기록  (0) 2022.04.01
22.03.29 운동기록  (0) 2022.03.30
728x90

 

1.CMD 진입

2. sql진입 : sqlplus 명령어 입력 & 엔터

3. 계정로그인

4. 시스템계정 진입 : conn/as sysdba;

계정 생성 : create user 유저명 identified by 비번; 

계정 권한부여 : grant resource,connect to 아이디;

저장 : commit;

 

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][SQL][ORACLE] DML(INSERT, UPDATE, DELETE)  (0) 2022.04.11
[1일1코딩][SQL][ORACLE] 권한삭제, 계정삭제  (0) 2022.04.10
[1일1코딩][HTML] <img> <map> <area> <audio> <video> <a href=>  (0) 2022.04.04
[1일1코딩][HTML] <table> 관련 : border,caption,figure // 보더 지정 & 미지정 차이  (0) 2022.04.03
[1일1코딩][HTML] 속성 type=" "  (0) 2022.04.02
728x90

 

이미지 클릭하면 다른 이미지 뜨기

이미지 클릭하면 특정 싸이트 뜨기

이미지나 글씨 클릭하면 이미지나 싸이트, 영상 뜨기(iframe)

 

오디오,비디오 파일

시간,진행도 보여주는 컨트롤바, 반복재생, 자동재생

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0_practice</title>


</head>
<body>

    
    <img src="sample/image/wangja01.PNG" usemap="#imageMap">
    <map name="imageMap">
        <area shape="circle" coords="0, 0, 200, 400" href="https://www.naver.com" target="_blank">
        <area shape="circle" coords="200,0,400,400" href="https://www.google.com" target="_blank">
    </map>

    <hr>
    <audio src="sample/audio/song.mp3" controls> song </audio>
    <audio src="sample/audio/major.mp3"controls autoplay loop> major </audio>

    <video src="sample/video/bear.mp4" controls> 곰1</video>
    <video src="sample/video/bear.mp4" controls loop autoplay preload="metadata"> 곰1 - preload</video>
    <video src="sample/video/bear.mp4" preload="auto" controls> 곰3</video>



    <ul>
        <li><a href="../index_HTML.html"></a>글씨 내용 넣는 곳</li>
    </ul>

    <a href="https://www.w3schools.com" target="_blank">
        <img src="sample/image/wangja02.PNG" width="20%" height="20%">
    </a>

    <a href="sample/image/wangja02.PNG" target="wang">글씨클릭하면 이미지나옴 : iframe 사용</a>
    <iframe width="20%" height="15%" name="wang"></iframe>
    
    <a href="sample/image/city1.png" target="imgout">
        <img src="sample/image/wangja01.PNG" width="30%" height="25%"><br>
    </a>
    <a href="https://www.w3schools.com" target="w3s"> w3<br>
        <img src="sample/image/wangja03.PNG" width="200px" height="175px">
    </a>    


</body>
</html>

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][SQL][ORACLE] 권한삭제, 계정삭제  (0) 2022.04.10
[1일1코딩][SQL][ORACLE] 계정 생성 및 권한부여  (0) 2022.04.05
[1일1코딩][HTML] <table> 관련 : border,caption,figure // 보더 지정 & 미지정 차이  (0) 2022.04.03
[1일1코딩][HTML] 속성 type=" "  (0) 2022.04.02
[1일1코딩][SQL][Oracle] SELECT, FUCTION, GROUP BY, HAVING, JOIN 100제 문제 풀이  (0) 2022.04.01
728x90

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0_practice</title>

</head>
<body>

    <table>
        <caption>caption</caption>  <!-- 테이블 안에 달아도 글씨는 이미지 하단에 뜸 -->
        <figure> figure
            <img src="sample/image/city1.png" alt="city1 picture" 
                width="=400px" height="250px"> <!-- html과 동일 선상의 위치의 폴더 하위에 존재할 경우 / 붙이기x -->
            <figcaption>figcaption1</figcaption>
        </figure>
    </table>
    <figcaption>figcaption2</figcaption>
    <caption>caption</caption>

    <br><hr><br>

    <!-- 보더 지정X -->
    <table> <!-- 보더 지정안하면 테두리가 없어 표처럼 안보임 -->
        <thead> table태그 border 지정X
        <tr>
            <td>1</td>
            <td>12/td>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        </tfoot>
    </table>
    <!-- 보더 지정 -->
    <table border="1" style="border-color: red; border-style: double;"> 
        <thead> table태그 border 지정o
        <tr>
            <td>1</td>
            <td>2</td>  
        </tr>
        </thead>
        <tfoot>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        </tfoot>
    </table>

    
</body>
</html>

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][SQL][ORACLE] 계정 생성 및 권한부여  (0) 2022.04.05
[1일1코딩][HTML] <img> <map> <area> <audio> <video> <a href=>  (0) 2022.04.04
[1일1코딩][HTML] 속성 type=" "  (0) 2022.04.02
[1일1코딩][SQL][Oracle] SELECT, FUCTION, GROUP BY, HAVING, JOIN 100제 문제 풀이  (0) 2022.04.01
[1일1코딩][Java-SQL][JDBC] Statement & prepareStatement 차이  (0) 2022.03.31

+ Recent posts

티스토리툴바