<h2>What's great about TypeScript</h2>

<h3>Starts and ends with JavaScript</h3>

TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today. Use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript code from JavaScript.

TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer).

<h3>Strong tools for large apps</h3>

Types enable JavaScript developers to use highly-productive development tools and practices like static checking and code refactoring when developing JavaScript applications.

&nbsp;

Types are optional, and type inference allows a few type annotations to make a big difference to the static verification of your code. Types let you define interfaces between software components and gain insights into the behavior of existing JavaScript libraries.

<h3>State of the art JavaScript</h3>

TypeScript offers support for the latest and evolving JavaScript features, including those from ECMAScript 2015 and future proposals, like async functions and decorators, to help build robust components.

These features are available at development time for high-confidence app development, but are compiled into simple JavaScript that targets ECMAScript 3 (or newer) environments.

Learn more at&nbsp;<a href="http://typescript.com/" target="_blank" rel="noreferrer noopener">typescript.com</a>!

<h2>What you will learn</h2>

<ul>
<li>Basic types</li>
<li>Classes</li>
<li>Exports/Imports</li>
</ul>

This Codelab is a prerequisite for the angular codelab (link TBD).

<div class="wp-block-button"><a class="wp-block-button__link" href="https://angular-presentation.firebaseapp.com/typescript/intro" target="_blank" rel="noopener noreferrer">Launch the CodeLab</a></div>

TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today. Use existing JavaScript code, incorporate popular JavaScript libraries...

Basics of TypeScript - TCMHACK

Basics of TypeScript

Uploading files on AWS S3 is very easy with AWS Javascript SDK. We're going to upload files to S3 in some simple steps.
Before going to next steps, I'm assuming you already have a file stored in fileToBeUpload variable in Javascript.
Let's Begin.
<h3>Step 1: Add the AWS SDK into the head section of your file.</h3>
<pre class="wp-block-preformatted">&lt;script src="<a href="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js">https://sdk.amazonaws.com/js/aws-sdk-2.207.0.min.js</a>"&gt;&lt;/script&gt; </pre>
<h3>Step 2: Initiate the AWS Configuration.</h3>
There are two to initialize the AWS Configuration.
A. By using the AWS Key &amp; Secret Key but it is not advisable to display your keys directly on page.
<pre class="wp-block-preformatted">&lt;script type="text/javascript"&gt;
&nbsp; &nbsp; AWS.config.update({
&nbsp; &nbsp; &nbsp; &nbsp; accessKeyId: 'AWS_ACCESS_KEY',
&nbsp; &nbsp; &nbsp; &nbsp; secretAccessKey: 'AWS_SECRET_KEY',
 region: 'AWS_REGION'
&nbsp; &nbsp; });
&lt;/script&gt;</pre>
B. By using the AWS Identity Pool Id (I recommand using the identityPoolId)
<pre class="wp-block-preformatted">&lt;script type="text/javascript"&gt;
&nbsp; &nbsp; AWS.config.update({
&nbsp; &nbsp; &nbsp; &nbsp; credentials: new AWS.CognitoIdentityCredentials({
 IdentityPoolId: 'AWS_Identity_Pool_Id'
 }),
 region: 'AWS_REGION'
&nbsp; &nbsp; });
&lt;/script&gt;</pre>
<h3>Step 3: Lets start the uploading</h3>
<div>
<pre>var bucketName = "AWS_BUCKET_NAME"; var fileToBeUpload = "FILE_TO_BE_UPLOAD"; var filePath = "demo/user_uploaded/"; // File will be saved to this folder on aws s3. // Initialize the AWS Object var bucket = new AWS.S3({ apiVersion: "2006-03-01", params: { Bucket: bucketName }, }); var params = { Key: filePath, ContentType: fileToBeUpload.type, Body: fileToBeUpload, ContentDisposition: "attachment", // if you want to enable file download via public url. }; /* turn off the timeout (Optional) */ AWS.config.httpOptions.timeout = 0; // upload file bucket.upload(params).on("httpUploadProgress", function (evt) { var uploaded = Math.round((evt.loaded / evt.total) * 100); console.log("File uploaded", uploaded, "%"); }) .send(function (err, data) { if (err) { // an error occurred, handle the error console.log(err, err.stack); return; } var fileUrl = data.Location; console.log("File URL:", fileUrl); alert("File is uploaded successfully!"); });</pre>
</div>
To upload the file successfully, you need to enable CORS configuration on S3.
Please comment below if you have any question.

Uploading files on AWS S3 is very easy with AWS Javascript SDK. We're going to upload files to S3 in some simple steps...

AWS S3 file upload with progress bar using javascript sdk - TCMHACK

AWS S3 file upload with progress bar using javascript sdk

