Menu

Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Wednesday, August 5, 2020

[Javascript] จุดสามจุดใน Javascript หมายถึงอะไร
[Javascript] What is Three Dot in Javascript

หลังจากรีวิวโค้ด Typescript แล้ว พบโค้ดตามข้างล่างนี้

ทำให้เกิความสงสัยว่า ... (จุดสามจุด) หน้าชื่อตัวแปรนั้นมีความหมายอย่างไร

เมื่อหาข้อมูลเพิ่มเติม จุดสามจุดหน้าชื่อตัวแปรนั้นมีใช้อยู่ 2 แบบ ดังนี้

Rest Parameters

ใช้รับค่าแทน parameter ที่เหลืออยู่ นอกเหนือจาก parameter อื่นๆที่มีการกำหนดตัวแปรมารับ โดยตัวแปรนี้จะเป็น array ของ parameter

ตัวอย่าง เช่น
function test(...params){
    console.log(params)
}
function test2(a, b, ...params){
    console.log(params)
}
test(1, 2, 3, 4)  // [1, 2, 3, 4]
test2(1, 2, 3, 4)  // [3, 4]

Spread Operators

ใช้กระจาย item ใน array ออกมา

ตัวอย่าง เช่น
var input = [1, 2, 3, 4]
[...input, 5, 6]  // [1, 2, 3, 4, 5, 6]

อ้างอิงจาก https://dev.to/sagar/three-dots---in-javascript-26ci

Thursday, February 27, 2020

[Blogger][แก้ไขเพิ่มเติม] การทำ Code Snippet สำหรับ Blogger ที่เป็น HTTPS
[Blogger][Updated] How to Make Code Snippet for Blogger (HTTPS version)

จากโพสต์ [Blogger] การทำ code snippet สำหรับ Blogger ที่เป็น HTTPS ที่เรียกใช้ resource จาก https://agorbatchev.typepad.com ปรากฏว่า เมื่อเวลาผ่านไป มีบาง resource ที่ไม่สามารถเรียกใช้ได้ เช่น shThemeDefault.css เป็นต้น

เราจึงนำไฟล์ resource ทั้งหมดที่จำเป็นต้องใช้ไปไว้ที่ GitHub แล้วทำการเปิด GitHub Pages สำหรับ repository นี้

หลังจากนั้นแก้ไขการเรียกใช้ resource จาก GitHub แทนดังนี้
  1. เข้าไปที่ Theme 
  2. กดปุ่ม Edit HTML ภายใต้ Live on Blog
  3. Copy script ด้านล่างไปใส่ไว้ในส่วนของ head ของ theme
  4. <link href='https://arzeroid.github.io/syntaxhighlighter_css_js/css/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='https://arzeroid.github.io/syntaxhighlighter_css_js/css/shThemeDefault.css' rel='stylesheet' type='text/css'/>
     
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shCore.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushBash.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushCpp.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushCSharp.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushCss.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushJava.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushJScript.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPlain.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPhp.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPython.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushRuby.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushSql.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushVb.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushXml.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPerl.js' type='text/javascript'/>
    <script language='javascript'>
        SyntaxHighlighter.config.bloggerMode = true;    
        SyntaxHighlighter.all();
    </script>
    
  5. กดปุ่ม Save theme
  6. ใส่ code ตามด้านล่างในส่วนของ HTML ของ Post
  7. <pre class="brush: html">
        <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
        <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    </pre>
    
หมายเหตุ: เราไม่จำเป็นต้องใส่ brush ทุกอันในข้อ 3 สามารถเลือกเฉพาะอันที่ใช้เท่านั้นได้ สำหรับ brush เพิ่มเติม สามารถดูได้จาก http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

