Taewon's road not taken

var while can be called multiple times, let acts like variable from java, can be called only once if it is declared globally.

var acts as global variable all the time while let functions only in the declared block.

const is final from java. 

arrow syntax function is lamba from java.

javascript allows for default value

<script>

  document.addEventListener('DOMContentLoaded', function(){

    // Add your code below this line

    // Add your code above this line

  });

</script>

document.getElementsByClassName('')[0].textContent = 'dd';

json apis are sent in bytes, application receives it as string. in order to use it in javascript, it needs to be converted into javascript object. JSON.parse does that for us.

  document.addEventListener('DOMContentLoaded', function(){

    document.getElementById('getMessage').onclick = function(){

      // Add your code below this line

const req = new XMLHttpRequest();

req.open('GET','/json/cats.json',true);

req.send();

req.onload = function(){

  const json = JSON.parse(req.responseText);

  document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);

}

another way to request externa data is through fetch method.

fetch('/json/cats.json')

   .then(response => response.json())

   .then(data => { document.getElementById('message').innerHTML = JSON.stringify(data); })

[ ] -> Square brackets represent an array
{ } -> Curly brackets represent an object
" " -> Double quotes represent a string. They are also used for key names in JSON

JavaScript provides seven different data types which are undefined, null, boolean, string, symbol, number, and object.

When JavaScript variables are declared, they have an initial value of undefined. If you do a mathematical operation on an undefined variable your result will be NaN which means "Not a Number". If you concatenate a string with an undefined variable, you will get a literal string of "undefined".

 camelCase =  first word in lowercase and the first letter of each subsequent word is capitalized.

 Mad Libs style ex. var ourStr = "Hello, our name is " + ourName + ", how are you?";

Zero-based indexing = programming languages start counting from number 0 not 1;

Javascript array array methods

push(), pop(), shift()(removes the first element), unshift()(adds to the beginning of an array) 

Difference between parameters and arguments : 

In JavaScript, scope refers to the visibility of variables. Variables which are defined outside of a function block have Global scope.

Variables which are used without the var keyword are automatically created in the global scope.

== does type conversion, === is strict equality which does not automatically performs type conversion.

you access the data in objects through what are called properties.

if your object has any non-string properties, JavaScript will automatically typecast them as strings.

an example of javascript object notation aka json:

The Call Stack

Recursive functions use something called “the call stack.” When a program calls a function, that function goes on top of the call stack. This similar to a stack of books. You add things one at a time. Then, when you are ready to take something off, you always take off the top item.

Math random number range: 

Math.floor(Math.random() * (max - min + 1)) + min

Last picture explaination:

arrayRange's data type is set at line 3.

Since recursion always happens as call stack, if wanted print value is from 1 ~ 5, have to think of top book, which is the number 5. 5 gets unshift, then 4 all the way up to 1 which results 1 ~ 5 as answer. 

해당  apache server.xml에 URIEncoding="UTF-8" 를 추가하자.

    <Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"  URIEncoding="UTF-8" />

이방식은 get만 적용이되니 form태그를 get방식으로 보내야한다. 

sudo mysqld_safe --skip-grant-tables

mysql -u root -p

UPDATE mysql.user SET authentication_string=null WHERE User='root';

FLUSH PRIVILEGES;

exit;

mysql -u root

ALTER USER 'root'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'yourpasswd';

<div> - groups content

<section> - groups related content

<article> - groups independent, self-contained content

----

 <fieldset>

        <legend>What level ninja are you?</legend>

        <input id="newbie" type="radio" name="levels" value="newbie">

        <label for="newbie">Newbie Kitten</label><br>

        <input id="intermediate" type="radio" name="levels" value="intermediate">

        <label for="intermediate">Developing Student</label><br>

        <input id="master" type="radio" name="levels" value="master">

        <label for="master">Master</label>

      </fieldset>

display: flex;

flex-direction: row or column;

example : 

<style>

  body {

    font-family: Arial, sans-serif;

  }

  header, footer {

    display: flex;

    flex-direction: row;

  }

  header .profile-thumbnail {

    width: 50px;

    height: 50px;

    border-radius: 4px;

  }

  header .profile-name {

    display: flex;

  flex-direction: column;

    margin-left: 10px;

  }

  header .follow-btn {

    display: flex;

    margin: 0 0 0 auto;

  }

  header .follow-btn button {

    border: 0;

    border-radius: 3px;

    padding: 5px;

  }

  header h3, header h4 {

    display: flex;

    margin: 0;

  }

  #inner p {

    margin-bottom: 10px;

    font-size: 20px;

  }

  #inner hr {

    margin: 20px 0;

    border-style: solid;

    opacity: 0.1;

  }

  footer .stats {

    display: flex;

    font-size: 15px;

  }

  footer .stats strong {

    font-size: 18px;

  }

  footer .stats .likes {

    margin-left: 10px;

  }

  footer .cta {

    margin-left: auto;

  }

  footer .cta button {

    border: 0;

    background: transparent;

  }