Generally, the&nbsp;jQuery toggle()&nbsp;method is used to show and hide the HTML element on the web page. But if you don&rsquo;t want to use the jQuery library, the toggle effect can be easily added using JavaScript. Using JavaScript you can check the visibility of an element and show/hide the HTML element based on their visibility. The following code snippet checks the visibility and toggle between show &amp; hide the HTML element with JavaScript.
<ul class="bullet_disk_list">
<li>Use JavaScript&nbsp;style display&nbsp;property to check whether an element is hidden.</li>
<li>If the element is invisible, display it, otherwise hide it.</li>
</ul>
<pre>var element = document.getElementById('elementID');
if(element.style.display === "none"){
 element.style.display = "block";
} else {
 element.style.display = "none";
}</pre>
The following code snippet shows how you can hide and show the HTML element using JavaScript. JavaScript The toggle() function toggle display of the HTML element using JavaScript.
<ul class="bullet_disk_list">
<li>Pass the element ID which you want to show/hide based on the visibility.</li>
</ul>
<pre>&lt;script&gt;
 function toggle(ID){
 var element = document.getElementById(ID);
 if(element.style.display === "none"){
 element.style.display = "block";
 }else{
 element.style.display = "none";
 }
 }
&lt;/script&gt;</pre>
HTML Call the&nbsp;<code>toggle('elementID')</code>&nbsp;on click event to show/hide the DIV element.
<pre>&lt;button onclick="toggle('divID')"&gt;Toggle Hide/Show&lt;/button&gt;

&lt;div id="divID"&gt;
 This is a DIV element.
&lt;/div&gt;</pre>

Generally, the jQuery toggle() method is used to show and hide the HTML element on the web page. But if you don’t want to use the jQuer...

How to Toggle (Show/Hide) Element using JavaScript - TCMHACK

How to Toggle (Show/Hide) Element using JavaScript

Before submitting the user&rsquo;s input to the server-side, it&rsquo;s always a good approach to validate it on the client-side script. The Name input is a commonly used field for the HTML form of the web application. When you want the full name input from the user, the input value must be checked whether the user provides a valid name (first name and last name). Using JavaScript, the full name validation can be easily implemented in the form to check whether the user provides their first name and last name. The REGEX (Regular Expression) is the easiest way to validate Full Name (first name + last name) format in JavaScript. In the following code snippet, we will show you how to validate the first and last name with Regular Expression using JavaScript.
<ul class="bullet_disk_list">
<li>test()&nbsp;&ndash; This function is used to perform a regular expression match in JavaScript.</li>
</ul>
<pre>var regName = /^[a-zA-Z]+ [a-zA-Z]+$/;
var name = document.getElementById('nameInput').value;
if(!regName.test(name)){
 alert('Invalid name given.');
} else {
 alert('Valid name given.');
}</pre>
The following code snippet shows how you can validate the input field for the full name in HTML form using JavaScript.
<pre>&lt;p&gt;Full Name: &lt;input id="name" value=""&gt;&lt;/p&gt;
&lt;input type="button" onclick="validate();" value="Validate Name"&gt;</pre>
<pre>&lt;script&gt;
function validate(){
 var regName = /^[a-zA-Z]+ [a-zA-Z]+$/;
 var name = document.getElementById('name').value;
 if(!regName.test(name)){
 alert('Please enter your full name (first &amp; last name).');
 document.getElementById('name').focus();
 return false;
 } else {
 alert('Valid name given.');
 return true;
 }
}
&lt;/script&gt;</pre>

Before submitting the user’s input to the server-side, it’s always a good approach to validate it on the client-side script. The Name input is a ...

How to Validate First and Last Name with Regular Expression using JavaScript - TCMHACK

How to Validate First and Last Name with Regular Expression using JavaScript

When you working with the image dimensions, it’s always recommended to get the real width and height of the image. The naturalWidth and naturalHeight property provide an easy way to retrieve the original dimensions of the image using JavaScript. You can easily get the original size (width and height) of the image using JavaScript.

naturalWidth
Assume that you have an image which is originally 250px wide and you make it 550px wide by CSS style or HTML “width” property. The naturalWidth will return the original width 250 although the display width is 550.

naturalHeight
Assume that you have an image which is originally 100px high and you make it 250px high by CSS style or HTML “height” property. The naturalHeight will return the original height 100 although the display height is 250.
<pre>&lt;img src="tcmhack.png" id="image" width="500px" /&gt;</pre>
<pre>// HTML DOM image
var image = document.getElementById('image');

// image original width
var originalWidth = image.naturalWidth;

// image original height
var originalHeight = image.naturalHeight;</pre>
Get Real Image Dimensions by Button Click
The following code snippet shows how you can get the original size (width and height) of the image using JavaScript.
<pre>&lt;img src="tcmhack.png" id="image" width="500px" /&gt;

