html파일을 통해서가야함
webapp- new - javascript file =>파일명.js
/**
* 한글로 아무거나 누르고 save
*/
자바스크립트 파일 우클릭/ 제일 하단 properties열고/
인코딩 -> other->euc-kr
=>글자깨진거 확인하고 지우기
html에서 파일 연결하기
<script type = "text/javascript" src="파일명">=>자바스크립트 파일 연결
실행은 html에서 ctrl + f11
javascript
인터프리터 언어 : 오타나지 않게 주의 해야함.
변수-데이터 담는 그릇
변수에 접근하는 방법 :
alert():경고창을 띄워주는 함수
console.log() :로그를 띄워주는 함수
document.write :웹페이지에 내용을 출력
name="lee" >> 이런방식은 위험하다. 전역변수의 형태
이걸 방지 하기 위해 변수 선언 형태로 3가지 방법
var, let , const
***var : variable
=>중복선언가능 + 초기화 가능
var a = 10;
console.log(a);
var a = 20; //변수 선언 +초기화
console.log(a);
자바스크립트는 f12 에서 콘솔 확인
=>이전에 var a 선언한고 잊고 다시 값 할당하는 실수 발생 가능
그래서 꼭 var를 선언해야 하는 곳이 아니면 잘 사용 x
가장 많이 사용하는건 let
***let : 변수명 중복선언 불가 (자바 변수 만들때와 비슷한 느낌 )
let name = "수아";
console.log(name);
let name="1" =>기존에 이미 같은 변수 선언한적 있어 에러 발생
인터프리터 언어라서 결과가 에러
let은 한번 선언한 후에 값 바꾸기는 가능
let grade="F";
grade = "A+";
*** const
자바스크립트에서 변수선언시
값 바꾸기 가능 var, let
변하지 않는 값은 const로 선언
<script type = "text/javascript" src="연결하고 싶은 파일명">
string표현
" " , ' ' ,` `( backtick)
문자열 내부에 변수를 표현할 때 사용하기 좋은 backtick
${변수명} 넣어 표현
let 변수명 = `my name is ${name}`;
document.write(변수명+'<br>' )=>웹페이지에 출력되기때문
엔터표시하려면 <br>필요
문자열 내부에 변수 표현시 `` 사용
변수 선언시 데이터 타입 넣지 않음. 알아서
자바 -나누기 0 하면 에러
자바 스크립트 =>infinity 무한대가뜸 에러처리 안해도 됌
NaN : not a number -숫자가 아니다.
자바스크립트는 .equals같은거 안쓰고 바로 논리 형 가능
console.log(name=="안녕");
let e;
console.log(e); =>undefined :값이 할당되지 않은 상태
null값은 넣어줘야함
let 변수명 = null;
type of 변수명 =>변수 자료형 알아낼때 사용
alert("안녕"); 메세지 보여주는기능
prompt("점심뭐먹을래") ;메세지 보여주고, 값입력받음
confirm("선택하라"); 사용자에게 확인 받기 위한기능
단점이 있음에도 빠르고 간단하게 적용 가능해서 광범위 하게 많이 사용
자바 스크립트 웹앱에서 만들고한글로 저장 하고 우클릭 프로퍼티스
euckr로 바꾸고 alert("안녕");으로 확인 매번해야함
형변환
false = 숫자 0, null, NaN , ""(빈 문자열, 띄어쓰기 없는)
연산자
거듭제곱 let num = 2**3;
연산자 우선순위 * / => + -
연산자 줄여쓰기 가능
num=num+5;
증감연산자
num++; 가능 (1씩 증가)
++num;
=>++을 뒤에 적으면 증가시키기 전의 값을
=> 앞에 적으면 증가시킨 값을 담음
document.write(("10"==10)+<br>);
=>자동 형변환 때문에 true
document.write(("10"===10)+<br>);
=== , !== //자료형까지 비교
! :not
&&:and 비교하는 값이 모두 true여야 true
|| : or 둘중 하나라도 true면 true
연산 순서 not - and - or
=> num+=5;
반복문안에서 변수 선언한거랑 그냥 한거랑 다르게 봄
let a = 1;
if(true){
let a =2;
}
f12 =>개발자 도구
자바스크립트는 ; 안써도 괜찮다
switch-case 문
케이스 다양할때 간결하게 사용가능, 특정 값에 따라 다른작업 필요시 사용
자바에서 한건 메소드// funtion이라고 언급 된게 진짜 함수다.
html파일 자체에서 <script type ="text/javascript">
요기다 하면 자바스크립트 사용 가능
src는 파일 연결할때!
function 함수명(){ alert("ㅋㅋ");
}
</script>
<button onclick="함수명();">ㅋㅋ </button> =>한번 클릭하면 나옴
<button ondbclick="함수명();">ㅋㅋ </button>=>더블클릭하면 나옴
function choice(함수명)(){
if(money>=2500){
alert('콜라 선택 가능');
}
}
function 버튼1(){
money +=100;
console.log("현재금액 :" + money)
choice();
} => 버튼 누를때 경고창 뜨게 적용
<div onclick="함수명();">콜라 300</div>
=>div도 onclick 가능
while문 : 조건만 확인하며 반복
=>주의할 점 : 조건문이 언젠가는 false가 될 수 있도록
for문 : 특정 숫자를 가지고 숫자값을 비교, 증감을 반복
함수는 사용하려면 불러야한다.
function show(){
alert("에러발생");
}
show();
파라미터에 변수를 넣었으면 그 변수에 해당하는 값을 넣어 주는게 좋다.
**전역변수 (global variable) :어디서나 접근할 수 있는 변수
let msg ="안녕" ; //갑자기 호출한 변수
**지역변수 (local variable) :함수 내부에서 접근할 수 있는 변수
function sayhello(name){
let msg="안녕";
if(name){
msg+=` ${name}`;
}
console.log("함수내부"+msg);
}
함수는 함수명으로 불러야 나옴
sayhello('lee');
지역변수는 전역변수와 같은 이름으로 지을수 있음.
함수 내부에서 사용하는 지역 변수는 함수 내에서만 사용
때문에 같은이름의 변수라도 서로 간섭 받지 않는다.
전역변수 개수가 많아지면 관리힘듬 => 함수에 특화되어있는 지역변수 사용 추천
-or을 활용하여 default값 넣기
function sayhello(name){
let name2 = name || 'friend';
let msg = `hello, ${name2}`;
console.log(msg);
}
sayhello(); => 파라미터 값 없으면 hello friend 나옴
sayhello('lee'); => 파라미터 값 있으면 hello 파라미터값
-파라미터에서 디폴트 값 지정
함수는 한번에 하나의 작업 하도록, 읽기쉽고 어떤기능인지 알게
함수는 함수 선언 전에 불러도 나온다 =>"함수 선언문"이라고 함
**자바스크립트에는 화살표 함수라는게 있다.
arrow_function
<함수 표현식> =>먼저 호출 불가능
변수에 =함수를 담는다.
let 변수명= function(){
console.log("hi");
}
변수명();
**함수 선언문과 함수 표현식의 문법적 차이 : 호출하는 타이밍
함수 선언문은 어디서 호출해도 사용가능하다.
자바스크립트는 프로그램이 실행되기 전 모든 "함수선언문"을 찾아 모아놓음. 메모리에 저장하고 있다가 호출시 내부적으로 끌어올려서 사용.
이미 저장이 되어있어 함수 선언 전에 먼저 호출 되어도 오류 없이 잘 작동.
실질적으로 코드가 끌어 올려지는 것은 아님. 실제 메모리상에도 변화없음.
=>이걸 " 호이스팅" 이라고 한다.
함수표현식은 코드에 도달하면 생성이 됌. (메모리에 저장)
** 좀더 자유롭게 표현하고 싶을때, 함수 선언문 사용.
함수 표현식에 가장 대표적인 함수
: 화살표 함수 =>지금까지 봐왔던 함수보다 더 간결하게 작성 가능
let add = function(num1,num2){
console.log(num1+num2);
}
add(1,2);
let add = (num1,num2)=>{
console.log(num1,num2);
return num1+num2;
}
=>return 이 있을때 리턴 생략가능
let add = (num1,num2)=>{
num1+num2;
}
** function에서 return 하는 코드 한줄이면 =>중괄호도 생략
let add = (num1,num2) => num1 + num2;
return할 소스가 여러줄이면 중괄호 사용해야 함.
**파라미터 하나면 소괄호도 생략 ok
let 변수명= name => `hello &{name};
**method
let person = {
name : "lee",
walk : function(){
console.log("도각도각");
}
}//method : 객체 속성(프로퍼티)으로 할당된 함수
=>안에 들어가 있어야 메소드 / 바로 나오는건 function
객체(object , object property)
하나의 변수나 상수에 다양한 종류의 값을 넣을때
let dog = {
name : "콩이"
age : 3
}
consol.log(dog.name); //key값 =>value값이 출력
자바 해쉬맵, 파이썬 딕셔너리랑 같은개념
json : 자바스크립트로 만든거다.
for..of 문 (자바의 for-each)
for (let day of days(여러개짜리 변수명)){
console.log(day);
}
let 변수명 = new Date();
console.log(today);
자바스크립트안에 function 만들고
<body> 에서 <h1 태그 안에 onclick="함수명();">이렇게 만들면 적용됌
자바스크립트에서 하는 것은 get방식 요청이다.
let s = '어느새 아침이 밝았네요';
alert(s) ; //변수담긴 내용전체 출력
alert(s.length) ; //글자수
alert(s[5]) ; // [i]번째 위치한 글자
alert(s.indexOf('저')) ; //없는 글자 찾으면 -1 return
alert(s.indexOf('저녁') ! = -1 ) ; //저녁이라는 글자가 포함되어있는지
**indexOf : 찾는글자 있으면 그 위치 return 없으면 -1 return
let numexist = false; =>숫자 있는지 체크용도
let num="369"; // 이중 하나 이상 있는지
for (var i =0; num.length; i++){
if(pwinput.value.indexOf(num[i]) != -1){
numExist=true;
break;
}
사진 받는 순간 post방식으로 해야하고
<form method="post" enctype="multipart/form-data">로 해야함
=> jar 파일 필요=> WEB-INF -lib에다가 cos.jar파일 끌어 놔야함
js 파일은 valicheker만든거 넣기
post 방식은 name밖에 못씀 (class 나 id x)
<form><button> => get /post
<form method="post" enctype="multipart/form-data"
onsubmit="return 연결할 자바스크립트함수명();>
src/main/java 에서 서블릿 만들기
JSP : 자바 코드 쓸수 있는 HTML
소수점 둘째자리까지
HTML에서는 자체적으로 표현 불가
String bmi2= string.format(%.2f",bmi);
이미지
string image = mr.getfilesystemname("photo");
image = urlencoder.encoder(image,"EUC-KR");
image = image.replace("+"," ");
버튼 누르면 input 내용 jsp로 넘어가게 하고 싶을때
name붙여주기!! input에다가 name= "x"
<canvas>는 자바스크립트서 let은 안되고 var만 적용되서
var 변수명 =null;이런식으로 해야됌
html5 - canvas 사용시 Math.random() 사용해야함(소수점으로 나와서)
Math.round(Math.random()*255(rgb컬러 색깔수))하면 실수로 나옴
onmouseenter =>마우스 가져다 댔을때 이벤트 생김
onmouseleave =>마우스뺏을때 이벤트
setInterval 안에는 function있어야함
셋 인터벌 ->계속 도는거 반복
setInterval (function(){
실행하고픈 함수},80(원하는 시간 간격));
<body onload="함수명();"> =>이게 먼저 실행
Attribute는 기본적으로 객체 사용
Object ccc = request.getAttribute("c");
controller - servlet
상황 판단해서 M/ V 소환 (요청 들어왔을때)
이사이트의 진입점(실행여기서)
Custom TAG
**JSP표준 액션 태그
JSP환경에서 기본적으로 사용가능, 접두어가 JSP
forward, include
**커스텀 태그
외부 jar파일을 넣어서 사용 (jstl.jar)
접두어가 마음대로 / 반복문, 조건문, 출력형식
EL(expression language)
값을 받을때 자바 대신 - setAttribute로 받은거 el로!
로그인 되었을때만 볼수있는 것들, 수정할수있게 할때
c:if 많이 사용
fmt (formatting) :문자열/ 날짜 형태 포맷팅
<fmt:formatNumber value="{a }" type="number"/> 숫자
<fmt:formatNumber value="{a }" type="currency" =>\로 바꿈
currencuSymbol ="$"/> =>\를 $로 바꿈
<fmt:formatNumber value="{b }" type="percent"/>퍼센트(소수점 반올림)
<fmt:formatNumber value="{c }" patter="#.00/> 소수점 둘째자리
Date속성
type = date / time / both
1.date
dateStyle = "short/long"
2.time
timeStyle = "short/long"
3.both
dateStyle = "short/long"
timeStyle = "short/long"
<fmt:formatDate value="{d }" type="both(날짜 시간 둘다)" dateStyle="long" timeStyle = "short"/>
<fmt:formatDate value="{d }"pattern = "yyyy-MM-dd E a hh:mm"/>
alert은 알림
confirm 은 확인 창으로 확인 취소 받을수 있음
jsp는 webapp에 넣기
get방식 요청 3가지
-<a>태그 : 클릭하면 get방식 요청
-자바스크립트 : 이벤트 추가(onclick) 했을때 //js로 html만들기 가능
-<form> + < button> :버튼 클릭시 get/post 방식
파라미터는 string으로 받아진다.
HTTP프로토콜 특성이자 약점
1. Connectionless
=>사용자가 요청을 한 부분을 응답 받았을 때 연결이 끊기는 형상
2. Stateless
=> 통신이 끝나면 상태를 끊어버리는 특성
이약점들 보완위해 쿠키와 세션이 사용
쿠키 (Cookie)
- 사용자의 상태 정보를 컴퓨터에 저장했다가 나중에 참조
- 사용자가 따로 요청을 하지 않아도 브라우저가 요청하면 자동으로 서버에 전송 해줌
- 한번 시간을 정해 놓으면 브라우저 종료 여부와 상관없이 유지가 가능.
쿠키 활용되는곳: ID/PW저장하기 ,장바구니, 팝업창(오늘하루 보지 않기)
특징 : M(Model)에서 만든 값이다.
카테고리 없음