</style>

<header>

  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">

  <div class="profile-name">

    <h3>Quincy Larson</h3>

    <h4>@ossia</h4>

  </div>

  <div class="follow-btn">

    <button>Follow</button>

  </div>

</header>

<div id="inner">

  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>

  <span class="date">1:32 PM - 12 Jan 2018</span>

  <hr>

</div>

<footer>

  <div class="stats">

    <div class="Retweets">

      <strong>107</strong> Retweets

    </div>

    <div class="likes">

      <strong>431</strong> Likes

    </div>

  </div>

  <div class="cta">

    <button class="share-btn">Share</button>

    <button class="retweet-btn">Retweet</button>

    <button class="like-btn">Like</button>

  </div>

</footer>

justify-content property set to any of these values: center, flex-start, flex-end, space-between, space-around, or space-evenly.

Activity 생명주기

존재하지 않음 -> onCreate() -> onStart -> onResume -> onPause() -> onStop() -> onDestroy -> 존재하지 않음

Problem 1 : 

If Android Emulator screen does not flip to landscape mode, check if flipping is blocked on avd manager.

allow flipscreen on avd manager.

-----------------

Basic web.xml settings you need

1. welcome file list for start up

<welcome-file-list>

<welcome-file>/</welcome-file>

</welcome-file-list>

2. for database access

<context-param>

<param-name>contextConfigLocation</param-name>

<param-value>/WEB-INF/spring/root-context.xml</param-value>

</context-param>

3. to read other languages beside english

<filter>

<filter-name>encodingFilter</filter-name>

<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>

<init-param>

<param-name>encoding</param-name>

<param-value>utf-8</param-value>

</init-param>

<init-param>

<param-name>listings</param-name>

<param-value>true</param-value>

</init-param>

</filter>

<filter-mapping>

<filter-name>encodingFilter</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

4. Setting path way from servlet-context.xml

<servlet>

<servlet-name>action</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<init-param>

<param-name>contextConfigLocation</param-name>

<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>action</servlet-name>

<url-pattern>/</url-pattern>

</servlet-mapping>

5. etc

<listener>

<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

</listener>

----------

setting path for servlet-context.xml

1. enables annotations

<annotation-driven />

<context:annotation-config/>

<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->

<resources mapping="/resources/**" location="/resources/" />

<resources mapping="/style/**" location="/style/"/>

<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->

<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">

<beans:property name="prefix" value="/WEB-INF/jsp/" />

<beans:property name="suffix" value=".jsp" />

</beans:bean>

<context:component-scan base-package="com.test.taewon">

<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>

        <context:include-filter type="annotation" expression="org.springframework.stereotype.Service"/>

        <context:include-filter type="annotation" expression="org.springframework.stereotype.Repository"/>

</context:component-scan>

-----

root-context.xml

<context:property-placeholder

location="classpath:/mybatis/config/datasource.properties" />

<context:annotation-config />

<bean id="dataSource"

class="org.springframework.jdbc.datasource.DriverManagerDataSource">

<property name="driverClassName" value="${driver}" />

<property name="url" value="${url}" />

<property name="username" value="${id}" />

<property name="password" value="${pw}" />

</bean>

<bean id="sqlSessionFactoryBean"

class="org.mybatis.spring.SqlSessionFactoryBean">

<property name="dataSource" ref="dataSource" />

<property name="mapperLocations"

value="classpath:/mybatis/mappers/*Mapper.xml" />

<property name="typeAliasesPackage"

value="com.test.taewon.vo" />

</bean>

<bean id="sqlSession"

class="org.mybatis.spring.SqlSessionTemplate">

<constructor-arg index="0" ref="sqlSessionFactoryBean"></constructor-arg>

</bean>

<bean id="TransactionManager"

class="org.springframework.jdbc.datasource.DataSourceTransactionManager">

<property name="dataSource" ref="dataSource"></property>

</bean>

<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">

<property name="basePackage" value="com.test.taewon.mapper"></property>

</bean>

----

datasource.properties stuff:

dbname=mysql

driver=com.mysql.cj.jdbc.Driver

url=jdbc:mysql://localhost:3306/taewonboard?serverTimezone=UTC

id=

pw=