Sponsored Content
Top Forums Web Development Web development learning thread(Javascript, HTML, CSS, angular, vue.js). Post 303034543 by Neo on Sunday 28th of April 2019 11:32:06 PM
Old 04-29-2019
Hey Ravinder,

Here is a more "2019'ish tutorial" Javascript / HTML tutorial which is easy to follow and is more in line with how developers do things in 2019:

Quick Autocomplete App With JS & JSON

Quote:
In this project we will build a simple web app that searches a JSON file using the Fetch API, Async/Await, Regex and high order array methods.
I recommended you code this tutorial using the same tools and technique as Brad.

Cheers.
This User Gave Thanks to Neo For This Post:
 

7 More Discussions You Might Find Interesting

1. Web Development

Help with passing HTML values in to JavaScript

Not sure if this is the right place to ask this but here goes. I am creating a cheat sheet for co-workers. The concept is that you pick wire size and conduit size and the amount of wires that will fit is displayed. I haven't used alot of drop downs and can't quite figure out the way the get id... (3 Replies)
Discussion started by: zero3ree
3 Replies

2. Shell Programming and Scripting

Javascript or HTML to retrieve apache username

I have a internal wesbite set up and any visitor must enter username / passwd as defined in apache (I've set these up using htpasswd) I use cgi scripts set up using ksh or javascript to populate pages / tables etc. I want to be able to get the apache username that the used authorised... (3 Replies)
Discussion started by: frustrated1
3 Replies

3. Web Development

Learning HTML

I have tried to create a web page browser window. An example, I copied what the book pretty much wanted but get only the header. What should I change? Also Anyone know any good books for this? Many thanks. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Translation/EN" ... (4 Replies)
Discussion started by: N-Training
4 Replies

4. Programming

Looking For the Best Way to Rotate an Image: JavaScript, PHP, HTML etc

Hey All, What I'm looking for is a way to rotate an image by non 90 degree angles (ie 90, 180, 270, 360). I am able to do it in PHP, but there are errors in the image, some pixels end up colored incorrectly and the image ends up resized and I lose transparency. I've done my share of searching on... (1 Reply)
Discussion started by: pmd006
1 Replies

5. Web Development

HTML down, CSS help, ahhhh

I am having some problems. I have been able to learn HTML, but when I try and encode CSS, nothing happens, what is the major issue here. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>MY CSS</title> <style... (7 Replies)
Discussion started by: N-Training
7 Replies

6. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

7. Web Development

Google Trends: react.js angular.js vue.js

While I'm on the subject of Google trends, here is a global trend since 2004 comparing react.js, angular.js, vue.js It's no secret I'm a vue.js fan and coder, but not because of the trend line (which I just saw for the first time a few minutes ago) My experience is that vue.js, a late arrival... (0 Replies)
Discussion started by: Neo
0 Replies
SDL::Tutorial::Images(3)				User Contributed Perl Documentation				  SDL::Tutorial::Images(3)

NAME
SDL::Tutorial::Images SYNOPSIS
# to read this tutorial $ perldoc SDL::Tutorial::Images # to create a demo animation program based on this tutorial $ perl -MSDL::Tutorial::Images=sdl_images.pl -e 1 ANIMATING IMAGES
Since you're already familiar with the concepts behind animation, it's time to learn how to work with images. As usual, the important point is that computer animation is just simulating motion by painting several slightly different frames to the screen every second. There are two ways to vary an image on screen. One is to change its coordinates so it's at a slightly different position. This is very easy to do; it's just like animating a rectangle. The other way is to change the image itself so it's slightly different. This is a little more difficult, as you'll need to draw the alternate image beforehand somehow. Loading Images As usual, start with an SDL::App object representing the image window. Then preload the image file. This is easy; just pass the "name" parameter to the SDL::Surface constructor: use SDL::Surface; my $frame = SDL::Surface->new( -name => 'frame1.png' ); Note: you'll need to have compiled SDL Perl (and probably SDL) to support JPEG and PNG files for this to work. That's it; now you have an SDL::Surface object containing the image. You can use the "height()", "width()", and "bpp()" methods to retrieve its height, width, and bits per pixel, if you need them. Displaying Images Drawing an image onto the screen requires blitting it from one surface to another. (Remember, "blitting" means copying bits in memory.) The "blit()" method of SDL::Surface objects comes in handy. Its arguments are a little odd, though. Assuming $app is the SDL::App object, as usual: use SDL::Rect; my $frame_rect = SDL::Rect->new( -height => $frame->height(), -width => $frame->width(), -x => 0, -y => 0, ); my $dest_rect = SDL::Rect->new( -height => $frame->height(), -width => $frame->width(), -x => 0, -y => 0, ); $frame->blit( $frame_rect, $app, $dest_rect ); $app->update( $dest_rect ); Here we have two SDL::Rect objects which represent rectangular regions of a Surface. $frame_rect represents the entire area of $frame, while $dest_rect represents the area of the main window in which to blit the frame. This may be clearer with more descriptive variable names: $source_surface->blit( $area_of_source_to_blit, $destination_surface, $destination_area ); As usual, call "update()" on $app to see the change. Requiring the source and destination Rect objects may seem tedious in this simple example, but it's highly useful for copying only part of surface to part of another. For example, animating this image is a matter of changing the "x" and "y" coordinates of $dest_rect: for my $x ( 1 .. 100 ) { $dest_rect->x( $x ); $frame->blit( $frame_rect, $app, $dest_rect ); $app->update( $dest_rect ); } Of course, you'll have to redraw all or part of the screen to avoid artifacts, as discussed in the previous tutorial. Multi-Image Animation That covers moving a single image around the screen. What if you want something more? For example, what if you want to animate a stick figure walking? You'll need several frames, just as in a flip-book. Each frame should be slightly different than the one before it. It's probably handy to encapsulate all of this in a "Walker" class: package Walker; use SDL::Surface; sub new { my ($class, @images) = @_; my $self = [ map { SDL::Surface->new( -name => $_ ) } @images ]; bless $self, $class; } sub next_frame { my $self = shift; my $frame = shift @$self; push @$self, $frame; return $frame; } To use this class, instantiate an object: my $walker = Walker->new( 'frame1.png', 'frame2.png', 'frame3.png' ); Then call "next_frame()" within the loop: for my $x ( 1 .. 100 ) { my $frame = $walker->next_frame(); $dest_rect->x( $x ); $frame->blit( $frame_rect, $app, $dest_rect ); $app->update( $dest_rect ); } Again, the rest of the frame drawing is missing from this example so as not to distract from this technique. You'll probably want to abstract the undrawing and redrawing into a separate subroutine so you don't have to worry about it every time. It'd be easy to make "next_frame()" much smarter, selecting an image appropriate to the direction of travel, using a bored animation when the character is no longer moving, or adding other characteristics to the character. As you can see, the hard part of this technique is generating the images beforehand. That can add up to a tremendous amount of art and that's one reason for the popularity of 3D models... but that's another tutorial much further down the road. More importantly, it's time to discuss how to make these animations run more smoothly. More on that next time. SEE ALSO
SDL::Tutorial basic SDL tutorial SDL::Tutorial::Animation non-image animation AUTHOR
chromatic, <chromatic@wgz.org> Written for and maintained by the Perl SDL project, <http://sdl.perl.org/>. BUGS
No known bugs. COPYRIGHT
Copyright (c) 2004, chromatic. All rights reserved. This module is distributed under the same terms as Perl itself, in the hope that it is useful but certainly under no guarantee. perl v5.12.1 2010-07-05 SDL::Tutorial::Images(3)
All times are GMT -4. The time now is 06:47 AM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy