In Numpy, using the copy() and view() functions, we can create a new copy of any existing array or create a new view for the array.

Let us take a look at what is the major difference between copy and view:

• The major difference between copy and view is that the copy() function creates a new array whereas the view() function creates a new view of the original array. It is important to note here that physically the copy of an input array is stored at some other location whereas in the case of view, the different view of the same memory location is returned.
• In layman terms it can be said that the copy is just physically stored at another location and view has the same memory location as the original array but a different represenation.
• So it is important to note here that the copy object owns the data and whenever there are any changes made to the copy of the input array then it will not affect the original array and likewise any changes made to the original array will not affect the copy of the array.
• On the other hand, the view does not owns the data and if there are any changes made to the view then it will surely affect the original array, and any changes made to the original array will affect the view.

No Copy or Array Assignment

If you make the assignment of a numpy array to another then it does not create a direct copy of the original array, rather it makes another array having same content and same id. Thus it becomes the reference to the original array.

• If you will majke any changes to this reference array then these changes are directly reflected in the original array.
• Here the id() function is used that mainly returns the universal identifier of the array similar to the pointer in C.

Hence, we can say, if we just use a simple assignment operator, then only a reference is created and not an actual new copy.

Let us have a look at an example for the same:

import numpy as np  

input_arr= np.array([[5,2,7,4],[9,0,2,3],[1,2,3,19]])  
print("The Original Array is :\n")
print(input_arr)  
print("\nThe ID of array a:")
print(id(input_arr))  
  
b = input_arr#assigning input_arr to b   
print("\nNow we make the copy of the input_arr")  
print("\nThe ID of b:")
print(id(b))  
b.shape = 4,3;  #making some changes to b
print("\nThe Changes on b also reflect to a:")  
print(input_arr)  

Output:

Here is the output of the above code:

Numpy Copy or Deep Copy

The copy of any array is basically a new array and when we create a copy using the copy() function it is also known as Deep Copy.

• We have already told you that copy of an array, owns the data.
• So whenever we will make any changes to the copy then it will not affect the original array
• Likewise, when changes are made to the original array then it does not affect the copy.
• To return the copy of the input array, the numpy.ndarray.copy() function is used.

Using numpy.ndarray.copy() function:

This function basically returns the copy of the input array. The syntax to use this function is as follows:

numpy.ndarray.copy(order='C')

In the above syntax the order parameter is taken.

The order parameter is mainly used to control the memory layout of the copy. Here the C means C-order and F means F-order, A also means F if the given array is Fortran contiguous, C otherwise. K means(to match the layout of the given array as closely as possible).

Example of numpy.ndarray.copy():

Now in the example given below we will make the copy of the input array and then make changes to the input array and then check what it returns:

import numpy as np 

# Let us create an array 
a = np.array([5, 4, 6, 8, 9]) 
#Let us create the copy of input array 
c = a.copy() 

#Now let us check the id of a and c
print("The id of input array a :")
print(id(a)) 
print("The id of c is:")
print(id(c)) 

#Now changing the original array 
a[0] = 25

# printing both input array and copy 
print("The original array:")
print(a) 
print("The copy is:")
print(c) 

Output:

The id of input array a : 
3087432353792 
The id of c is: 
3087432353952 
The original array: 
[25 4 6 8 9] 
The copy is: 
[5 4 6 8 9]

Numpy View or Shallow Copy

The view is only just a view of the original array.

• When we create a view of any given array it is also known as the Shallow Copy.
• Unlike copy, view does not owns the data.
• It implies that if we make any changes to the view then it affects the original array similarly when we make changes to the original array then it affects the view.
• To return the view of the input array, the numpy.ndarray.view() function is used.

Using numpy.ndarray.view() function:

This function is mainly used to get a new view of any given array with the same data. The syntax to use this function is as follows:

ndarray.view(dtype=None, type=None)

Parameters:

Let us discuss the above mentioned parameters:

• dtype It indicates the data-type descriptor of the returned view, e.g., float32 or int16. The default value is None that results in the view having the same data-type as the given array.
• type It indicates the type of the returned view.

Example of numpy.ndarray.view():

Now in the example given below we will make the view of the input array and then make changes to the input array and then check what it returns:

import numpy as np 

# given input array
ar = np.array([2, 4, 6, 8, 10,12]) 

# creating the view 
v = ar.view() 

# Now both arr and v will have different id 
print("The id of ar")
print(id(ar)) 
print("The id of v")
print(id(v)) 

