1.alert, prompt, confirm alert -> 알려줌 prompt -> 입력받음 confirm -> 확인받음 1.1 alert() alert 함수는 알림 창을 띄워주는 용도로 사용자와 상호작용 하기보다는 일방적으로 알리기 위한 함수입니다. 회원가입을 할 때 비밀번호가 틀렸습니다 이름을 입력해 주세요처럼 우리가 자주 접할 수 있습니다. 1.2 prompt() promt 함수는 보통 사용자에게 어떤 값을 입력받을 때 사용합니다. 추가로 입력창에서 취소를 누르면 null값이 들어가게 됩니다. 그리고 prompt는 default 값도 입력가능합니다. prompt는 2개의 인수를 받을 수 있습니다. 이러한 기능은 힌트를 주거나 안내를 할 때 편리하게 작용합니다. 1.3 confirm confirm ..
1.자료형 1.1 문자열 문자열 선언 방식은 "", '', `` 3가지 방식이 존재합니다. " " : 문자 중간에 '를 사용하는 문자열인 경우 큰 따옴표로 감싸주면 편합니다. ' ' : 큰 따옴표와 별 차이는 없지만 중간에 ` 를 표현하려면 \`로 표현해야합니다. `` : 백틱으로 문자열내부에 변수를 표현할때 사용합니다.(바로 표현식을 넣는 경우도 가능합니다) ex) const message3 = `My name is ${name}`; 1.2 숫자형 숫자형은 다음과 같이 선언할 수 있고 숫자형은 사칙연산이 가능합니다. const age = 30; const PI=3.14; conslole.log(1+2); // 더하기 conslole.log(10-2); // 빼기 conslole.log(3*2); // ..
1.변수 1.1 변수 변수는 어떤 정보에 이름을 붙여서 저장하고 싶을때 사용합니다. 예를들면 다음과 같습니다. name="Mike"; age=30; 줄 마지막에 들어간 세미콜론(;)은 한줄이 끝났다는 의미로 써주고 생략해도 되지만 항상 적어주는 것이 좋습니다. 그리고 문자는 항상 따옴표로 감싸줘야합니다. 그리고 가끔 변수를 만들다보면 원인을 알 수 없는 에러가 발생하는 경우가 있다. 아래와 같은 코드가 그 경우입니다. class="수업" 에러가 발생하는 이유는 자바스크립트에서 이미 사용하는 단어이기 때문에 변수명으로 사용할 수 없습니다. 이런 단어들을 예약어라고 합니다. 1.2 변수 접근 함수 다음과 같이 alert을 사용하였을 경우 화면상단의 메시지로 출력함을 알 수 있습니다. name="Mike"; ..
이번 포스팅에서는 Switch문을 이용하여 덧셈,뺄셈,곱셈,나눗셈을 해보겠습니다. 1. Switch 이전에 했던 Assign은 다 지워주고 아래처럼 Switch를 놓고(왼쪽의 Switch를 드래그) 4개의 Assigin을 끌고와 놓아주고 Label과 Condition을 아래와 같이 변경해줍니다. 그리고 각각의 Assign을 덧셈,뺄셈,곱셈,나눗셈에 맞게 Assignments를 지정해줍니다. 화면의 각각의 Assign 클릭하고 Variable과 value의 값을 논리에 맞게 지정해줍니다. 순서대로 덧셈, 뺄셈, 곱셈, 나눗셈 입니다. 그리고 Switch 아래에 Clear 버튼을 위한 Assgin을 하나 더 추가해줍니다. Property도 다음과 같이 설정합니다. Clear버튼을 클릭할 경우 사용자가 입력한..
이번 포스팅에서는 If, Else를 이용한 덧셈 뺄셈을 해보겠습니다. 시작하기에 앞서 저번포스팅에 세 만들었던 것들을 Container로 묶어줍니다. 그리고 딱 붙어있는 게 보기 안 좋아서 margin을 주었습니다. margin은 properties의 style classes에서 설정가능합니다. 1. If,Else 1.1 뺄셈버튼 Add을 복사 붙여넣기 하고 Rename 하여 Substract 버튼을 만들어줍니다. 1.2 Action 설정 먼저 AddOnClick의 이름을 변경해줍니다. 이름은 PerformAction으로 변경했습니다. 그리고 PerformAction의 오른쪽 마우스를 눌러 Add Input Parameter를 만들고 name은 type으로 해줍니다. 그다음 Add 버튼을 클릭한 후 오른..
1. Acction, Assignmet,expression를 이용한 덧셈기능 구현 이번포스팅에서는 사용자가 두개의 값을 입력하고 add버튼을 클릭하면 덧셈결과를 화면에 출력해주는 것을 구현해보겠습니다. 1.1 Input , Add(Button) 이전 포스팅에서 사용하였던 HelloWorld화면에서 계속 진행하겠습니다. 왼쪽도구모음에서 Input을 끌고와 화면에 놓아줍니다. 우리는 2개의 Input칸을 사용하기때문에 2번끌고와줍니다. 그리고 Button까지 끌고와줍니다. 처음에 input을 놓으면 화면이 아래처럼 나오는데 우리는 한라인에 2개의 Input칸과 Add 버튼까지 구현할거기 때문에 Input의 크기를 줄여줍시다. 그 전에 먼저 아래 3개를 하나의 컨테이너로 묶어줍니다.(같은 라인에 정리하기위함)..
1. Hello World 출력 1.1 애플리케이션 및 모듈생성 먼저 새로운 application(Phone App)을 만들고 Hello라는 모듈을 만들어줍니다. 1.2 화면생성 Interface 탭의 MainFlow의 오른쪽탭을 눌러 Add Screen을 클릭하여 Empty Screen을 생성해 줍니다. Screen의 이름은 Hello로 World로 해주었습니다. 1.3 텍스트 입력 MainFlow 탭을 더블클릭한후 좌측도구모음에서 Text를 끌어와 화면(content)에 놓아줍니다. 그리고 오른쪽아래 Text칸에 Hello World라는 문장을 입력한 후 화면 상단에 Publish를 클릭한후 open in browser를 클릭해 줍니다. 1.3 실행화면 실제로 브라우저에서 확인해보면 Hello Wor..
할 일 기능추가 1. 화면 목록에서 첫 번째 할 일의 제목을 오른쪽 마우스 버튼으로 클릭한 다음 Link to -> New Screen을 선택합니다. Empty 빈 템플릿을 선택하고 TaskDetail이라는 스크린 이름을 지정한 후, Create Screen을 클릭합니다. 2. 그 다음 왼쪽 도구모음에서 form을 끌어 화면에 놓는다. 3. Data탭을 클릭한후 Task를 방금 끌여들인 Form 화면에 끌어서 놓아준다. 그럼 아래와 같은 화면이 나타난다. Save 로직 구성 1. 먼저 세이브 버튼을 두번클릭하면 아래와 같은 화면이 나오게 됩니다. 2. 다음 로직탭을 클릭하여 Server Action의 오른쪽을 클릭하여 Add Server Action을 누르고 TaskCreateOrUpdate를 만들어줍니..
Setting 1. 먼저 New Application을 클릭합니다. 2. 다음으로 From scratch을 누르고 우측하단 next 버튼을 눌러줍니다. 3. phone app을 만들 거기 때문에 맨 오른쪽의 Phone App를 누르고 Next버튼을 클릭합니다. 4. 그러면 앱의 Name(이름)과 Description(간단한 설명)을 적을 수 있습니다. 저는 name을 Todolist로 해주겠습니다. 마지막으로 오른쪽아래에 Create App 버튼을 클릭해 줍니다. 5. 모듈의 이름과 모듈의 타입을 선택할 수 있는 화면이 나오는데 수정하지 않고 바로 Create Module 버튼을 클릭합니다. 6. 여기 과정까지 하고 나면 실제로 개발을 할 수 있는 화면이 나오게 됩니다. 여기서 첫 번째로 해야 할 일은 ..
일반적으로 웹 페이지의 레이아웃은 CSS의 display, float, position 등과 같은 속성을 사용해 구현한다. 하지만 이속성을 사용하면 구현방법이 복잡하고 레이아웃을 표현하는데 많은 한계가 있습니다. 구현이 어려운 레이아웃을 간단하게 구현할 수 있게 CSS3에 추가된 레이아웃 방식이 flexbox입니다. flex box를 사용하면 요소의 크기와 순서를 유연하게 배치할 수 있습니다. flexbox란? flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식입니다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수..
