What is the difference between slice(), substr() and substring() string methods?

The slice() method extracts parts of a string and returns the extracted parts in a new string. slice() does not change original string.

Syntax

string.slice(start_position, end_position_excluded)

The substr() method extracts parts of a string, beginning at the character at the specified position, and returns the limited number of characters. substr() does not change original string.

Syntax

string.substr(start_position, length)

The substring() method extracts parts of a string and returns the extracted parts in a new string. substring() does not change original string.

Syntax

string.substring(start_position, end_position_excluded)

As a conclusion we can say that there is a difference between slice() and substr(), while substring() is basically a copy of slice().

Let’s take a better look at the differences between the individual methods.

Slice()

var string = "1234567890"
var substr=string.slice(4);
console.log(substr);

Output

567890

substr(4) will remain everything after first 4 characters.

var string = "1234567890"
var substr = string.slice(0, 4);
console.log(substr);

Output

1234

substr(0, 4) will keep the first 4 characters. Second argument exclude the argument position (upper bound excluded).

var string = "1234567890"
var substr = string.slice(-4);
console.log(substr);

Output

890

substr(-4) will keep the last 4 characters.

Substr()

var string = "1234567890"
var substr=string.substr(4);
console.log(substr);

Output

567890

substr(4) will remain everything after first 4 characters.

var string = "1234567890"
var substr = string.substr(0, 4);
console.log(substr);

Output

1234

substr(0, 4) will keep the first 4 characters. Second argument denotes the number of characters to extract.

var string = "1234567890"
var substr = string.substr(-4);
console.log(substr);

Output

890

substr(-4) will keep the last 4 characters.

Substring()

var string = "1234567890"
var substr=string.substring(4);
console.log(substr);

Output

567890

substr(4) will remain everything after first 4 characters.

var string = "1234567890"
var substr = string.substring(0, 4);
console.log(substr);

Output

1234

substr(0, 4) will keep the first 4 characters. Second argument exclude the argument position (upper bound excluded).

General note regarding indexes in all 3 methods: Strings are arrays of characters. Therefore they start character order from 0.

Conclusion

As you can see, using substring is nearly identical to split() or substr() method. However there are some small differences. For example substring() does not have option to add negative number and count string split backwards. Also if first argument is greater than the second, substring will swap the two arguments, and perform as usual.

Basically, if you know the the position (index) on which you will start and the length of the of characters to be extracted, use subst(start_position, length). Otherwise if you know the position (index) you want to start and end, but NOT include the end position, use slice(start_position, end_position_excluded).

What is necessary for making webpage

• First of all it is important to use logic and brain. All information system are very rational and thus easy to work with.
• At start we will need any kind of PC which is running basic text editor (exp. Windows Notepad, TextEdit). Creating websites is possible nowadays even on mobile devices but this something we do not need to concern about now.
• We need internet browser. All internet browsers are available free of charge. In long-term exist few very popular with huge market share:
  • Internet Explorer – icon of the blue round E. Default browser for Windows operating systems.
  • Chrome – icon of the multicolored ball. Browser provided by company Google.
  • Firefox – icon of the red fox. Browser provided by company Mozilla.
  • Opera – icon of the red letter O
  • Safari – icon of the compass. Default browser for iOS devices.
• Internet connection is not necessary for making website but it is very desirable for quick learning and eventually fast development. Nobody expect you to know everything. And there is lot of information available on the Internet from which you can use as source. Thus having constant internet connection is very handy for quick learning.
• It is good to have idea what you want to make.
• Don’t try to do anything if you have not elementary knowledge of work with computer. Better said, you understand at least what is file, how to work with system files, what is system directory.

What is not necessary for making webpage

• As was said earlier internet connection is not directly necessary for creating websites.
• You do not need buying expensive licenses for complex code editors. There are plenty of free and simple editors for making websites.
• You do not need to know how to program.
• You do not need to pay anything for training or learning. Unless you decide you want to have own domain.

Two steps for creating first webpage

1. Write webpage = source code saved in HTML file (occasionally with additional other files)
2. Uploading webpage file on the Internet = copying webpage file on server.

In this article we will talk about first step, making webpage – writing its source code. At first, localy, on own discspace.

