시간과 공간 그리고 진실의 방

오늘은 JavaScript의 형변환에 대해서 알아보겠습니다. 하는 법이 있다는 것은 알고있는데 머리에 다 담고 살기는 너무 어려운 것 같습니다. 그러니 공부방에 정리해 놓아야 겠습니다.

일단 먼저 자바스크립트에서 변수를 선언하는 것부터 알아보겠습니다.

var 변수 = 10;

위에서 선언한 내용은 변수를 숫자 10으로 선언하는 것입니다.

var 변수 = "10";

얼핏보면 같은 것으로 생각 할수도 있지만 언어를 공부하신 분이라면 다들 눈치 채셨을 겁니다. 이번엔 변수를 문자열 10으로 선언하는 것입니다.

기존의 Java 같은 경우는 int 변수, String 변수 등 해당하는 형으로 선언하는 것이 맞지만 자바스크립트는 조금 다릅니다. 일단 모든 변수를 var로 선언 가능합니다.

- 문자형을 숫자형으로 변환하기

var 변수 = parseInt(문자);    //문자를 정수형 숫자로 변환해줌

var 변수 = parseFloat(문자);     //문자를 실수형 숫자로 변환해줌

var 변수 = Nember(문자);    //문자를 정수&실수형 숫자로 변환해줌

예제)

var x = "999";    //문자형 999

var y = "99.99";    //문자형 99.99

var a = parseInt(x);    //숫자형 정수 999

var b = parseInt(y);    //숫자형 정수 99

var a = parseFloat(x);    //숫자형 실수 999

var b = parseFloat(y);    //숫자형 실수 99.99

var a = Number(x);    //숫자형 정수 999

var b = Number(y);    //숫자형 실수 99.99

var x = "a999";    //문자형 a999

var y = "a99.99";    //문자형 a99.99

var a = parseInt(x);    //숫자형 NaN

var b = ParseInt(y);    //숫자형 NaN

var a = parseFloat(x);    //숫자형 NaN

var b = parseFloat(y);    //숫자형 NaN

var a = Number(x);    //숫자형 NaN

var b = Number(y);    //숫자형 NaN

※ 문자열 맨앞에 문자로 시작하면 형변환을 해도 값을 인식하지 못한다.

var x = "999a9";    //문자열 999a9

var y = "99.9a9";    //문자열 99.9a9

var a = parseInt(x);    //숫자형 999

var b = parseInt(y);    //숫자형 99

var a = parseFloat(x);    //숫자형 999

var b = parseFloat(y);    //숫자형 99.9

var a = Number(x);    //숫자형 NaN

var b = Number(y);    //숫자형 NaN

- 숫자형을 문자형으로 변환하기

var 변수 = String(숫자);    //숫자를 문자로 변환해줌

var 변수 = 숫자.toString(진법);    //숫자를 문자로 변환해줌 - 변환하면서 진법을 바꿀 수 있음

var 변수 = 숫자.toFixed(소수자리수);    //숫자를 문자로 변환해줌 - 실수형의 소수점 자리를 지정할 수 있음

var 변수 = 숫자 + "문자열";    //숫자와 문자열을 한 문자열로 더해줌

var x = 123;    //숫자형 123

var a = String(x);    //문자형 123

var a = x.toString();    //문자형 123

var a = x.toString(2);    //문자형 1111011(2진법)

var a = x.toString(16);    //문자형 7b(16진법)

var a = x.toFixed();    //문자형 123

var a = x.toFixed(1);    //문자형 123.0

var y = 99.999;    //숫자형 99.999

var a = x.toFixed();    //문자형 99

var a = x.toFixed(1);    //문자형 99.9

var a = x.toFixed(3);    //문자형 99.999

var a = x.toFixed(4);    //문자형 99.9990

확률을 표현해줄 때 유용하다.

var z = 9;    //숫자형 9

var a = a + "ElNino Torres";    //문자형 9ElNino Torres

