국비 JavaScript - 변수, 연산자, 제어문
2020.10.15(목)
사용자 요청 ==> 서버를 거쳐서 처리 (Controller) ==> 자바
==> 사용자 컴퓨터에서 처리 ==> 자바스크립트
***1) 자바 : 데이터베이스 연결 ==> 데이터를 전송 (프로그래언어 => C/C++,C#,Java)
***2) HTML : 정적 = 브라우저 출력하는 언어
수정)==3) CSS : 시각화
= 보는거다
= 외국(인터넷 => 정보를 공유)
4) 자바스크립트 : 이벤트 처리 (이벤트 구동 방식)
==========
***ajax
nodejs
vuejs
***reactjs
=======
***jquery ==>
자바스크립트 (ES5) ==> ES8
1) 변수
var : 자동 지정변수
var i=10 ==> 정수 인식 (int)
var i="aaa" ==> String
var i=10.5 ==> double
var i=[] => array
var i={} => 객체
===> 단점 : scope
예)
if(조건문)
{
int a=10; // 지역변수
}// a는 사라진다
if(조건문)
{
var i=10;
}
console.log(i)
ES6 => const(상수) , let (지역변수)
ES6 => 람다식
function aaa(){}
const aaa=()=>{}
2) 연산자
3) 제어문
4) 함수
5) DOM
6) 객체지향
7) ES6 => react,vue,node
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 내부 script -->
<!-- 외부 script => 확장은 .js
<script src="파일명">
======= 원격 (url), 내부(파일명)
-->
<script type="text/javascript">
/*
변수 :
====================
var : ES5사용하는 변수 => 사용범위 정해져 있지 않다
let : ES6사용 변수 => 지역변수 ({} 끝나면 사용을 할 수 없다)
const : ES6사용 ==> 데이터 변경이 불가능 (상수형 변수)
==================== 자동지정 변수
int a=10;
var a=10;
String a="Hello";
var a="Hello";
=====> let a=10 ==> int
let a="aaa" ==> String
let a=10.5 ==> double
let a=[] ==> Array ==> 데이터 첨부 ==> [10,"Hello",10.5,{}]
let a={} ==> 객체 (JSON) => 자바스크립트 데이터 표현법
*/
/* window.onload=function(){
var a="<center><h1>Hello JavaScript</h1></center>";
// 화면에 출력
document.write(a);
a=10;// 자동으로 형변환
document.write(a);
} */
// 화살표 함수
/*
화살표 함수 => function , return제거
*/
/* window.onload=()=>{
let a="Hello JavaScript";
a="Hello2";
console.log(a);
const b="JavaScript";// 상수 ==> final => 값을 변경할 수 없다
//b="Jquery";
console.log(b);
} */
// main
/* window.onload=()=>{
aaa();
} */
</script>
</head>
<body>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
* var : 사용범위가 지정(X)
let : 사용범위가 지정(O)
const : 상수형 변수
*/
/* var a=10;// 전역변수
window.onload=function(){
if(a==10)
{
let b=100;
}
console.log("b="+b);
} */
/*
처리
= 연산자
산술연산자 (+ , - , * , / , %)
=== == 정수/정수=실수
1) 산술처리
2) 문자열 결합
논리연산자
비교연산자 ( == , != , < , > , <= , >= )
===(같다) , !==(같지 않다)
문자열 비교 : ===
문자열 => "" , 'Hello'
삼항연산자
대입연산자
스코프연산자 (...)
= 제어문
조건문
=> 단일조건문
=> 다중조건문
=> 선택조건문
반복문
=> for
=> do~while
=> while
=> for-each
=> for - in
=> map
반복제어문
=> continue
=> break
*/
window.onload=function(){
let a=10;
let b=3;
console.log("10+3="+(a+b));
console.log("10-3="+(a-b));
console.log("10*3="+(a*b));
console.log("10/3="+(a/b)); // 정수/정수 = 실수
console.log("10%3="+(a%b));
let aa='Hello ';
let bb='JavaScript!!';
console.log(aa+bb);
let aaa="10";
let bbb=20;
console.log(aaa+bbb); //1020 ${"20"+10}=30
let aaaa='A'
let bbbb=10
console.log(aaaa+bbbb)//75 '' => 문자열 ==> "A"
}
</script>
</head>
<body>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
// 비교연산자 (숫자,문자열) "" , ''
var result='Java'==='Java';// == , === : 문자열비교도 가능
console.log(result);
var res1='Java'>'Hello';
console.log(res1);
var res2='Java'!=='Java'; // != , !==
console.log(res2);
// 논리 연산자 ( && || ! (부정연산자))
/*
========================================
&& ||
========================================
true true true true
========================================
true false false true
========================================
false true false true
========================================
false false false false
========================================
// 단항 연산자 (++ , --)
*/
let a=10;
a++;
console.log("a="+a)
let aa=10
let bb=++aa;
console.log("aa="+aa);
console.log("bb="+bb);
aa=10;
bb=aa++;
console.log("aa="+aa);
console.log("bb="+bb);
let aaa=10===10;
let bbb=!aaa;
console.log("aaa="+aaa);
console.log("bbb="+bbb);
/*
let,var ==> 데이터형
1) 정수
2) 실수
3) 블린
4) 문자열
5) 배열
6) 객체
*/
}
</script>
</head>
<body>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
* 삼항연산자 , 대입연산자
(조건)?값1:값2
= 조건 (true) : 값1
= 조건 (false) : 값2
대입연산자
=
+=
-=
*/
window.onload=function(){
var a=(10%2==0)?"짝수":"홀수";
document.write(a);
}
</script>
</head>
<body>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
/* function send(){
// 태그 ==> 객체
let f=document.frm;
if(f.name.value==="")
{
f.name.focus();
return;
}
alert(f.name.value);
} */
$(function(){
$('#btn').click(function(){
if($('#name').val()==="")
{
$('#name').focus();
return;
}
alert($('#name').val())
})
})
// id , class => jquery,css
// name => 자바에서 전송 받을 목적
</script>
</head>
<body>
<form name=frm>
이름:<input type=text name=name size=15 id=name>
<input type=button value="전송" id="btn">
</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
* 제어문
조건문
if(조건문)
{
조건이 true 일때 실행문장
}
=============================
if(조건문)
{
조건이 true 일때 실행
}
else
{
조건이 false 일때 실행
}
==================================
if(조건문)
{
조건이 true 일때 실행
}
else if(조건문)
{
조건이 true 일때 실행
}
else if(조건문)
{
조건이 true 일때 실행
}
switch(정수)
{
case 1:
처리
break;
case 2:
처리
break;
}
초기값
while(조건문)
{
처리문장
증가식
}
초기값
do{
처리문장
증가식
}while(조건식);
1 2 4
for(초기값;조건식;증가식)
{
3
}
for(let vo in array) => forEach
*/
/* window.onload=function(){
let a=10;
if(a%2==0)
console.log("a=짝수입니다");
else
console.log("a=홀수입니다")
} */
let i=0;
function click()
{
//if(i)
}
</script>
</head>
<body>
<div>
<input type=button value="클릭" onclick=click()>
</div>
<div id="div" style="display:none">
<img src="https://t1.daumcdn.net/movie/dcf71f416b8751527ae62754fe76f13deadd58e2">
</div>
</body>
</html>