# changing the original array will also effect view 
ar[3] = 16

# printing both array and view 
print("The Original array:")
print(ar) 
print("The view:")
print(v) 

Output

The id of ar 
3087432354752 
The id of v 
3087432354352 
The Original array: 
[ 2 4 6 16 10 12] 
The view: [ 2 4 6 16 10 12]

Handling Overflowing Content

There may be a situation when the content of an element might be larger than the dimensions of the box itself. For example given width and height properties did not allow enough room to accommodate the content of the element.

CSS overflow property allowing you to specify whether to clip content, render scroll bars or display overflow content of a block-level element.

This property can take one of the following values: visible (default), hidden, scroll, and auto. CSS3 also defines the overflow-x and overflow-y properties which allow for independent control of the vertical and horizontal clipping.

Example

div {
    width: 250px;
    height: 150px;
    overflow: scroll;
}

The cursor CSS property specifies the type of cursor to be displayed when the pointer is placed over an element.

The following table summarizes the usages context and the version history of this property.

Syntax

The syntax of the property is given with:

The example below shows the cursor property in action.

Example

h1 {
    cursor: copy;
}
p {
    cursor: help;
}
a {
    cursor: url("custom.gif"), url("custom.cur"), default;
}

The cursor property handles a comma-separated list of user-defined cursors values followed by the “generic cursor”. If the first cursor is specified incorrectly or can’t be found, the next cursor in the comma-separated list will be used, and so on until a usable cursor is found.

If none of the user-defined cursors is valid or supported by the browser, the generic cursor at the end of the list will be used instead. 

Property Values

The following table describes the values of this property.

Value	Look	Description
General
auto		The browser determines the cursor to display based on the current context. E.g. equivalent to text when hovering text. This is default.
default		The default cursor for the platform, without regard for the context, typically an arrow.
none		No cursor is rendered.
initial		Sets this property to its default value.
inherit		If specified, the associated element takes the computed value of its parent element cursor property.
Links & status Cursors
context-menu		Indicates that a context-menu is available.
help		Indicates that help is available.
pointer		A cursor that indicates a link, typically a hand with an extended index finger.
progress		A progress indicator. The program is performing some processing but the user can still interact with the interface (unlike for wait).
wait		Indicates that the program is busy and the user should wait.
Selection Cursors
cell		Indicates that a cell (or set of cells) can be selected.
crosshair		A simple crosshair. Often used to indicate selection in a bitmap.
text		Indicates text that can be selected, typically an I-beam.
vertical-text		Indicates that vertical text can be selected, a sideways I-beam.
Drag and Drop Cursors
alias		Indicates that an alias or shortcut is to be created.
copy		Indicates that something can be copied.
move		Indicates that the hovered object can be moved.
no-drop		Indicates that the dragged item cannot be dropped at the current location.
not-allowed		Indicates that something cannot be done.
Resizing & scrolling Cursors
all-scroll		Indicates that something can be scrolled in any direction (panned).
col-resize		Indicates that the column can be resized horizontally.
row-resize		Indicates that the row can be resized vertically.
n-resize		Indicates that some edge is to be moved up (north).
e-resize		Indicates that some edge is to be moved right (east).
s-resize		Indicates that some edge is to be moved down (south).
w-resize		Indicates that some edge is to be moved left (west).
ne-resize		Indicates that some edge is to be moved up and right (north/east).
nw-resize		Indicates that some edge is to be moved up and left (north/west).
se-resize		Indicates that some edge is to be moved down and right (south/east).
sw-resize		Indicates that some edge is to be moved down and left (south/west).
ew-resize		Indicates a bidirectional resize cursor.
ns-resize
nesw-resize
nwse-resize
Zoom and Grab Cursors
zoom-in		Indicates that something can be zoomed in.
zoom-out		Indicates that something can be zoomed out.
grab		Indicates that something can be grabbed (dragged to be moved).
grabbing		Indicates that something is grabbed.

Browser Compatibility

The cursor property is supported in all major modern browsers.

The CSS margin properties allow you to set the spacing around the border of an element’s box (or the edge of the element’s box, if it has no defined border).

An element’s margin is not affected by its background-color, it is always transparent. However, if the parent element has the background color it will be visible through its margin area.

Setting Margins for Individual Sides

You can specify the margins for the individual sides of an element such as top, right, bottom, and left sides using the CSS margin-top, margin-right, margin-bottom, and the margin-left properties, respectively. Let’s try out the following example to understand how it works:

Example

h1 {
    margin-top: 50px;
    margin-bottom: 100px;
}
p {
    margin-left: 75px;
    margin-right: 75px;
}

The margin properties can be specified using the following values:

• length – specifies a margin in px, em, rem, pt, cm, etc.
• % – specifies a margin in percentage (%) of the width of the containing element.
• auto – the browser calculates a suitable margin to use.
• inherit – specifies that the margin should be inherited from the parent element.

You can also specify negative margins on an element, e.g., margin: -10px;, margin: -5%;, etc.

The Margin Shorthand Property

The margin property is a shorthand property to avoid setting margin of each side separately, i.e., margin-top, margin-right, margin-bottom and margin-left.

Let’s take a look at the following example to understand how it basically works:

Example

h1 {
    margin: 50px; /* apply to all four sides */
}
p {
    margin: 25px 75px; /* vertical | horizontal */
}
div {
    margin: 25px 50px 75px; /* top | horizontal | bottom */
}
hr {
    margin: 25px 50px 75px 100px; /* top | right | bottom | left */
}

This shorthand notation can take one, two, three, or four whitespace separated values.

• If one value is specified, it is applied to all four sides.
• If two values are specified, the first value is applied to the top and bottom side, and the second value is applied to the right and left side of the element’s box.
• If three values are specified, the first value is applied to the top, second value is applied to right and left side, and the last value is applied to the bottom.
• If four values are specified, they are applied to the top, right, bottom and the left side of the element’s box respectively in the specified order.

It is recommended to use the shorthand properties, it will help you to save some time by avoiding the extra typing and make your CSS code easier to follow and maintain.

Horizontal Centering with Auto Margins

The auto value for the margin property tells the web browser to automatically calculate the margin. This is commonly used to center an element horizontally within a larger container.

Let’s try out the following example to understand how it works:

Example

div {
    width: 300px;
    background: gray;
    margin: 0 auto;
}

The above style rules lets the <div> element take up 300 pixels of all the horizontal space available, and the remaining space will be equally divided between left and right margins.

The CSS padding properties allow you to set the spacing between the content of an element and its border (or the edge of the element’s box, if it has no defined border).

The padding is affected by the element’s background-color. For instance, if you set the background color for an element it will be visible through the padding area.

Define Paddings for Individual Sides

You can specify the paddings for the individual sides of an element such as top, right, bottom, and left sides using the CSS padding-top, padding-right, padding-bottom, and the padding-left properties, respectively. Let’s try out an example to understand how it works:

Example

h1 {
    padding-top: 50px;
    padding-bottom: 100px;
}
p {
    padding-left: 75px;
    padding-right: 75px;
}

The padding properties can be specified using the following values:

• length – specifies a padding in px, em, rem, pt, cm, etc.
• % – specifies a padding in percentage (%) of the width of the containing element.
• inherit – specifies that the padding should be inherited from the parent element.

Unlike CSS margin, values for the padding properties cannot be negative.

The Padding Shorthand Property

The padding property is a shorthand property to avoid setting padding of each side separately, i.e., padding-top, padding-right, padding-bottom and padding-left.

Let’s take a look at the following example to understand how it basically works:

Example

h1 {
    padding: 50px; /* apply to all four sides */
}
p {
    padding: 25px 75px; /* vertical | horizontal */
}
div {
    padding: 25px 50px 75px; /* top | horizontal | bottom */
}
pre {
    padding: 25px 50px 75px 100px; /* top | right | bottom | left */
}

This shorthand notation can take one, two, three, or four whitespace separated values.

• If one value is specified, it is applied to all four sides.
• If two values are specified, the first value is applied to the top and bottom side, and the second value is applied to the right and left side of the element’s box.
• If three values are specified, the first value is applied to the top, second value is applied to right and left side, and the last value is applied to the bottom.
• If four values are specified, they are applied to the top, right, bottom and the left side of the element’s box respectively in the specified order.

It is recommended to use the shorthand properties, it will help you to save some time by avoiding the extra typing and make your CSS code easier to follow and maintain.

Effect of Padding and Border on Layout

When creating web page layouts, adding a padding or border to the elements sometimes produce unexpected result, because padding and border is added to the width and height of the box generated by the element, as you have learnt in the CSS box model chapter.

