পৃষ্ঠাসমূহ
Labels
Search Your Article
CS
Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.
At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.
What We Offer:
-
📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.
-
💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.
-
🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.
-
🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.
✔ Latest world News
Our Vision
To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.
Why Choose Us?
✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing
We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.
📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.
Pageviews
Saturday, February 18, 2017
Framework7 - Preloaders
Description
Preloader in Framework7 is made with Scalable Vector Graphic (SVG) and animated with CSS which makes it easily resizable. Preloader is available in two colors:- the default is light background
- another one is dark background
Framework7 - Progress Bar
Description
The progress bars can be used to show loading of assets or progress of a task to the users. You can specify the progress bar by using the progressbar class. When user doesn't know how long the loading process will be there for the request, you can use progressbar-infinite class.Framework7 - List Views
Description
List views are powerful UI components that presents data in a scrollable list of multiple rows. The Framework7 provides different types of List View to work with your application. The following table lists some of the Framework7 List View:Framework7 - Accordion
Description
The accordion is a graphical control element displayed as a stacked list of items. Each accordion can be expanded or stretched to reveal the content associated with that accordion.Framework7 - Cards
Description
Cards contains organized information related a single subject like a photo, link, and text. The below table shows Framework7 card types:Framework7 - Chips
Description
Chip is a small block of entity which can contain a photo, small string of title, and short information.Chips HTML Layout
The below code shows the basic chip HTML layout used in Framework7:<div class="chip"> <div class="chip-media">
Framework7 - Buttons
Description
Framework7 provides a group of ready to use buttons by just adding appropriate classes to links or input buttons.Framework7 - Action Button
Description
Framework7 provides floating action button for a promoted action. They appear as a floating circled icon over the UI. It has the motion behaviors that contain morphing, launching, and transferring an anchor point.Framework7 - Forms
Description
Forms are used for interactiong with users and collects data from the web users using text fields, checkboxes, radio buttons etc.Framework7 provides different types of form elements to work with the applications smoothly as specified in the table below:
Framework7 - Tabs
Description
Tabs are sets of logically grouped content that allow us to quickly flip between them to and saves the space like accordions.Framework7 - Swiper Slider
Description
The swiper slider is most powerful and modern touch slider and comes into Framework7 with lots of features.The following HTML layout shows the swiper slider:
<!-- Container class for slider --> <div class="swiper-container"> <!-- Wrapper class for slider -->
Framework7 - Photo Browser
Description
Photo browser is similar to iOS photo browser component to display group of images which can be zoomed and panned. To slide between images, photo browser uses Swiper Slider.The below table shows photo browser types used in framework7:
Framework7 - Autocomplete
Description
Autocomplete is a Framework7's mobile friendly and touch optimized component which can be as dropdown or in standalone way. You can create and initialize Autocomplete instance by using the JavaScript method:myApp.autocomplete(parameters)Where parameters are required object used to initialize the Autocomplete instance.
Framework7 - Picker
Description
Picker looks like iOS native picker and it is a powerful component that allows you to pick any values from list and also used to create custom overlay pickers. You can use Picker as inline component or as overlay. The overlay picker will be automatically converted to Popover on tablets (iPad).Using below App’s method you can create and initialize JavaScript method:
Framework7 - Calendar
Description
Calendar component allows you to handle dates easily and can be used as inline or as overlay component. The overlay calendar will be converted to popover on tablets automatically.Framework7 - Refresh
Description
It is a special component used to refresh (reload) the page contents by pulling it.The following code shows how to refresh the page content:
<div class="page">
Framework7 - Infinite Scroll
Description
It allows to load additional content and performs required actions when page is near to the bottom.The following HTML layout shows the infinite scroll:
<div class="page"> <div class="page-content infinite-scroll" data-distance="100"> ... </div> </div>
Framework7 - Messages
Description
Messages are component of Framework7 which gives visualization of comments and messaging system in the application.Framework7 - Message Bar
Description
Framework7 provides special resizable toolbar to work with the messaging system in the application.The following code shows message bar layout:
<div class="toolbar messagebar"> <div class="toolbar-inner">
Framework7 - Notifications
Description
Notifications are used to show the required messages which appear like Push (or Local) iOS notifications.The below table demonstrates the use of notifications in details:
Framework7 - Lazy Load
Description
Lazy loading delays your image loading process on a given page. Lazy loading improves scrolling performance, speeds page load and save traffic.Lazy load elements and images must be inside of scrollable <div class="page-content"> to work properly.
Framework7 - Color Themes
Description
Framework7 provides different color themes for your applications.A color theme provides different types of theme colors used to work with the applications smoothly as specified in the table below:
Framework7 - Hairlines
Description
Hairline is a class that adds 1px border around images by using the border class. With the release of 1.x, hairlines revised the working with :after and :before pseudo elements instead of using CSS borders.Hairlines contains following rules:
Framework7 - Templates Overview
Description
Template7 is a lightweight mobile first JavaScript engine which represents Ajax and dynamic pages, as Template7 templates with specified context and do not require any additional scripts. Template7 is associated with Framework7 as default template engine which is a lightweight template engine which works faster for the applications.Framework7 - Auto Compilation
Description
In Template7 you can compile your templates automatically by specifying special attributes in a <script> tag.The following code shows auto compilation layout:
<script type="text/template7" id="myTemplate"> <p>Hello, my name is {{name}} and i am {{age}} years old</p> </script>You can use below attributes for initializing the auto compilation:
Framework7 - Template7 Pages
Description
Template7 is a mobile-first JavaScript template engine with handlebars.js like syntax. It is ultra lightweight and blazing fast default template engine in Framework7.First, we need to pass below parameter on app initialization that renders all Ajax and dynamic pages as Template7 template:
Framework7 - Active State
Description
To highlight links and buttons when you tab them, it will be done by active state in Framework7.- It behaves like a native app, not like a web app.
- It has built-in Fast clicks library and it should be enabled.
- The active-state class is same as CSS :active selector.
- Active state is enabled by adding watch-active-state class to <html> element.
Framework7 - Tap Hold Event
Description
Tap hold event is used to trigger (enable) after a sustained and complete the touch event so only, it is called tap hold event. The Tab Hold is a built-in Fast Clicks library.The following parameters are use to disabled, could be enabled and configured by default:
Framework7 - Touch Ripple
Description
Touch Ripple is an effect that is supported only in Framework7 material theme. By default, it is enabled in material theme and you can disable it by using the materialRipple:false parameter.Foundation - Overview
What is Foundation?
Foundation is one of the advanced front-end frameworks for designing beautiful responsive websites. It works on all types of devices and provides you with HTML, CSS and JavaScript plugins.Foundation - Installation
Download the Foundation
When you open the link foundation.zurb.com, you will get to see a screen as below -Foundation - Starter Projects
Foundation - Kitchen Sink
Description
It includes the Foundation elements to work with the web applications smoothly. Following table lists some of the Foundation components:Foundation - Global Styles
Foundation - Sass
Compatibility
To install SASS based version for foundation, Ruby has to be installed on Windows. Foundation can be compiled with Ruby Sass and libsass. We recommended node-sass 3.4.2+ version to compile SASS.Foundation - JavaScript
Installing
You can use ZIP download, package manager or CDN to get Foundation JavaScript file. In your code provide links to jQuery and Foundation using <script> tags. For more information click here.Foundation - JavaScript Utilities
Foundation - Media Queries
Foundation uses following media queries to create breakdown ranges:
Foundation - The Grid
Description
Foundation grid system scales up to 12 columns through the page. Grid systems are used to create page layouts through a series of rows and columns that house your content.Foundation - Flex Grid
Foundation - Forms
The below table list the form elements used in Foundation.
Foundation - Visibility Classes
Description
- Foundation uses visibility classes to show or hide elements based upon device orientation (portrait and landscape)or screen size (small, medium, large or xlarge screen).
- It allows user to use elements based on the browsing environment.
Foundation - Base Typography
Description
Typography in Foundation defines headings, paragraphs, lists and other inline elements which create attractive and simple default styles for elements.The Following table lists different types of typography used in the Foundation:
Foundation - Typography Helpers
The below table list Typography Helpers which are used in Foundation.
Foundation - Basic Controls
Below table list basic controls used in Foundation.
Foundation - Navigation
Description
Foundation provides a few different options for styling navigation elements. Many simple navigation patterns are bundled, it can be integrate in the form for robust responsive navigation solution.The following table describes different types of navigation along with description.
Foundation - Containers
Following table lists down some of the containers used in the Foundation:
Foundation - Media
Foundation - Plugins
Description
Plugin is a piece of software that provides additional functionality which was not originally completed by Foundation core functionality. Foundation Plugins can be uploaded to expand the functionality of the site. Plugins are used to make your work easier.Foundation - Sass Functions
You can import all utility files at a time by using below line of code:
@import 'util/util';or even you can import individual utility file as shown below:
@import 'util/color';
Foundation - Sass Mixins
Importing
It imports the contents of the SASS mixins which are placed under the scss/util/_mixins.scss file. You can import the SASS mixins by using below line of code:@import 'util/mixins';
Foundation - Motion UI
Description
Foundation provides Motion UI library for creating UI transitions and animations and used by Foundation components such as Toggler, Reveal and Orbit.Friday, February 17, 2017
Flex - Overview
What is Flex?
- Flex is a powerful, open source application framework which allows to build traditional applications for browser, mobile and desktop using the same programming model, tool, and codebase.
- Flex provides FLEX SDK consisting of the Flex class library
(ActionScript classes), the Flex compilers, the debugger, the MXML and
ActionScript programming languages, and other utilities to build
expressive and interactive rich internet applications (RIA)
Flex - Environment Setup
Flex - Applications
Flex - Create Application
Step 1 - Create Project
The first step is to create a simple Flex Project using Flash Builder IDE. Launch project wizard using the option File > New > Flex Project. Now name your project as HelloWorld using the wizard window as follows:Flex - Deploy Application
Flex - Style with CSS
Way #1: Using external style sheet file
You can refer to a style sheet available in the class path of the application. For example consider Style.css file in com/tutorialspoint/client folder where HelloWorld.mxml file also lies.Flex - Style with Skin
What is Skining?
- Skinning in Flex, is a process of customizing look and feel of a UI Component completely.
- A Skin can define text, image, filters , transitions and states of a compoent.
- A Skin can be created as a seperate mxml or ActionScript component.
- Using skin, we can control all visual aspects of a UI component.
- The process of defining skin is same for all the UI component.
Flex - Data Binding
What is Data Binding?
Data Binding is a process in which data of one object is tied to another object. Data binding requires a source property, a destination property and a triggering event which indicates when to copy the data from source to destination.Flex - Basic Controls
- UI elements : These are the core visual elements the user
eventually sees and interacts with. Flex provides a huge list of widely
used and common elements varying from basic to complex which we will
cover in this tutorial.
Flex - Form Controls
Flex - Complex Controls
Flex - Layout Panels
Flex - Visual Effects
Every Effect inherits properties from Effect class which in turn inherits properties from EventDispatcher and other top level classes.
Flex - Event Handling
ActionScript has a generic Event class which defines much of the functionality needed to work with events. Every time an event occurs within a Flex application, three types of objects from the Event class hierarchy are created.
Flex - Custom Controls
- Using ActionScript
- Using MXML
Using ActionScript
You can create a component by extending existing component. To create a component using Flash Builder, Click on File > New > ActionScript Class. Enter the details as shown below.Flex - RPC Services
- Using Flex RPC services, we can define user actions to be executed on server side.
- Flex RPC Sservices can be integrated with any server side technologies.
- One of Flex RPC Service provide inbuilt support for compressed binary data to be transferred over the wire and is pretty fast.
Flex - FlexUnit Integration
Create a Test Case Class
You can create a Test Case Class using Flash Builder Create Test Class wizard. Running test cases is a breeze with Flash Builder as you will see in this article.Flex - Debug Application
- During debug mode, Flex Application runs on Flash Player Debugger
version built in Flash Builder 4 which supports debugging capability.
Flex - Internationalization
Flex - Printing Support
- FlexPrintJob can be used to print one or more Flex objects, such as a Form or VBox container.
- FlexPrintJob prints the object and all objects that it contains.
- The objects can be all or part of the displayed interface.
Flex - Quick Guide
What is Flex?
- Flex is a powerful, open source application framework which allows to build traditional applications for browser, mobile and desktop using the same programming model, tool, and codebase.
- Flex provides FLEX SDK consisting of the Flex class library
(ActionScript classes), the Flex compilers, the debugger, the MXML and
ActionScript programming languages, and other utilities to build
expressive and interactive rich internet applications (RIA)
Flex - Useful Resources
Discuss Flex
Flask – Overview
What is Web Framework?
Web Application Framework or simply Web Framework represents a collection of libraries and modules that enables a web application developer to write applications without having to bother about low-level details such as protocols, thread management etc.Flask – Environment
Prerequisite
Python 2.6 or higher is usually required for installation of Flask. Although Flask and its dependencies work well with Python 3 (Python 3.3 onwards), many Flask extensions do not support it properly. Hence, it is recommended that Flask should be installed on Python 2.7.Flask – Application
from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World’
Flask – Routing
The route() decorator in Flask is used to bind URL to a function. For example −
Flask – Variable Rules
Flask – URL Building
Flask – HTTP methods
The following table summarizes different http methods −
Flask – Templates
from flask import Flask app = Flask(__name__)
Flask – Static Files
Flask – Request Object
Important attributes of request object are listed below −
Flask – Sending Form Data to Template
Flask – Cookies
Flask – Sessions
Flask – Redirect & Errors
Prototype of redirect() function is as below −
Flask.redirect(location, statuscode, response)In the above function −
Flask – Message Flashing
Generating such informative messages is easy in Flask web application. Flashing system of Flask framework makes it possible to create a message in one view and render it in a view function called next.
Flask – File Uploading
Flask – Extensions
Flask – Mail
At first, Flask-Mail extension should be installed with the help of pip utility.
Flask – WTF
Flask – SQLite
Flask – SQLAlchemy
Flask – Sijax
Flask – Deployment
Externally Visible Server
A Flask application on the development server is accessible only on the computer on which the development environment is set up. This is a default behavior, because in debugging mode, a user can execute arbitrary code on the computer.Flask – FastCGI
Configuring FastCGI
First, you need to create the FastCGI server file. Let us call it yourapplication.fcgiC.from flup.server.fcgi import WSGIServer from yourapplication import app
Flask - Quick Guide
What is Web Framework?
Web Application Framework or simply Web Framework represents a collection of libraries and modules that enables a web application developer to write applications without having to bother about low-level details such as protocols, thread management etc.Flask - Useful Resources
Discuss Flask
Firebase - Overview
Firebase can power your app's backend, including data storage, user authentication, static hosting, and more. Focus on creating extraordinary user experiences. We'll take care of the rest. Build cross-platform native mobile and web apps with our Android, iOS, and JavaScript SDKs. You can also connect Firebase to your existing backend using our server-side libraries or our REST API.
Firebase - Environment Setup
Firebase - Data
We will create simple data structure. You can check the image below.
Firebase - Arrays
We will use the same data from the last chapter.
Firebase - Write Data
Set
The set method will write or replace data on specified path. Let's create reference to players collection and set two players.var playersRef = firebase.database().ref("players/");
Firebase - Write List Data
When you want to create unique identifiers for your data, you need to use push instead of set.
Firebase - Write Transactional Data
Let's say we have one player inside our player list.
Firebase - Read Data
The following image shows the data we want to read.
Firebase - Event Types
value
The first event type is value. We showed you how to use value in our last chapter. This event type will be triggered every time the data changes and it will retrieve all data including children.Firebase - Detaching Callbacks
Detach Callback for Event Type
Let's say we want to detach callback for a function with value event type.Firebase - Queries
We will use the same data from our last chapter.
Firebase - Filtering Data
Limit to First and Last
limitToFirst method returns specified number of items beginning from the first one.limitToLast method returns specified number of items beginning from the last one.
Firebase - Best Practices
Avoid Nesting Data
When you fetch the data from Firebase, you will get all of the child nodes. This is why deep nesting isn't the best practice.Firebase - Email Authentication
Create user
To authenticate user, we can use createUserWithEmailAndPassword(email, password) method.Firebase - Google Authentication
Step 1 - Enable Google Authentication
Open Firebase dashboard and click Auth in left side menu. To open list of available methods, you need to click on SIGN_IN_METHODS in tab menu.Now you can choose Google from the list, enable it and save it.
Firebase - Facebook Authentication
Step 1 - Enable Facebook Auth
We need to open Firebase dashboard and click Auth in side menu. Next we need to choose SIGN-IN-METHOD in tab bar. We will enable Facebook auth and leave this open since we need to add App ID and App Secret when we finish step 2.Firebase - Twitter Authentication
Step 1 - Create Twitter App
You can create Twitter app on this link.Once your app is created click on Keys and Access Tokens where you can find API Key and API Secret. You will need this in step 2.
Firebase - Github Authentication
Step 1 - Enable Github Auth
Open Firebase dashboard and click Auth from the side menu and then SIGN-IN-METHOD in tab bar.You need enable Github authentication and copy Callback URL. You will need this in step 2. You can leave this tab open since you will need to add Client ID and Client Secret once you finish step 2.
Firebase - Anonymous Authentication
Step 1 - Enable Anonymous Auth
This is the same process as in our previous chapters. You need to open Firebase dashboard, click on Auth from side menu and SIGN-IN-METHOD inside tab bar.You need to enable anonymous authentication.
Firebase - Offline Capabilities
Check Connection
We can check for connection value using the following code.Firebase - Security
Security rules can be found when we click on Database inside side menu and then RULES in tab bar.
In this chapter we will go through couple of simple examples to show you how to secure Firebase data.
Firebase - Deploying
Before we begin, let's just add some text to index.html body tag. In this example we will add −
<h1>WELCOME TO FIREBASE TUTORIALS APP</h1>
ES6 - Overview
This tutorial introduces you to ES6 implementation in JavaScript.
JavaScript
JavaScript was developed by Brendan Eich, a developer at Netscape Communications Corporation, in 1995.JavaScript started life with the name Mocha, and was briefly named LiveScript before being officially renamed to JavaScript. It is a scripting language that is executed by the browser, i.e. on the client’s end. It is used in conjunction with HTML to develop responsive webpages.ES6 - Environment
Local Environment Setup
JavaScript can run on any browser, any host, and any OS. You will need the following to write and test a JavaScript program standard −ES6 - Syntax
A JavaScript program can be composed of −
- Variables − Represents a named memory block that can store values for the program.
- Literals − Represents constant/fixed values.
ES6 - Variables
ES6 - Operators
- Operands − Represents the data.
- Operator − Defines how the operands will be processed to produce a value.
ES6 - Decision Making
ES6 - Loops
ES6 - Functions
function function_name() {
// function body
} ES6 - Events
An event is an action or occurrence recognized by the software. It can be triggered by a user or the system. Some common examples of events include a user clicking on a button, loading the web page, clicking on a hyperlink and so on. Following are some of the common HTML events.
Event Handlers
On the occurrence of an event, the application executes a set of related tasks. The block of code that achieves this purpose is called the eventhandler. Every HTML element has a set of events associated with it. We can define how the events will be processed in JavaScript by using event handlers.onclick Event Type
This is the most frequently used event type which occurs when a user clicks the left button of his mouse. You can put your validation, warning, etc. against this event type.Example
<html> <head> <script type = "text/javascript"> function sayHello() { document.write ("Hello World") } </script> </head> <body> <p> Click the following button and see result</p> <input type = "button" onclick = "sayHello()" value = "Say Hello" /> </body> </html>The following output is displayed on successful execution of the above code.
onsubmitEvent Type
onsubmit is an event that occurs when you try to submit a form. You can put your form validation against this event type.The following example shows how to use onsubmit. Here we are calling a validate() function before submitting a form data to the webserver. If validate() function returns true, the form will be submitted, otherwise it will not submit the data.
Example
<html> <head> <script type = "text/javascript"> function validation() { all validation goes here ......... return either true or false } </script> </head> <body> <form method = "POST" action = "t.cgi" onsubmit = "return validate()"> ....... <input type = "submit" value = "Submit" /> </form> </body> </html>
onmouseover and onmouseout
These two event types will help you create nice effects with images or even with text as well. The onmouseover event triggers when you bring your mouse over any element and the onmouseout triggers when you move your mouse out from that element.Example
<html> <head> <script type = "text/javascript"> function over() { document.write ("Mouse Over"); } function out() { document.write ("Mouse Out"); } </script> </head> <body> <p>Bring your mouse inside the division to see the result:</p> <div onmouseover = "over()" onmouseout = "out()"> <h2> This is inside the division </h2> </div> </body> </html>The following output is displayed on successful execution of the above code.
HTML 5 Standard Events
The standard HTML 5 events are listed in the following table for your reference. The script indicates a JavaScript function to be executed against that event.| Attribute | Value | Description |
|---|---|---|
| offline | script | Triggers when the document goes offline |
| onabort | script | Triggers on an abort event |
| onafterprint | script | Triggers after the document is printed |
| onbeforeonload | script | Triggers before the document load |
| onbeforeprint | script | Triggers before the document is printed |
| onblur | script | Triggers when the window loses focus |
| oncanplay | script | Triggers when the media can start play, but might have to stop for buffering |
| oncanplaythrough | script | Triggers when the media can be played to the end, without stopping for buffering |
| onchange | script | Triggers when an element changes |
| onclick | script | Triggers on a mouse click |
| oncontextmenu | script | Triggers when a context menu is triggered |
| ondblclick | script | Triggers on a mouse double-click |
| ondrag | script | Triggers when an element is dragged |
| ondragend | script | Triggers at the end of a drag operation |
| ondragenter | script | Triggers when an element has been dragged to a valid drop target |
| ondragleave | script | Triggers when an element leaves a valid drop target |
| ondragover | script | Triggers when an element is being dragged over a valid drop target |
| ondragstart | script | Triggers at the start of a drag operation |
| ondrop | script | Triggers when the dragged element is being dropped |
| ondurationchange | script | Triggers when the length of the media is changed |
| onemptied | script | Triggers when a media resource element suddenly becomes empty |
| onended | script | Triggers when the media has reached the end |
| onerror | script | Triggers when an error occurs |
| onfocus | script | Triggers when the window gets focus |
| onformchange | script | Triggers when a form changes |
| onforminput | script | Triggers when a form gets user input |
| onhaschange | script | Triggers when the document has changed |
| oninput | script | Triggers when an element gets user input |
| oninvalid | script | Triggers when an element is invalid |
| onkeydown | script | Triggers when a key is pressed |
| onkeypress | script | Triggers when a key is pressed and released |
| onkeyup | script | Triggers when a key is released |
| onload | script | Triggers when the document loads |
| onloadeddata | script | Triggers when media data is loaded |
| onloadedmetadata | script | Triggers when the duration and other media data of a media element is loaded |
| onloadstart | script | Triggers when the browser starts to load the media data |
| onmessage | script | Triggers when the message is triggered |
| onmousedown | script | Triggers when a mouse button is pressed |
| onmousemove | script | Triggers when the mouse pointer moves |
| onmouseout | script | Triggers when the mouse pointer moves out of an element |
| onmouseover | script | Triggers when the mouse pointer moves over an element |
| onmouseup | script | Triggers when a mouse button is released |
| onmousewheel | script | Triggers when the mouse wheel is being rotated |
| onoffline | script | Triggers when the document goes offline |
| ononline | script | Triggers when the document comes online |
| onpagehide | script | Triggers when the window is hidden |
| onpageshow | script | Triggers when the window becomes visible |
| onpause | script | Triggers when the media data is paused |
| onplay | script | Triggers when the media data is going to start playing |
| onplaying | script | Triggers when the media data has start playing |
| onpopstate | script | Triggers when the window's history changes |
| onprogress | script | Triggers when the browser is fetching the media data |
| onratechange | script | Triggers when the media data's playing rate has changed |
| onreadystatechange | script | Triggers when the ready-state changes |
| onredo | script | Triggers when the document performs a redo |
| onresize | script | Triggers when the window is resized |
| onscroll | script | Triggers when an element's scrollbar is being scrolled |
| onseeked | script | Triggers when a media element's seeking attribute is no longer true, and the seeking has ended |
| onseeking | script | Triggers when a media element's seeking attribute is true, and the seeking has begun |
| onselect | script | Triggers when an element is selected |
| onstalled | script | Triggers when there is an error in fetching media data |
| onstorage | script | Triggers when a document loads |
| onsubmit | script | Triggers when a form is submitted |
| onsuspend | script | Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched |
| ontimeupdate | script | Triggers when the media changes its playing position |
| onundo | script | Triggers when a document performs an undo |
| onunload | script | Triggers when the user leaves the document |
| onvolumechange | script | Triggers when the media changes the volume, also when the volume is set to "mute" |
| onwaiting | script | Triggers when the media has stopped playing, but is expected to resume |
ES6 - Cookies
ES6 - Page Redirect
ES6 - Dialog Boxes
ES6 - Void Keyword
ES6 - Page Printing
The JavaScript print function window.print() prints the current webpage when executed. You can call this function directly using the onclick event as shown in the following example.
ES6 - Objects
An object is an instance which contains a set of key value pairs. Unlike primitive data types, objects can represent multiple or complex values and can change over their life time. The values can be scalar values or functions or even array of other objects.
ES6 - Number
ES6 - Boolean
Use the following syntax to create a boolean object.
var val = new Boolean(value);
ES6 - Strings
As JavaScript automatically converts between string primitives and String objects, you can call any of the helper methods of the String object on a string primitive.
ES6 - New String Methods
| Sr.No | Method & Description |
|---|---|
| 1 |
String.prototype.startsWith(searchString, position = 0)
Returns true if the receiver starts with searchString; the position lets you specify where the string to be checked starts. |
ES6 - Arrays
- Variables are scalar in nature. In other words, a variable
declaration can only contain a single at a time. This means that to
store n values in a program, n variable declarations will be needed.
Hence, the use of variables is not feasible when one needs to store a
larger collection of values.
ES6 - Date
Once a Date object is created, a number of methods allow you to operate on it. Most methods simply allow you to get and set the year, month, day, hour, minute, second, and millisecond fields of the object, using either local time or UTC (universal, or GMT) time.
ES6 - Math
ES6 - RegExp
The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods that use regular expressions to perform powerful pattern-matching and search-and-replace functions on the text.
ES6 - HTML DOM
A document object represents the HTML document that is displayed in that window. The document object has various properties that refer to other objects which allow access to and modification of the document content.
ES6 - Collections
- Maps − This data structure enables mapping a key to a value.
- Sets − Sets are similar to arrays. However, sets do not encourage duplicates.
ES6 - Classes
ES6 - Promises
ES6 - Modules
A module is nothing more than a chunk of JavaScript code written in a file. The functions or variables in a module are not available for use, unless the module file exports them.
ES6 - Error Handling
Syntax Errors
Syntax errors, also called parsing errors, occur at compile time in traditional programming languages and at interpret time in JavaScript.ES6 - Validations
ES6 - Animation
- Fireworks
- Fade effect
- Roll-in or Roll-out
- Page-in or Page-out
- Object movements
ES6 - Multimedia
ES6 - Debugging
The process of finding and fixing bugs is called debugging and is a normal part of the development process. This chapter covers the tools and techniques that can help you with debugging tasks.
ES6 - Image Map
The image that is going to form the map is inserted into the page using the <img /> element as normal, except that it carries an extra attribute called usemap.
ES6 - Browsers
ES6 - Quick Guide
ES6 - Overview
ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. It is used by applications to enable client-side scripting. The specification is influenced by programming languages like Self, Perl, Python, Java etc. Languages like JavaScript, Jscript and ActionScript are governed by this specification.ES6 - Useful Resources
Discuss ES6
Ext.js - Overview
What is Ext JS
Ext JS is a popular JavaScript framework which provide rich UI for building web applications with cross browser functionality. Ext JS is basically used for creating desktop applications It supports all the modern browsers as IE6+, FF, Chrome, safari 6+, opera 12+ etc. Whereas another product of sencha, sencha touch is used for mobile applications.Ext.js - Environment Setup
Try it Option Online
We have set up ExtJS Programming environment online, so that you can compile and execute all the available examples online. It gives you confidence in what you are reading and enables you to verify the programs with different options. Feel free to modify any example and execute it online.
Ext.js - Naming Convention
It makes code more readable and understandable to the other programmers as well.
Naming convention in Ext JS follows the standard JavaScript convention which is not mandatory but a good practice to follow.
Ext.js - Architecture
MVC – Model View Controller architecture (version 4)
MVVM – Model View Viewmodel (version 5)
This architecture is not mandatory for the program but it is best practice to follow this structure to make your code highly maintainable and organized.
Ext.js - First Program
Step 1
Create index.htm page in an editor of our choice. Include the required library files in head section of html page as mentioned below:Ext.js - Class System
Defining a class in Ext JS
Ext.js - Containers
Containers
Container in Ext JS is the component where we can add other container or child components. These containers can have multiple layout to arrange the components in the containers. We can add or remove components from container and from its child elements. Ext.container.Container is the base class for all the containers in Ext JS.Ext.js - Layouts
Ext.js - Components
Ext.js - Drag and Drop
Description
Drag and drop feature is one of the powerful feature added for making developers task easy.A drag operation, essentially, is a click gesture on some UI element while the mouse button is held down and the mouse is moved. A drop operation occurs when the mouse button is released after a drag operation.Ext.js - Themes
Ext.js - Custom Events and listeners
Ext.js - Data
The data package has numerous number of classes but the most important classes are:
- Modal
- Store
- Proxy
Ext.js - Fonts
Description
Extjs provides the facility to use different font packages. Font packages are used to add different classes for icons available in package.1. Font-Awesome
2. Font-Pictos
Ext.js - Style
It uses SCSS for styling. SCSS is the more dynamic way of writing CSS code.
Ext.js - Drawing
Ext.js - Localization
Ext.js - Accessibility
What is accessibility?
In general accessibility means availability, the content is accessible means the content is available.In software terms the application is accessible means the application is available for all. Here all means the persons with disabilities, the visually impaired once or those who use screen readers, to use a computer or those who prefers all the navigation with keyboard instead of using a mouse.
Ext.js - Debugging Ext JS code
- Alert box:
place an alert box in the code where you want to check the flow or any variable value. e.g alert('message to show' + variable);
Ext.js - Methods
Ext.is class:
This class checks the platform you are using, whether it is a phone or desktop, a mac or windows operating system. These are the following methods related to Ext.is class
Ext.js - Quick Guide
Basic Introduction
Ext JS stand for Extended JavaScript, is a JavaScript framework and product of sencha which is based on YUI (Yahoo user interface).It is basically a desktop application development platform with modern UI. This tutorial gives a complete understanding of Ext JS. This reference will take you through simple and practical approach while learning Ext JS.Ext.js - Useful resource
Documentation of different versions of Ext JS - Documentation
Ext JS wiki - Wiki link
Ext.js - Ext JS Discussion
New added features of advance versions of Ext JS
Ext JS 5
- MVVM architecture: In Ext JS 5 the controller of MVC architecture is replaced by a viewmodel which is a model specific to view. This view model is basically used for binding data between model and different views. So with the help of this multiway binding is possible in Ext JS which was one of the shortcoming of this library.
ExpressJS - Overview
ExpressJS - Environment
node --version
ExpressJS - Hello World
var express = require('express'); var app = express();
ExpressJS - Routing
app.METHOD(PATH, HANDLER)
ExpressJS - HTTP Methods
ExpressJS - URL Building
ExpressJS - Middleware
Here is a simple example of a middleware function in action:
ExpressJS - Templating
ExpressJS - Serving static files
ExpressJS - Form data
ExpressJS - Database
ExpressJS - Cookies
ExpressJS - Sessions
ExpressJS - Authentication
ExpressJS - RESTFul APIs
ExpressJS - Scaffolding
ExpressJS - Error Handling
ExpressJS - Debugging
To see all internal logs used in express, set the DEBUG environment variable to express:* when starting the app:
DEBUG=express:* node index.jsYou'll get a colorized output like: