본문 바로가기
코딩/수업 정리

21.01.18 [039] Mon

by 6^6 2021. 1. 18.
728x90

자바스크립트

 

 

자동완성 하는방법 - 이거 안하면 개발하기 힘듦

참고↓

code-nen.tistory.com/8

oss.opensagres.fr/tern.repository/1.2.0/

붙여넣기

계속 next하고 accept하고 finish

블로그에서 하라는대로 하면

이제 ctrl+space로 javascript,jQuery를 불러올 수 있다.

 

프로젝트마다 이렇게 적용시켜줘야한다!

 

 

 

 

 

 

(PT)Javascript와_Node.js_01강_개발환경설정

자바스크립트 탄생배경

서버쪽 x , 웹브라우저쪽에서 동적으로 만들기 위해(음악, 영상 등등) 코드를 쓰는것 = javascript 자바스크립트

웹브라우저를 동적으로 만든것이 혁신적.

<script type="text/javascript">
이 안에 자바스크립트 언어를 넣겠다 라는 뜻
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

    <script type="text/javascript">
        alert("Hello World")
    </script>

</body>
</html>

얘는 WAS가 해석해주는 언어가 아니다. 클라이언트(웹브라우저)가 해석해주는 언어이기 때문에 굳이 ctrl+F11 안해도됨

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

    <script type="text/javascript">
        alert("Hello World");
        console.log("Console:Hello World");
    </script>

</body>
</html>

console.log( ); 함수는 주로 디버깅 목적으로 사용된다.

크롬 F12 콘솔창에서 디버깅 확인으로 쓸 수 있다.

 

 

 

 

 

디버깅모드 와 크롬 F12는 무조건이다.

크롬 F12 디버깅모드 쓰는방법

 

Sources 창에서 해당 코드 왼쪽 번호 클릭. F5누르고 디버깅모드. F10누르면서 확인.

 

 

<script src="js/hello.js" type="text/javascript"></script>
//자바스크립스 .js 파일(외부파일)을 바로 실행시킨다. 는 의미

크롬창열면 Hello Javascript!! 한번뜨고 그다음 Hello World 뜬다.

(PT)Javascript와_Node.js_02강_입출력 및 기본문법

prompt(입력), comfirm(확인), alert(출력)

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script  type="text/javascript"></script>
</head>
<body>

    <script type="text/javascript">
        alert("Hello World");//출력

        var inputPro = prompt("출력창입니다.", "문장을 입력하세요.");//입력
        alert(inputPro);

        var inputCon = confirm("진행하겠습니다.");//입력
        alert(inputCon);

    </script>

</body>
</html>

var → 데이터타입이 var이다. / variable(변수) - int든 String이든 다 받아낸다.

입력했으면 true값

취소하거나 입력안했으면 false값, 입력없을땐 null값 이 나온다.

자바스크립트에서는 ; 세미콜론 안넣어줘도 잘 실행된다. 하지만 넣어주자 가끔 컴터가 헷갈려해서 에러날수있다.

자바랑 자바스크립트랑 전

~

혀 관계없다.

근데 자바랑 주석처리는 똑같다.

자바스크립트에서는 기본적으로 문자열(String), 문자(Number), 불리언(Boolean) 이렇게 3가지이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script  type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript">
    var str = "문자열(Stirng)";
    console.log("str : "+str);

    var num = 123;
    console.log("num : "+num);

    var bool = false;
    console.log("boo : "+bool);
    </script>
</body>
</html>

크롬 콘솔창 ↓

 

 

 

(PT)Javascript와_Node.js_03강_변수와 자료형

 

자바스크립트 자료형 6가지!

문자, 숫자, 불리언, 함수, 객체, undefined

(**함수도 자료형으로 준다.)

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript"></script>
</head>
<body>
	<script type="text/javascript">
		var varStr = "ABCDEF";
		console.log("varStr : " + varStr);

		var varNum = 123456;
		console.log("varNum : " + varNum);

		var varBoo = false;
		console.log("varBoo : " + varBoo);

		var varFun = function fun() {};
		console.log("varFun : " + varFun);

		var varObj = {};
		console.log("varObj : " + varObj);

		var varUnd = undefined;
		console.log("varUnd : " + varUnd);
	</script>
</body>
</html>

Function은 함수.

 

{중괄호} 가 객체이다!!

 

 

 

 