이정도만 알고 있어도 자바스크립트를 사용하는데 편리할 듯 싶습니다. 추후에 기회가 되면 다른 메소드들도 알아보도록 해야겠습니다.

자바스크립트를 사용하여 숫자의 자리수(자릿수)를 구하려면 어떤 방법이 있을까요? 아래에서 숫자가 몇 자리인지를 구하는 방법을 알아봅니다.

먼저 예를들어봅니다. 만약 12 또는 10,000이라는 숫자가 있는 경우 자릿수를 아래처럼 반환되도록 가져오려면 어떻게 할까요?

Ex) 12 -> 2를 반환 (2자리)
Ex) 10,000 -> 5를 반환 (5자리)


위와같이 숫자가 몇 자리인지 알아낸 후 그 결과를 반환하는 숫자만 가져오려고 합니다...


# 자바스크립트로 숫자의 자릿수 구하기가장 간단한 방법은 숫자를 문자로 바꾼후 해당 문자의 길이를 얻는 것입니다. 이 방법은 매우 쉬운데 문자 타입인 경우 문자열의 길이를 length를 사용해 가져올 수 있다는 점을 이용합니다. 아래 코드를 봐주세요.

var num = 12345;
num = num.toString();
numDigit = num.length;
console.log(numDigit);

실행하면 5를 출력합니다. 가장 간단합니다.


# 숫자를 문자로 바꾼 후 index의 값이 존재하는지를 확인하는 방법위 방법처럼 숫자를 바꾸나 length가 아닌 해당 위치에 값이 존재하는지의 여부로 자릿수를 찾는 방법입니다.

function getDigit(num) {
  num = num.toString();
  var i=0;
  while(num[i]) { i++; };
  return i;
}

위 함수는 해당 숫자의 자릿수를 반환합니다. 그럼 아래에서 직접 숫자를 입력 후 확인해보세요.

 getDigit(num)

Result: 

Updated: September 19, 2019

A client recently wanted to customize the product sort order of their WooCommerce products on the product category archive page. The archive used the default alphabetical sorting, but they had a few products that they wanted to be listed at the top of the category listing. Here’s how we did it.

Product Sorting Options

WooCommerce offers the ability to customize the sorting order of products with a few settings changes.

Go to Appearance > Customize in your WordPress admin. Once the Customizer opens, go to WooCommerce > Product Catalogue. This is where you will find your options for sorting products. Ensure that Default Product Sorting is set to “Default sorting (custom ordering + name)”. Publish the new settings and then go to edit an individual product.

[In previous versions of WooCommerce, this is how you would get to that setting: Go to WooCommerce > Settings in your WordPress admin. On the Products tab, click on the Display settings.]

Custom Sorting

All custom sorting is applied against all items and not against separate categories. Keep this in mind if you have a page that displays all products. For this particular project, the product pages were separated by category, so the sorting options didn’t need to be as detailed as others may need.

From the Products admin panel, you can select Sorting and then drag and drop your products in the specific order that you’d like. You can also order the products in the Quick Edit menu by changing the “Order” value. All items default to the value zero. The custom order displays the lower numbers first. You can also edit the order value in the Product Data > Advanced tab on the product edit page.

Move Specific Products to the Top

If you want to custom sort each and every product, you may do so. If you simply want to move a few select items to the top of the list, there is an easy way to do that.

Enter a negative number in the “Order” field of the product. By using a negative number, the item will have a lower value than the default “0” and therefore will show above those items. If you want to lump a group of products together and have WooCommerce sort them alphabetically, just use the same “order” value.

Conclusion

WooCommerce is a powerful e-commerce solution for WordPress and provides lots of ways to customize your online store.

Need Help with WooCommerce?

We offer web development services for WooCommerce and can build a custom WooCommerce extention that meets your exact needs.

In Gravity Forms 1.5 we're adding some new "Ready Classes". Using these new classes, you can easily create more advanced alternative layouts for the fields in your forms.