For instance, if you set the width of a <div> element to 100% and also apply left right padding or border on it, the horizontal scrollbar will appear. Let’s see an example:

Example

div {
    width: 100%;
    padding: 25px;
}

To prevent padding and border from changing element’s box width and height, you can use the CSS box-sizing property. In the following example the width and height of the <div> box will remain unchanged, however, its content area will decrease with increasing padding or border.

Example

div {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
}

The padding defined is setted inside the element with already set height and width.

This element has 50% width and 150px height.

CSS height/width values

.box{
    height:150px;
    width:70%;
    background-color:rgba(0,101,153,0.44);
}

CSS

CSS min-height

Sometimes we need to set the minimum height of any HTML element or container. CSS min-height property is used to set the minimum height of the container.

The min-height value can be given in percentage, pixel, vh etc.

Note: when min-height is more than window size then a scroll bar will be created.

.min-height-prop{
    min-height:600px;
    background-color:rgba(0,101,153,0.44);
}

CSS

CSS min-width

CSS min-width property is used to set the minimum width of any element or container.

The min-width value can be given in percentage, pixel, vh etc.

Note: when min-width is more than window size then a scroll bar will be created.

.min-width-prop{
    min-width:120%;
    background-color:rgba(0,101,153,0.44);
}

CSS

CSS max-height

After the maximum limit has been crossed CSS properties like background-color are not effective on overflown content on screen.

To set max-height you can use px, percentage, vh etc.

.max-height-prop{
    max-height: 80px;
    background-color: rgba(0,101,153,0.44);
}

CSS

CSS max-width

CSS max-width property is used to set the maximum width of HTML element or container.

After the maximum limit has been crossed CSS properties like background-color are not effective on overflown content on screen.

To set max-width you can use px, percentage, vh etc.

.max-width-prop{
    max-width: 50%;
    background-color: rgba(0,101,153,0.44);
}

List can be ordered or unordered. Ordered list shows list contents using numbers while unordered list shows list content using bullets.

In CSS we have following list properties to style list:

• CSS list-style-type This allows the user to change the shape of bullets or markers.
• CSS list-style-position Control content to be inside or outside of the bullet.
• CSS list-style-image This property replaces marker/bullet with specified image.
• CSS list-style This property let us use multiple list property at once.

Types of HTML Lists

There are three different types of list in HTML:

• Unordered lists — A list of items, where every list items are marked with bullets.
• Ordered lists — A list of items, where each list items are marked with numbers.
• Definition list — A list of items, with a description of each item.

Styling Lists with CSS

CSS provides the several properties for styling and formatting the most commonly used unordered and ordered lists. These CSS list properties typically allow you to:

• Control the shape or appearance of the marker.
• Specify an image for the marker rather than a bullet point or number.
• Set the distance between a marker and the text in the list.
• Specify whether the marker would appear inside or outside of the box containing the list items.

In the following section we will discuss the properties that can be used to style HTML lists.

Changing the Marker Type of Lists

By default, items in an ordered list are numbered with Arabic numerals (1, 2, 3, 5, and so on), whereas in an unordered list, items are marked with round bullets (•).

But, you can change this default list marker type to any other type such as roman numerals, latin letters, circle, square, and so on using the list-style-type property.

Let’s try out the following example to understand how this property actually works:

Example

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

Changing the Position of List Markers

By default, markers of each list items are positioned outside of their display boxes.

However, you can also position these markers or bullet points inside of the list item’s display boxes using the list-style-position property along with the value inside. In this case the lines will wrap under the marker instead of being indented. Here’s an example:

Example

ol.in li {
    list-style-position: inside;
}
ol.out li {
    list-style-position: outside;
}

Let’s take a look at the following illustration to understand how markers or bullets are positioned.

Using Images as List Markers

You can also set an image as a list marker using the list-style-image property.

The style rule in the following example assigns a transparent PNG image “arrow.png” as the list marker for all the items in the unordered list. Let’s try it out and see how it works:

Example

ul li {
    list-style-image: url("images/bullet.png");
}

Sometimes, the list-style-image property may not produce the expected output. Alternatively, you can use the following solution for better control over the positioning of image markers.

As a work-around, you can also set image bullets via the background-image CSS property. First, set the list to have no bullets. Then, define a non-repeating background image for the list element.

The following example displays the image markers equally in all browsers:

Example