&lt;button onclick="getOriginalSize()"&gt;Get Dimensions&lt;/button&gt;
</pre>
<pre>function getOriginalSize(){ 
 var image = document.getElementById('image');
 
 var originalWidth = image.naturalWidth; 
 var originalHeight = image.naturalHeight;
 
 alert("Original width=" + originalWidth + ", " + "Original height=" + originalHeight);
}</pre>

When you working with the image dimensions, it’s always recommended to get the real width and height of the image. The naturalWidth and naturalHe...

How to Get Image Original Dimensions (Width & Height) using JavaScript - TCMHACK

How to Get Image Original Dimensions (Width & Height) using JavaScript

The&nbsp;window.onload&nbsp;event is very useful when you want to call a JavaScript function on page load without using jQuery. Generally,&nbsp;$( document ).ready()&nbsp;is used to execute the JavaScript code after Document Object Model (DOM) is ready. You can use the&nbsp;window.onload&nbsp;to load a function after page load using JavaScript. In the example code snippet, we will show you how to call function and execute code on page load using JavaScript.

The following code calls a JavaScript function named&nbsp;<code>showDelay()</code>&nbsp;on page load using window.onload event.
<pre>function showDelay(){
 //code goes here
}

// call function on page load
window.onload = showDelay;</pre>
The following code calls a JavaScript function with parameter on page load using window.onload event.
<pre>function showDelay(type){
 //code goes here
}

// call function with parameter
window.onload = function () {
 showDelay(2);
};</pre>

The&nbsp;window.onload&nbsp;event is very useful when you want to call a JavaScript function on page load without using jQuery. Generally,&nbsp;$...

How to Call a JavaScript Function on Page Load without using jQuery - TCMHACK

How to Call a JavaScript Function on Page Load without using jQuery

Are you want to prevent visitors from copying your web page content? In this short&nbsp;<a href="https://jquery.com/" target="_blank" rel="noopener">jQuery</a>&nbsp;article, we&rsquo;ll show you how to stop content theft from your website using jQuery. For stopping the content copy of your website you can do two things, one is to disable the mouse right click and second is to disable the cut (CTRL+X), copy (CTRL+C) and paste (CTRL+V). Using of jQuery, you can easily disable&nbsp;mouse right click&nbsp;and disable&nbsp;cut,&nbsp;copy&nbsp;and&nbsp;paste&nbsp;from web content. At first include the jQuery library.
<pre>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</pre>
<h2>Disable Mouse Right Click</h2>
Disable mouse right click will prevent visitors from choosing the cut, copy and paste options. If you want to disable right mouse click for a particular section of a web page, then you can use a selector (<code>#id</code>,&nbsp;<code>.class</code>, etc.) otherwise use&nbsp;<code>body</code> selector for the full page. The following JavaScript code is used to disable mouse right click.
<pre>&lt;script type="text/javascript"&gt; &nbsp; $(document).ready(function () { &nbsp; &nbsp; //Disable full page &nbsp; &nbsp; $("body").on("contextmenu", function (e) { &nbsp; &nbsp; &nbsp; return false; &nbsp; &nbsp; }); &nbsp; &nbsp; //Disable part of page &nbsp; &nbsp; $("#id").on("contextmenu", function (e) { &nbsp; &nbsp; &nbsp; return false; &nbsp; &nbsp; }); &nbsp; }); &lt;/script&gt;</pre>
<h2>Disable Cut Copy &amp; Paste</h2>
The following JavaScript code will disable cut, copy and paste from your web page or a part of your web page.
<pre>&lt;script type="text/javascript"&gt; &nbsp; $(document).ready(function () { &nbsp; &nbsp; //Disable full page &nbsp; &nbsp; $("body").bind("cut copy paste", function (e) { &nbsp; &nbsp; &nbsp; e.preventDefault(); &nbsp; &nbsp; }); &nbsp; &nbsp; //Disable part of page &nbsp; &nbsp; $("#id").bind("cut copy paste", function (e) { &nbsp; &nbsp; &nbsp; e.preventDefault(); &nbsp; &nbsp; }); &nbsp; }); &lt;/script&gt;</pre>
<h2>Disable Mouse Right Click, Cut, Copy &amp; Paste</h2>
Full JavaScript code for disabling mouse right click and disable cut (CTRL+X), copy (CTRL+C) and paste (CTRL+V) from the web page.
<pre>&lt;script type="text/javascript"&gt; &nbsp; $(document).ready(function () { &nbsp; &nbsp; //Disable cut copy paste &nbsp; &nbsp; $("body").bind("cut copy paste", function (e) { &nbsp; &nbsp; &nbsp; e.preventDefault(); &nbsp; &nbsp; }); &nbsp; &nbsp; //Disable mouse right click &nbsp; &nbsp; $("body").on("contextmenu", function (e) { &nbsp; &nbsp; &nbsp; return false; &nbsp; &nbsp; }); &nbsp; }); &lt;/script&gt;</pre>

Are you want to prevent visitors from copying your web page content? In this short jQuery article, we’ll show you how to stop content t...