Essentially, Ready Classes are class names that you can add to the parent element surrounding each field to take advantage of pre-defined styles included in the default form stylesheet.

How to Use Ready Classes

To add a Ready Class to a field, just edit your form in the Form Builder and then select the field you want to add the classes to. Under the "Advanced" tab, you’ll see an input called "CSS class name". Add the Ready Class name or names you want to add to the field here and then save the form.

Please note that this feature does NOT update live in the Form Builder. After you specify your Ready Class names, just save the form and you’ll see the classes being applied to your form in the preview window and on the live site.

The Ready Class Names

Here are the Ready Classes that are built in the Gravity Forms default stylesheet that you can use right away without having to write any of your own CSS.

Halves (2 Columns)

Note: These only work with the "top label" form layout option.

gf_left_half

This places the field in the left column (left half) of a 2 column layout. This only work with the "top label" form layout option.

gf_right_half

This places the field in the left column (right half) of a 2 column layout. This only work with the "top label" form layout option.

To align two fields side by side (2 equal columns) you can add these classes. The two fields have to be adjacent to each other in the Form Builder. The gf_left_half class has to be added to the first field and the gf_right_half class to the second field.

Example:

Thirds (3 Columns)

gf_left_third

This places the field in the left column (left third) of a 3 column layout. This only work with the "top label" form layout option.

gf_middle_third

This places the field in the middle column (middle third) of a 3 column layout. This only work with the "top label" form layout option.

gf_right_third

This places the field in the right column (right third) of a 3 column layout. This only work with the "top label" form layout option.

To align three fields side by side (3 equal columns) you can add these classes. The three fields have to be adjacent to each other in the Form Builder. The gf_left_third class has to be added to the first field, the gf_middle_third class to the second field and the gf_right_third class to the third field.

Example:

List Classes

gf_list_2col

This turns a multiple choice/checkbox list into an equally-spaced 2 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_3col

This turns a multiple choice/checkbox list into an equally-spaced 3 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

Example:

gf_list_4col

This turns a multiple choice/checkbox list into an equally-spaced 4 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_5col

This turns a multiple choice/checkbox list into an equally-spaced 5 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_inline

This turns a multiple choice/checkbox list into an inline horizontal list (not evenly spaced columns). This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

Example:

gf_list_height_25

This applies a 25px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_50

This applies a 50px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_75

This applies a 75px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_100

This applies a 100px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_125

This applies a 125px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_150

This applies a 150px height value all multiple choice/checkbox items in that list. This can be useful to avoid "hanging floats" caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

Other Classes

gf_scroll_text

This converts a section break field into a box with a fixed height that will automatically show a scroll bar if there’s a large amount of text. This is useful if you’re wanting to show large amounts of content to the user, but don’t want to have to link to it or make the form very long to show it (Terms of Service Agreements, etc). This class only works on section breaks and works with any of the form label position settings.

Example:

gf_hide_ampm

This hides the am/pm selector in the time field- this only hides the field on the form, not in the form entry table. This works with any of the form label position settings.

gf_hide_charleft

This hides the characters left counter beneath paragraph text fields when using the maximum characters option. This works with any of the form label position settings.

Q & A

Can I use multiple classes on the same field?

Yes, you can use multiple classes together. Just separate each class name by a space. Note: This doesn't work for all of the styles, but many can be combined if they're applicable to the field type. For example, you may have a 2 column primary layout, and want to use 2 column list layouts within the columns.

Can I create my own classes?

Yes, the classes are added to the parent <li> element surrounding a field so you can define your own class name and add your own rules to your theme stylesheet based on that class name being added to the field.

Notes

You can also see an example of several of these classes applied in one form here.

One final note. As with any CSS rules, your particular theme CSS may override or supersede some of these styles. They've been tested in a variety of themes and work well, but you may have to make some adjustments to your theme styles for everything to work properly.