Webpage files

Internet webpage is file with file extension html or htm. It is nearly normal text file. Only difference is that text, images, video, all media etc. are formated in signs of HTML language called tags.

File with .html extension on local disk has own icon depicting that it is webpage. It can look like this:

How to open Webpage

1. You can look at the webpage as page in browser – in such case you can not edit it
2. or you open it as a text (exp. in Notes program), and you will see it’s source code  (source, code) and you can edit it. This is a way how pages are made.

How to make HTML file

1. You can directly write your own source code in HTML language. Might look hard on first sight. But it is much easier than you think.
2. Or you can make HTML file by HTML editor. (It is good for beginner to learn principles.)

WYSIWYG HTML editors

HTML editors are program designated for making webpages. For beginners are especially useful WYSIWYG editors – What You See Is What You Get – literally used edit webpage as it will be looking and does not bother by writing HTML source code.

In WYSIWYG editor you  can create webpages without knowledge of HTML language. You are normally writing paragraphs, insert images and make other common edits. WYSIWYG editor than save file on disk to file with html extension. Editor also automatically insert all necessary HTML tags into webpage itself.

To WYSIWYG editors belong Dreamweaver, FrontPage 2000 and few others. WYSIWYG editors has certain disadvantages (exp. quality and size of source code)  for which are not deployed.

You can reed more about advantages and disadvantages in article about WYSIWYG editors.

Accept WYSIWYG editors exist also structural editors, in which you can directly writing HTML code with possibility of program helping you (placing ending tags etc.)
Structural editors are: PSPad, Notepad++, jEdit, Code, Sublime Text, etc. and in case of emergency even simple Microsoft Notepad.

You can also use Word or Libre Office for writing webpages.

Writing own HTML code

Who wants to have full control  writes own HTML source code from begging in structural editor. She or he need to learn basic HTML tags. Learning HTML basics is fundamental because creating latter more complicated solutions in WYSIWYG editors is not possible.

This is example of basic HTML code structure:

<html>
<head>
<title>My first webpage</title>
</head>

<body>
<h1>My first webpage.</h1>
<p>"That's one small step for man, one giant leap for mankind." - Neil Armstrong</p>
</body>
</html>

If you will take this HTML code and open exp. Notepad, place it into editor and save on disk under name example.html you have made your first webpage. You can also open your newly created webpage in the browser.

Tutorial for beginners

How to make HTML file in Windows (one of many ways). (If something would not work, check our more complex tutorial).

1. Create on your disk new folder exp. C:test and open it.
2. Create new text file (right mouse click > New > Text Document)
3. Rename it as webpage.html (and confirm extension change). File icon will change.
4. Open file by double click. Blank page will be opened in browser.
5. Return to folder and click by right click on newly created file – select Open in program. If Notepad is available, select it. If it is not available you need to find it. Empty text edit will open up.
6. Now you can write text and add additional HTML tags. You can read more in article about HTML basics.
7. Hit File > Save.
8. Flip to opened browser and hit F5 (Refresh page).
9. Check the differences.
10. You can experiment like this infinitely.

For now your page is at your local disk. You can check article about how to copy webpage on server.

In file names used for internet never use diacritic and spaces! We recommend write all names lowercase.

Quickest way how to learn making webpages

I believe that the quickest way how to learn making webpages is to use combination of advantages of both kind of editors. :

• Make webpage in WYSIWYG editor
• Check webpage in browser
• Analyse HTML code in structural editor. Edit the page and check what will happens.

Popis: Erasmus web šablóna je HTML dokument, ktorý je voľne k stiahnutiu. Tento dokument má 2 účely. Stiahnuť a upraviť podľa svojich predstáv si ho môže ktokoľvek. Na druhej strane dokument reprezentuje všetky články, ktoré som napísal o programe Erasmus a môže tak slúžiť ako sprievodca pre uchádzačov o program Erasmus.

V tejto šablone sú použité niektoré prvky z CSS3. Na galériu obrázkov je použitý fancybox JavaScript framework.

Link na stiahnutie: Stiahnuť Erasmus web šablónu

Verzia: 1.0