javascript는 다른프로그램언어에 비해 자료형에 대한 제약이 약하다.

자료형 검사는 typeof( ). typeof( ); 는 현재 어떤 타입을 갖고있는지 6가지 중 한개 알려줌.

 

자바스크립트 형변환해주는 방법★

	var varNum = 1000;
	console.log(1000 + varNum);
//2000

	var varNum = "1000";
	console.log(1000 + varNum);
//10001000

	var varNum = "1000";
	varNum = Number(varNum); //String타입을 Number로 형변환
	console.log(1000 + varNum);
//2000 - 자바언어와 다른 차이임!

 

(PT)Javascript와_Node.js_04강_연산자

seouliotcenter.tistory.com/615

할당연산자

사칙연산자

 

자동증감연산자 ++변수, 변수++

비교연산자 > < >= <= == !=

논리연산자 && ||

부정연산자 varTrue 와 !varTrue = False

복합대입연산자 += -= *= /= %=

 

 

 

 

자바스크립트로 구구단짜기

 

[javascript.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript"></script>
</head>
<body>
	<script type="text/javascript">
		for(var i = 1; i<10; i++){
			console.log(i+'단');
			for(var j=1; j<10; j++){
				console.log(i+"x"+j+"="+i*j);
				document.write(i+"x"+j+"="+i*j);
			}
		}		
	</script>
</body>
</html>

 

 

 

 

 

(PT)Javascript와_Node.js_05강_배열

자바랑 다른 자바스크립트의 배열

배열객체는 new로 생성

var varArr1 = new Array( );

 

자바랑 다르게 데이터타입을 다 안맞춰줘도 된다.

var varArr = new Array(123, "ABC", true, function fun(){}, {}, undefined);

 

만약 new생성을 안했을 경우

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript"></script>
</head>
<body>
	<script type="text/javascript">

		var varArr1 = new Array();
		var varArr2 = new Array(5); 
		var varArr3 = new Array(123, "ABC", true, function fun(){}, {}, undefined);
		var varArr4 = [123, "ABC", true, function fun(){}, {}, undefined];
		
		console.log("varArr1 : " + varArr1);
		console.log("varArr2 : " + varArr2);
		console.log("varArr3 : " + varArr3);
		console.log("varArr4 : " + varArr4);
		
	</script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

Spring

스프링 설치 방법

github.com/spring-projects/toolsuite-distribution/wiki/Spring-Tool-Suite-3

[

spring-projects/toolsuite-distribution

the distribution build for the Spring Tool Suite and the Groovy/Grails Tool Suite - spring-projects/toolsuite-distribution

github.com

](https://github.com/spring-projects/toolsuite-distribution/wiki/Spring-Tool-Suite-3)

다운받기

 

 

 

 

 

Java_자바_Spring_스프링_강의_01강_스프링이란

프레임워크 = 프로그램을 쉽게하기 위한 약속

LSQ list set que

 

 

스프링 spring 장점 특징 매우 중요!!-따로 외울필요x 이해o

각모듈 조합, 기본적인 패턴등을 강제시킴

 

STS.exe에 톰캣환경설정해주기(전에 이클립스에서 해줬던 방법이랑 똑같다.)

 

 

 

오늘의 문제

 

1. 자바스크립트 타입의 종류는?

문자String, 숫자Number, 함수Function, 객체Object, 참거짓Boolean, Undefined

 

[예시]

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript"></script>
</head>
<body>
	<script type="text/javascript">
		var varStr = "ABCDEF";
		console.log("varStr : " + varStr);
 
		var varNum = 123456;
		console.log("varNum : " + varNum);
 
		var varBoo = false;
		console.log("varBoo : " + varBoo);
 
		var varFun = function fun() {};
		console.log("varFun : " + varFun);
 
		var varObj = {};
		console.log("varObj : " + varObj);
 
		var varUnd = undefined;
		console.log("varUnd : " + varUnd);
	</script>
</body>
</html>

 

 

PPT만들기

728x90

'코딩 > 수업 정리' 카테고리의 다른 글

21.01.20 [041] Wed  (0) 2021.01.20
21.01.19 [040] Tue  (0) 2021.01.19
21.01.15 [038] Fri  (0) 2021.01.15
21.01.14 Thu [037]  (0) 2021.01.14
21.01.13 Wed [036]  (0) 2021.01.13

댓글