ul {
    list-style-type: none;
}
ul li {
    background-image: url("images/bullet.png");
    background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

Setting All List Properties At Once

The list-style property is a shorthand property for defining all the three properties list-style-type, list-style-image, and list-style-position of a list in one place.

The following style rule sets all the list properties in a single declaration.

Example

ul {
    list-style: square inside url("images/bullet.png");
}

Note: When using the list-style shorthand property, the orders of the values are: list-style-type | list-style-position | list-style-image. It does not matter if one of the values above is missing as long as the rest are in the specified order.

Creating Navigation Menus Using Lists

HTML lists are frequently used to create horizontal navigation bar or menu that typically appear at the top of a website. But since the list items are block elements, so to display them inline we need to use the CSS display property. Let’s try out an example to see how it really works:

Example

ul {
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li {
    display: inline-block;
}
ul li a {
    display: block;
    padding: 10px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #939393;
}

Some of its text formatting properties are :

• CSS text color
• CSS text align
• CSS text shadow
• CSS text direction
• CSS text indent
• CSS text decoration
• CSS text transform
• CSS word spacing
• CSS letter spacing
• CSS white space

Formatting Text with CSS

CSS provides several properties that allows you to define various text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively.

The commonly used text properties are: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, and more. These properties give you precise control over the visual appearance of the characters, words, spaces, and so on.

Let’s see how to set these text properties for an element in more detail.

Text Color

The color of the text is defined by the CSS color property.

The style rule in the following example will define the default text color for the page

Example

body {
    color: #434343;
}

Although, the color property seems like it would be a part of the CSS text, but it is actually a standalone property in CSS. See the tutorial on CSS color to learn more about the color property.

Text Alignment

The text-align property is used to set the horizontal alignment of the text.

Text can be aligned in four ways: to the left, right, centre or justified (straight left and right margins).

Let’s take a look at an example to understand how this property basically works.

Example

h1 {
    text-align: center;
}
p {
    text-align: justify;
}

Note: When text-align is set to justify, each line is stretched so that every line has equal width (except the last line), and the left and right margins are straight. This alignment is generally used in publications such as magazines and newspapers.

Let’s take a look at the following illustration to understand what these values actually mean.

Text Decoration

The text-decoration property is used to set or remove decorations from text.

This property typically accepts one of the following values: underline, overline, line-through, and none. You should avoid underline text that is not a link, as it might confuse the visitor.

Let’s try out the following example to understand how it basically works:

Example

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

Removing the Default Underline from Links

The text-decoration property is extensively used to remove the default underline from the HTML hyperlinks. You can further provide some other visual cues to make it stand out from the normal text, for example, using dotted border instead of solid underline.

Let’s take a look at the following example to understand how it basically works:

Example

a {
    text-decoration: none;
    border-bottom: 1px dotted;
}

Note: When you create an HTML link, browsers built in style sheet automatically underline it and applies a blue color, so that the readers can clearly see which text is clickable.

Text Transformation

The text-transform property is used to set the cases for a text.

Text are often written in mixed case. However, in certain situations you may want to display your text in entirely different case. Using this property you can change an element’s text content into uppercase or lowercase letters, or capitalize the first letter of each word without modifying the original text.

Let’s try out the following example to understand how it basically works:

Example

h1 {
    text-transform: uppercase;
}
h2 {
    text-transform: capitalize;
}
h3 {
    text-transform: lowercase;
}

Text Indentation

The text-indent property is used to set the indentation of the first line of text within a block of text. It is typically done by inserting the empty space before the first line of text.

The size of the indentation can be specified using percentage (%), length values in pixels, ems, etc.

The following style rule will indent the first line of the paragraphs by 100 pixels.

Example

p {
    text-indent: 100px;
}

Note: Whether the text is indented from the left or from the right depends on the direction of text inside the element, defined by the CSS direction property.

Letter Spacing

The letter-spacing property is used to set extra spacing between the characters of text.

This property can take a length value in pixels, ems, etc. It may also accept negative values. When setting letter spacing, a length value indicates spacing in addition to the default inter-character space.

Let’s check out the following example to understand how it really works:

Example

h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}

Word Spacing

The word-spacing property is used to specify additional spacing between the words.

This property can accept a length value in pixels, ems, etc. Negative values are also allowed.

Let’s try out the following example to understand how this property works:

Example

p.normal {
    word-spacing: 20px;
}
p.justified {
    word-spacing: 20px;
    text-align: justify;
}
p.preformatted {
    word-spacing: 20px;
    white-space: pre;
}

Note: Word spacing can be affected by text justification. Also, even though whitespace is preserved, spaces between words are affected by the word-spacing property.

Line Height

The line-height property is used to set the height of the text line.

It is also called leading and commonly used to set the distance between lines of text.

The value of this property can be a number, a percentage (%), or a length in pixels, ems, etc.

Example

p {
    line-height: 1.2;
}

When the value is a number, the line height is calculated by multiplying the element’s font size by the number. While, percentage values are relative to the element’s font size.

Note: Negative values for the line-height property are not allowed. This property is also a component of the CSS font shorthand property.

If the value of the line-height property is greater than the value of the font-size for an element, this difference (called the “leading”) is cut in half (called the “half-leading”) and distributed evenly on the top and bottom of the in-line box. Let’s check out an example:

Example

p {
    font-size: 14px;
    line-height: 20px;
    background-color: #f0e68c;
}

1. Interactive mode

2. Script mode

In this article, we’ll get to know what these modes are and how they differ from each other.

Interactive mode

Interactive etymologically means “working simultaneously and creating impact of our work on the other’s work”. Interactive mode is based on this ideology only. In the interactive mode as we enter a command and press enter, the very next step we get the output. The output of the code in the interactive mode is influenced by the last command we give. Interactive mode is very convenient for writing very short lines of code. In python is it also known as REPL which stands for Read Evaluate Print Loop. Here, the read function reads the input from the user and stores it in memory. Eval function evaluates the input to get the desired output. Print function outputs the evaluated result. The loop function executes the loop during the execution of the entire program and terminates when our program ends. This mode is very suitable for beginners in programming as it helps them evaluate their code line by line and understand the execution of code well.

How to run python code in Interactive mode?

In order to run our program in the interactive mode, we can use command prompt in windows, terminal in Linux, and macOS. Let us see understand the execution of python code in the command prompt with the help of an example:

Example 1:

To run python in command prompt type “python”.  Then simply type the Python statement on >>> prompt. As we type and press enter we can see the output in the very next line.

• Python3

Output:

Example 2

Let us take another example in which we need to perform addition on two numbers and we want to get its output. We will declare two variables a and b and store the result in a third variable c. We further print c. All this is done in the command prompt.

• Python3

Output:

We can see the desired output on the screen. This kind of program is a very short program and can be easily executed in interactive mode.

Example 3:

In this example, we will multiply two numbers and take the numbers as an input for two users. You will see that when you execute the input command, you need to give input in the very next line, i.e. code is interpreted line by line.

• Python3

Output:

Disadvantages of interactive mode

• The interactive mode is not suitable for large programs.
• The interactive mode doesn’t save the statements. Once we make a program it is for that time itself, we cannot use it in the future. In order to use it in the future, we need to retype all the statements.
• Editing the code written in interactive mode is a tedious task. We need to revisit all our previous commands and if still, we could not edit we need to type everything again.

Script Mode

Script etymologically means a system of writing. In the script mode, a python program can be written in a file. This file can then be saved and executed using the command prompt. We can view the code at any time by opening the file and editing becomes quite easy as we can open and view the entire code as many times as we want. Script mode is very suitable for writing long pieces of code. It is much preferred over interactive mode by experts in the program. The file made in the script made is by default saved in the Python installation folder and the extension to save a python file is “.py”.

How to run python code in script mode?

In order to run a code in script mode follow the following steps.

Step 1: Make a file using a text editor. You can use any text editor of your choice(Here I use notepad).

Step 2: After writing the code save the file using “.py” extension.

Step 3: Now open the command prompt and command directory to the one where your file is stored.

Step 4: Type python “filename.py” and press enter.

Step 5: You will see the output on your command prompt.

Let us understand these steps with the help of the examples:

Example 1:

In order to execute “Hello gfg” using script mode we first make a file and save it.

Now we use the command prompt to execute this file.

Output:

Example 2:

Our second example is the same addition of two numbers as we saw in the interactive mode. But in this case, we first make a file and write the entire code in that file. We then save it and execute it using the command prompt. 

Output:

Example 3:

In this example, we write the code for multiplying two numbers. And the numbers which are to be multiplied are taken by the user as an input. In the interactive mode, we saw that as we write the command so does it asks for the input in the very next line. But in script mode we first code the entire program save and then run it in command prompt. The python interpreter executes the code line by line and gives us the result accordingly.

In this example, we see that the whole program is compiled and the code is executed line by line. The output on the shell is entirely different from the interactive mode.

Difference between Interactive mode and Script mode

The interactive prompt is the easiest way to run your Python programs – simply type the code in this command-line interface. To start the interactive prompt, type python from the Windows command prompt or Linux shell and press Enter:

 If the python program can’t be located, you need to enter the full path to the program or add its directory in the PATH variable.

After you start the interactive prompt, the information about the Python version along with some useful information about the operating system will be displayed. Below these information is the >>> prompt, which indicates that you’re in an interactive Python interpreter session. The code you enter after the prompt will be executed once you press Enter. For example, to print the text Hello world, you can use the print function:

C:Python34>python
Python 3.4.3 (v3.4.3:9b73f1c3e601, Feb 24 2015, 22:43:06) [MSC v.1600 32 bit (In
tel)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> print ('Hello world!')
Hello world!

In the example above you can see that the result of the print function was echoed back right away (Hello world!). However, the code you enter in the interactive prompt will not be saved in a file. This is why this prompt is not usually used to very often; it is usually used only for testing or experimental purposes.

You can type multiple Python commands and they will be run immediately after they are entered:

C:Python34>python
Python 3.4.3 (v3.4.3:9b73f1c3e601, Feb 24 2015, 22:43:06) [MSC v.1600 32 bit (Intel)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> print ('Hello world!')
Hello world!
>>> x=5
>>> print (x)
5
>>>

To exit the interactive prompt, press Ctrl+Z on Windows or Ctrl+D on Linux.

IDLE editor

The Python IDLE (Integrated DeveLopment Environment) editor is a graphical user interface for Python development. This GUI is free and installed automatically during the Python installation. It enables you to edit, run, and debug Python programs in a simple GUI environment.

IDLE is actually a Python program that uses the standard library’s tkinter GUI toolkit to build its windows. It is portable and can be run on all major platforms, such as Windows, Linux, Mac OS, etc. It supports the following features:

• command history and syntax colorization
• auto-indent and unindent for Python code
• word auto-completion
• support for multiple windows
• integrated debugger

The Python IDLE is usually present as an entry in the Start button menu in Windows 7. In Windows 8 and higher versions, you can start it by typing IDLE from the Start menu. Once started, it will display some useful information about the Python version and the operating system:

You can write your code after the >>> prompt and it will be executed when you press Enter:

Although the shell window is useful for executing one-line commands, you will not use it to write full-fledged programs. Instead, Python IDLE comes with its own built-in text editor that you can use to write and save your code. You can start the editor by selecting File > New File:

This opens up a window where you can type your code:

Before running your code, you will need to save it in a file (File > Save). Make sure that the file has the .py extension:

To run your code, click Run > Run Module (or press F5):

The result will be printed in the IDLE shell window:

Notice how the result of our program was displayed after the RESTART line.

REPL – Python Interactive Shell

What is REPL? REPL is the language shell, the Python Interactive Shell. The REPL acronym is short for Read, Eval, Print and Loop.

The Python interactive interpreter can be used to easily check Python commands. To start the Python interpreter, type the command python without any parameter and hit the “return” key.

The process is:

1. Read: take user input.
2. Eval: evaluate the input.
3. Print: shows the output to the user.
4. Loop: repeat.

Introduction

You can check the version of Python you have installed by typing python without pressing enter, instead pressing the tab key. This will return the Python versions installed on your computer

To get more details on the version, you can type the command:

You should be using Python 3 or newer (2 is legacy).

REPL

REPL is the Interactive shell

To start the Python language shell (the interactive shell), first open a terminal or command prompt. Then type the command python and press enter.

Python then outputs some information like this (including the Python version):

After the symbols >>> you can type a line of Python code, or a command.

Each command at the prompt is evaluated by Python. If you would type, if it’s incorrect it returns an error.

In the above example it’s incorrect because text must be between quotes.

On some versions of Ubuntu you need type python3 instead of python.

You can type all kinds of commands in the interactive shell. If you want to use it as calculator, just type your calculation:

Variables can be used in the Python shell too:

Note: We’ll teach you how to start python programs in the next article.

How to Quit the Python Shell

If you started the Python interactive shell, you may be wondering how to exit it. There are several ways to quit the Python interactive shell (REPL).

One way is by typing exit(). This is calling the function exit, which is why the brackets in exit() must be written.

A keyboard shotcut can be used to exit the shell too: Ctrl-D.