Vývoj: Pôvodne bola táto stránka súčasťou dizajnu tejto stránky pod určitou WordPress themou. Po zmene dizajnu a návrate ku klasickej Kubrick WordPress theme som si myslel, že by bola škoda zahodiť tento materiál. Preto som vytvoril samostatnú web šablónu, ktorá zároveň možno pomôže aj záujemcom o Erasmus.

Screenshot:

• vsetkojenawebe.com – 2007/2008 – vsetkojenawebe.com was my first internet project which I executed at public domain.
• brigadapraca.sk – 2010/2011 – Revolution job-board posting work offers.
• howtogetfrom.net – 2015 – Travel guides from airports to city centers and vice versa.
• dnesletim.com – 2016 – Cheap fly tickets hunting blog.

vsetkojenawebe.com

2007

Description: vsetkojenawebe.com was my first internet project which I executed at public internet domain. It was year 2007 and I started exploring this amazing new world. The world of the Internet was fortunately different than the one today. The search was much difficult and diverse. It was time before things like Android, Facebook or Google Chrome. Thus I developed my first search directory. At vsetkojenawebe.com I learnt to work with Google Adsense advertisement and basic principles of building website (HML, CSS, JavaScript, PHP, webhosting, FTP, Google Analytics). Unfortunately advertisement income could not cover least expenses for hosting. After the first year I ended the project although the number of active users jumped over 30 per day. I still consider it as great success for that time.

Development: For project was beautiful the fact that since first version I had a list of cool functions I would like to put in place. (e.g. custom background, RSS news, …). Many of these function started appearing years later in other services backed by big companies. E.g. iGoogle, Bing backed by Google and Microsoft. Part of the logo I borrowed from the movie the Hitchhiker guide to the galaxy.

Screenshots:

Version 1.0

Version 2.0

brigadapraca.sk

Description: brigadapraca.sk was unique portal offering full time and part time jobs. This portal was created in September 2010 when the world economic crisis was in its peak in the Slovakia. brigadapraca.sk was jobportal publishing new offers for free. Thanks to its ultra simple form anybody could place a new offer quick and with ease. The portal was aimed for small companies and entrepreneurs.

brigadapraca.sk was from the beginning in aim of big job-offering portals on the market. You see, reasons were simple. They were coming from innovative approach for publishing the work offer:

1. Publishing the job offers was for free for anybody. In year 2010 peak of recession hit the Slovakia. Companies weren’t hiring at all, they were saving everywhere.  Big job-offering portals did not realize the fact, that asking money for their services is naive during time of crisis. For low interest biggest job portal started even publishing jobs from governmental unemployment offices.
2. Unlimited time publishing for job offers. Big job portals are limiting job-offer publishing date despite the fact employer did not find new employee. Such portals earn money on every single job publishment. Vice-versa companies only lose money till they do not find the right person. This is contra-productive and in time of crisis bold.
3. Inserting the job listing was possible without registration. Filling up the form with predefined text took less than a minute. Registration was not necessary since all contact details could be in the job offer.
4. In the time of crisis portal was focussing on small entrepreneurs. brigadapraca.sk was focusing on small companies and individuals, not on work agencies. Why? In time of crisis you had higher chance to find job direct than over the job agency. So it made more sense to focus on local offers, than target global market.

brigadapraca.sk was not big portal so everything was for free. Only 1 person was necessary for servicing the portal. Amount of the work took only few minutes per day. Portal did not need to generate huge income to cover all expenses.

Trends which started brigadapraca.sk job-offering portal started to appear elsewhere after the crisis.

I have sold brigadapraca.sk in august 2011. New owner changed design and brought many advertisement spaces.

Development: Idea and inspiration for whole portal and design came from abroad. At first I was intending to name the site “brigadaprace” what is is play with words. A name creates image of communism and socialism. This would be also reflected in website style. Visitors would be welcomed with giant red stare and slogan “work for everybody”. I put this idea aside while in the end I did not want anything communistic be connecting with this website.

howtogetfrom.net

Description: howtogetfrom.net was a simple blog created for very itneresting topics. Since I love traveling

dnesletim.com

I developed custom theme and

I learned a lot on this one.

During the one month I was providing every.

I have decided I do not want to continue in blogs focusing on news.