[GitHub] การสร้างเว็บไซต์จาก Repository บน GitHub
[GitHub] How to Create Website from Repository on GitHub

  1. สร้าง Repository บน GitHub
  2. เพิ่มไฟล์สำหรับหน้าเว็บ เช่น index.html, ไฟล์ CSS, ไฟล์ JS เป็นต้น ใน repository นั้น
  3. เข้าไปที่แท็บ Settings ของ repository นั้น
  4. เลื่อนลงไปยังส่วนของ GitHub Pages
  5. เลือก Source เป็น branch ที่เราเพิ่มไฟล์เข้าไปตามข้อ 2
  6. เรียกหน้าเว็บผ่าน URL ในรูปแบบดังนี้
  7. https://<username>.github.io/<repository_name>/<file_path>
    
    เช่น
    https://arzeroid.github.io/syntaxhighlighter_css_js/css/shThemeDefault.css

Friday, August 30, 2019

[Blogger] การทำ code snippet สำหรับ Blogger ที่เป็น HTTPS
[Blogger] How to Make Code Snippet for Blogger (HTTPS version)

  1. เข้าไปที่ Theme 
  2. กดปุ่ม Edit HTML ภายใต้ Live on Blog
  3. Copy script ด้านล่างไปใส่ไว้ในส่วนของ head ของ theme
  4. <link href='https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
     
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushBash.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCpp.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCSharp.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPython.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushRuby.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushVb.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' type='text/javascript'/>
    <script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPerl.js' type='text/javascript'/>
    <script language='javascript'>
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.config.clipboardSwf = &#39;https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/clipboard.swf&#39;;
        SyntaxHighlighter.all();
    </script>
    
  5. กดปุ่ม Save theme
  6. ใส่ code ตามด้านล่างในส่วนของ HTML ของ Post
  7. <pre class="brush: html">
        <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
        <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    </pre>
    
หมายเหตุ: เราไม่จำเป็นต้องใส่ brush ทุกอันในข้อ 3 สามารถเลือกเฉพาะอันที่ใช้เท่านั้นได้ สำหรับ brush เพิ่มเติม สามารถดูได้จาก http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Thursday, April 11, 2019

[Blogger] การทำ Code Snippet สำหรับ Blogger ที่เป็น HTTP
[Blogger] How to Make Code Snippet for Blogger (HTTP Version)

  1. เข้าไปที่ Theme 
  2. กดปุ่ม Edit HTML ภายใต้ Live on Blog
  3. Copy script ด้านล่างไปใส่ไว้ในส่วนของ head ของ theme
  4. <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
    <script language='javascript'>
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
        SyntaxHighlighter.all();
    </script>
    
  5. กดปุ่ม Save theme
  6. ใส่ code ตามด้านล่างในส่วนของ HTML ของ Post
  7. <pre class="brush: html">
        <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
        <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    </pre>
    
หมายเหตุ: เราไม่จำเป็นต้องใส่ brush ทุกอันในข้อ 3 สามารถเลือกเฉพาะอันที่ใช้เท่านั้นได้ สำหรับ brush เพิ่มเติม สามารถดูได้จาก http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Friday, November 29, 2013

[JS] วิธีการส่งไฟล์และข้อมูลจากฟอร์มโดยไม่ใช้การส่งค่าจากฟอร์ม
[JS] How to Send File with Form Data without Form Submission

jQuery และ Ajax ถูกใช้อัพโหลดไฟล์จากฟอร์ม HTML ไปยังเซิร์ฟเวอร์โดยไม่ใช้การส่งค่าจากฟอร์ม
jQuery and Ajax is used to upload file from HTML form to server without form submission

สมมติว่า ฟอร์ม HTML เป็นตามด้านล่าง
Assume that HTML form is below
<form id="form-id" action="upload.php" enctype="multipart/form-data" method="post">
     <table style="width: 100%;">
          <tbody>
               <tr>
                    <th><label for="id_path_program">Path program:</label></th>
                    <td><input id="id_path_program" name="path_program" type="file"></td>
               </tr>
               <tr>
                    <th><label for="id_description">Description:</label></th>
                    <td><input id="id_description" maxlength="250" name="description" type="text"></td>
               </tr>
          </tbody>
     </table>
     <input type="submit" value="Upload"/>
</form>