Experiment 1 JavaScript Event

1. Purpose of the experiment

1. Master the concepts of events, event drivers, and event handlers, and understand the relationship between the three;

2. Master the method of specifying the event handler;

3. Learn to write simple event handlers.

2. Experimental environment

Laptop, Windows system

Program Analysis Description and Results

Explanatory questions (1) (2)

4. Program design description, source code and running results

<!DOCTYPE html>

<html>

<head>

function surf(){

document.getElementById("1").value=document.getElementById("URL").value;}

function jump(){

location=document.getElementById("1").value;}

</script>

</head>

<body>

<p>Select the URL to go to</p>

</select>

<button value="" id="button" onclick="jump()">Confirm Jump</button>

</body>

</html>

4. Experimental summary

When using var, you cannot add it arbitrarily, and you cannot add var before location; and the usage of the assignment statement document.getElementById("1").value can overwrite its original value; and the function and meaning of onchange, after the change , will execute the following function.

Experiment 2 JavaScript built-in functions and built-in objects

1. Purpose of the experiment

1 . Analyze the usage of JavaScript built-in functions;

2 . Master the properties and methods of commonly used built-in objects in JavaScript.

2. Experimental environment

computer, Windows operating system

3. Program Analysis Description and Results

1.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title> Understanding of built-in functions</title>

<style type="text/css">

div{

background:#CDEBE6;

color:#330000;

width:750px;

font-size:20px;

font-weight:bolder;

}

h4{text-align:center;}

b{color：red;font-size:18px;}

</style>

</head>

<body>

<div>

<h4> System function usage</h4>

<b>1.eval(" string")<br/></b>

<script type="text/javascript">

var rel=eval("1000+3/5");

document.write("  "+"1000+3/5="+rel);

document.write("<br/>");

document.write("  "+"x=10,y=20,x*y=");

eval("x=10;y=20;document.write(x*y)");

document.write("<br/>  2+2="+eval("2+2"));

document.write("<br/>");

var x=10;

document.write("  "+"x=10,x+17="+eval(x+17));

document.write("<br/>");

</script>

<b>2.escape(" string")<br/></b>

<script type="text/javascript">

document.write("  "+"escape('&')="+escape("&"));

document.write("<br/>");

result=escape("  "+"my name is 张华");

document.write("  "+"escape('my name is 张华')="+result);

</script>

<b>3.unescape(string)<br/></b>

<script type="text/javascript">

document.write("  "+"unescape('%26')="+unescape("%26"));

document.write("<br/>");

result=unescape("  "+"my%20name%20is%20%u5F20%u534E");

document.write("  "+"unescape('my%20name%20is%20%u5F20%u534E')="+result);

</script>

<b>4.parseFloat(string)<br/></b>

<script type="text/javascript">

document.write("  "+"parseFloat('3.14')="+parseFloat("3.14"));

document.write("<br/>");

document.write("  "+"parseFloat('314e-2')="+parseFloat("314e-2"));

document.write("<br/>");

document.write("  "+"parseFloat('3.14ab')="+parseFloat("3.14ab"));

document.write("<br/>");

document.write("  "+"parseFloat('FF2')="+parseFloat("FF2"));

document.write("<br/>");

</script>

<b>5.parseInt("numberstring,radix)<br/></b>

<script type="text/javascript">

document.write("  "+"32:"+parseInt("32"));

document.write("<br/>");

document.write("  "+"032:"+parseInt("032"));

document.write("<br/>");

document.write("  "+"0x32:"+parseInt("0x32"));

document.write("<br/>");

document.write("  "+"parseInt('15*3',10)="+parseInt("15*3",10));

document.write("<br/>");

</script>

<b>6.isNaN()<br/></b>

<script type="text/javascript">

document.write("  "+"isNaN(\"5454g\")="+isNaN("5454g"));

document.write("<br/>");

document.write("  "+"isNaN(\"789\")="+isNaN("789"));

document.write("<br/>");

</script>

</div>

</body>

</html>

For the first piece of code we know:

eval() function, the parameter is a string type, the main function is to execute the string as script code
escape() is to encode the string.
unescape() is to decode the code that builds a function.
parseFloat () parses a string and returns a floating-point number, otherwise it returns NaN. During the function conversion process, the conversion is terminated when the first non-number is encountered.
parseInt() parses a string and returns an integer, otherwise it returns NaN. During the function conversion process, the conversion is terminated when the first non-number is encountered.
The main function of isNaN() is to check whether its parameter is a non-numeric value, if the parameter is to return False, otherwise it returns True

2.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> Date object and its methods</title>

<script type="text/javascript">

var mydate=new Date();

var myyear=mydate.getFullYear(); 

document.write(" Year:"+myyear); 

document.write("<br/>");

var myMonth=mydate.getMonth(); 

document.write(" Month:"+myMonth); 

document.write("<br/>");

var mydays=mydate.getDate();

document.write(" Date:"+mydays); 

document.write("<br/>");

var weekday=[" day", "one", "two", "three", "four", "five", "six"];

document.write("星期：" + weekday[mydate.getDay()] );

document.write("<br/>");

pageOpen=new Date();

function stay(){

pageClose=new Date();

minutes=(pageClose.getMinutes()-pageOpen.getMinutes());

seconds=(pageClose.getSeconds()-pageOpen.getSeconds());

time=(seconds+(minutes*60));

time=(time+"秒");

alert(" You are staying here"+time+"Welcome to come again next time");

}

</script>

</head>

<body>

<input type="button" value="停留时间" onClick="stay()">

</body>

</html>

For the code of the second paragraph:

getFullYear() returns the year as four digits

getMonth() returns the month from the data object

getData() returns the day of the month from the data object

Then getMinutes() getSeconds() gets the difference between minutes and seconds and the last minutes and seconds, and the final stay time.

4. Program design description, source code and running results

1. Program Design Description:

Use various methods of the data object to implement the timer.

2. Source code:

<!DOCTYPE html>

<head>

<title>Timer</title>

var timeResult=0

was hours

function timedCount() {

document.txtForm.txt.value=timeResult;

timeResult=timeResult+1

timer=setTimeout("timedCount()",1000)

}

function stopCount() {

clearTimeout(timer)

}

function clearCount() {

document.txtForm.txt.value=0

}

</script>

</head>

<body>

</form>

</body>

<html>

operation result:

Experiment summary

Understanding of JavaScript's built-in functions:

The first category: conventional functions
include the following 9 functions:
(1) The alert function displays an alert dialog box, including an OK button.
(2) confirm function: display a confirmation dialog box, including OK and Cancel buttons.
(3) escape function: Convert characters into Unicode codes.
(4) eval function: Calculate the result of expressing the lease formula.
(5) isNaN function: the test is (true) or not (false) is not a number.
(6) parseFloat function: Convert a string into a dotted digital form.
(7) parseInt function: convert the character string into an integer number form (major system can be specified).
(8) prompt function: display an input dialog box, prompting to wait for user input.

The second category: array function
includes the following four functions:
(1) join function: convert and connect all elements in the array into a string.
(2) length function: returns the length of the array.
(3) reverse function: reverse the order of the array elements.
(4) sort function: reorder the array elements.

The third category: date function
includes the following 20 functions:
(1) getDate function: return the "day" part of the date, the value is 1~31
(2) getDay function: return the day of the week, the value is 0~6, where 0 means Sunday, 1 means Monday, ..., 6 means Saturday
(3) getHours function: return the "hour" part of the date, the value is 0~23.
(4) getMinutes function: returns the "minute" part of the date, and the value is 0-59. See example above.
(5) getMonth function: returns the "month" part of the date, the value is 0~11. Where 0 means January, 2 means March, ..., 11 means December. See previous example.
(6) getSeconds function: returns the "second" part of the date, and the value is 0-59. See previous example.
(7) getTime function: returns the system time.
(8) getTimezoneOffset function: returns the time difference of this region (regional time difference between local time and GMT Greenwich Mean Time), in minutes.
(9) getYear function: returns the "year" part of the date. The return value is based on the year 1900, for example 99 for 1999.
(10) parse function: returns the number of milliseconds (local time) counted from 0:00 on January 1, 1970.
(11) setDate function: set the "day" part of the date, the value is 0~31.
(12) setHours function: set the "hour" part of the date, the value is 0~23.
(13) setMinutes function: set the "minute" part of the date, the value is 0~59.
(14) setMonth function: set the "month" part of the date, the value is 0~11. Where 0 means January, ..., 11 means December.
(15) setSeconds function: set the "second" part of the date, the value is 0~59.
(16) setTime function: set the time. The time value is the number of milliseconds since 0:00 on January 1, 1970.
(17) setYear function: set the "year" part of the date.
(18) toGMTString function: Convert the date into a string, which is GMT Green or Peelwich Standard Time.
(19) setLocaleString function: convert the date into a string, which is the local time.
(20) UTC function: Returns the number of milliseconds counted from 0:00 on January 1, 1970, calculated in GMT Greenwich Mean Time.

The fourth category: mathematical functions
There are 18 functions as follows:
(1) abs function: Math.abs (the same below), returns the absolute value of a number.
(2) acos function: returns the arc cosine value of a number, and the result is 0~π radians (radians).
(3) asin function: returns the arc sine of a number, and the result is -π/2～π/2 radians.
(4) atan function: returns the arctangent of a number, and the result is -π/2～π/2 radians.
(5) atan2 function: returns the polar coordinate angle value of a coordinate.
(6) ceil function: Returns the smallest integer value (greater than or equal to) of a number.
(7) cos function: returns the cosine value of a number, and the result is -1~1.
(8) exp function: returns the power value of e (natural logarithm).
(9) floor function: Returns the largest integer value (less than or equal to) of a number.
(10) log function: natural logarithm function, returns the natural logarithm (e) value of a number.
(11) max function: returns the maximum value of two numbers.
(12) min function: returns the minimum value of two numbers.
(13) pow function: returns the power value of a number.
(14) random function: returns a random value from 0 to 1.
(15) round function: returns the rounded value of a number, and the type is an integer.
(16) sin function: returns the sine value of a number, and the result is -1~1.
(17) sqrt function: returns the square root value of a number.
(18) tan function: Returns the tangent of a number.

The fifth category: string function
includes the following 20 functions:
(1) anchor function: generate a link point (anchor) for hyperlink. The anchor function sets the name of the link point of <A NAME...>, and the other function link sets the URL address of <A HREF=...>.
(2) big function: add the font to number one, which is the same as the result of the <BIG>...</BIG> tag.
(3) Blink function: make the string blink, which is the same as the result of the <BLINK>...</BLINK> tag.
(4) bold function: make the font bold, the result is the same as the <B>...</B> tag.
(5) charAt function: returns a character specified in the string.
(6) fixed function: set the font to a fixed-width font, which is the same as the result of the <TT>...</TT> tag.
(7) fontcolor function: set the font color, which is the same as the result of the <FONT COLOR=color> tag.
(8) fontsize function: set the font size, which is the same as the result of the <FONT SIZE=n> tag.
(9) indexOf function: returns the first searched subscript index in the string, and searches from the left.
(10) italics function: make the font italic, and <I>...</I> The label results are the same.
(11) lastIndexOf function: returns the first searched subscript index in the string, and searches from the right.
(12) length function: returns the length of the string. (without brackets)
(13) link function: generate a hyperlink, which is equivalent to setting the URL address of <A HREF=...>.
(14) small function: reduce the font by one size, which is the same as the result of the <SMALL>...</SMALL> tag.
(15)strike function: Add a horizontal line in the middle of the text, which has the same result as the <STRIKE>...</STRIKE> tag.
(16) sub function: display the character string as a subscript.
(17) substring function: returns a few characters specified in the string.
(18) sup function: the display string is a superscript (superscript).
(19) toLowerCase function: Convert the string to lowercase.
(20) toUpperCase function: Convert the string to uppercase.

Experiment 3 HTML Basics

1. Purpose of the experiment

1. Master the commonly used HTML language tags;

2. Use a text editor to create HTML documents and make simple form pages.

2. Experimental environment

Computer, Windows operating system

Program Analysis Description and Results

Experimental example:

Source program:

<html>

<head>

<title>Example</title>

</head>

<body bgcolor="#00DDFF">

<h1><B><I><FONT COLOR="#FF00FF">

<MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome to you</MARQUEE>

</FONT></I></B></h1>

<hr>

<h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2>

<EM>Welcome to the world of HTML</EM>

<p>This is a simple HTML document.It is to give you an outline of how to write HTML file and how the<b> markup tags</b> work in the <I>HTML</I> file</p>

<p>Following is three chapters

<ul>

<li>This is the chapter one</li>

<li><A HREF="#item">This is the chapter two</A></li>

<li>This is the chapter three</li>

</ul></p>

<hr>

<p><A NAME="item">Following is items of the chapter two</A> </p>

<table border=2 bgcolor=gray width="40%">

<tr>

<th>item</th><th>content</th>

</tr>

<tr>

<td>item 1</td>

<td>font</td>

</tr>

<tr>

<td>item 2</td>

<td>table</td>

</tr>

<tr>

<td>item 3</td>

<td>form</td>

</tr>

</table>

<hr><p>

1<p>

2<p>

3<p>

4<p>

5<p>

6<p>

7<p>

<B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B>

</p>

</body>

</html>

Experimental results:

For filling out the form:

source code:

<html>

<head>

<title>Example</title>

</head>

<h1 align=center><b><i><font color=" black">Table 1.1 Experiment 1 program analysis record form</h1>

<hr>

<table border=2 width="80%" align=center bgcolor=grey>

<tr>

<th> label</th><th>label function</th>

<th> Description used</th><th>Effect description</th>

</tr>

<tr>

<td>marquee</td>

<td>html tag - <marquee></marquee> can achieve multiple scrolling effects without js control. Using marquee tags can not only move text, but also move pictures, tables, etc. Just enter the content to be scrolled inside <marquee></marquee></td>

<td>

direction indicates the direction of scrolling, the value can be left, right, up, down, the default is left

behavior indicates the way of scrolling, and the value can be scroll (continuous scrolling) slide (sliding once) alternate (scrolling back and forth)

loop indicates the number of loops, the value is a positive integer, and the default is infinite loop

scrollamount indicates the movement speed, the value is a positive integer, the default is 6

scrolldelay indicates the pause time, the value is a positive integer, the default is 0, and the unit is milliseconds

align indicates the vertical alignment of the element, the value can be top, middle, bottom, the default is middle

bgcolor indicates the background color of the motion area, the value is the hexadecimal RGB color, and the default is white

height and width represent the height and width of the motion area, and the value is a positive integer (unit is pixel) or a percentage. The default width=100% height is the height of the element in the label.

hspace and vspace represent the horizontal distance and vertical distance from the element to the area boundary, the value is a positive integer, and the unit is pixel.

οnmοuseοver=this.stop() οnmοuseοout=this.start() means scrolling stops when the mouse is above the area, and continues scrolling when the mouse moves away</td>

<td>behavior (control scrolling)

bgcolor (background color of text scrolling range)

direction (direction of text scrolling)

width (determines the width of the rectangular range of the scrolling text on the page)

height (determines the height of the rectangular range of the scrolling text on the page)

hspace (space between scrolling rectangles and surrounding space)

vspace (space between scrolling rectangles and surrounding space)

loop (number of times to scroll the text)

scrollamount (speed of text scrolling)

scrolldelay (speed of text scrolling)

align (the scrolling text is located at the top, bottom, left, and right positions of the inner border of the distance shape)</td>

</tr>

<tr>

<td>table</td>

The <td> tag defines an HTML table.

A simple HTML table consists of a table element and one or more tr, th, or td elements.

The tr element defines the table rows, the th element defines the table header, and the td element defines the table cells.

More complex HTML tables may also include caption, col, colgroup, thead, tfoot, and tbody elements</td>

<td>

tr table row, td table cell, th table header

border=“1” or “” —（table）

align=“left” 、center、right —（tr,td）

valign=“top”、middle、bottom —（tr,td）

bgcolor=“#000” —（table,tr,td）

attributes in td

width=“npx”

height=“npx”

colspan= "n" -- (Merge n columns to the right)

rowspan= "n" -- (Merge n rows down)

Other attributes in the table

cellpadding= "10" space between cell and content

cellspacing= "10" space between cells

frame= "box" shows the outer frame of the four sides

"above" shows the upper outer border

"below" shows the lower outer border

"hsides" shows the upper and lower outer borders

"lhs" shows the left outer border

"rhs" shows the right outer border

"vsides" displays left and right outer borders

"void" no border

rules= "rows" the lines between the rows

"cols" the lines between the columns

"all" lines between rows and columns

"none" no lines

summary=“text”

The summary attribute has no effect in a web browser, and can be seen with a screen reader.

The weight of the total width of the table 's width is greater than the weight of the width of td</td>

<td>tr : It is used to define the rows in the table, and must be nested in the table tag. There are several sets of tr in the table, which means how many rows there are.

td : Used to define the cells in the table, must be nested in the tr tag, a set of tr contains several pairs of td, which means how many cells there are in the row.

caption : It is used to define the table title, and the content is centered.

The td tag mentioned above is accurately called a table row cell. In HTML, there is another kind of cell, which is the header cell, marked with the th tag

When using a table for layout, the table can be divided into the head, the body, and the foot, which are also called the head, body, and footer of the table.

align: Set the horizontal alignment of the table in the web page. The commonly used attribute values are left (display on the left), right (display on the right), and center (display on the center).

border: Set the width of the outer border of the table, the width is in pixels, and the default is 0.

cellspacing sets the cell-to-cell spacing.

cellpadding sets the spacing between the cell content and the border.

width sets the width of the table, and height sets the height of the table. </td>

</tr>

</table>

</body>

</html>

Experimental results (filling in the table):

Experimental requirements:

Write an HTML file that can output the interface as shown in the figure below. Require:

(1) Verify the format of the entered E-mail: username@domain name.

(2) Check the phone format entered: 11 digits.

(3) Gender "female" is the default option

(4) The age list options are: below 20, 20, 21, 22, 23, 24, 25, and above 25, among which "below 20" is the default option.

Program design description, source code and running results

Programming Notes: Building Forms

Build the form structure.
For output controls (create textbox, create password form, create radio button, create checkbox, create textarea, create select box, create hidden field, create button.
Processing forms (organizing form elements, validating forms, adding description labels to form components, and selecting form submission methods.

The source code of the program:

<!DOCTYPE html>

<html>

<head>

<title>INSPINIA | Basic Form</title><meta name="keywords" />

</head>

<body>

<p align="center" valign="middle"><h3 >Your basic information</h3></p>

</a>

</a>

<li><a href="#">Config option 1</a>

</li>

<li><a href="#">Config option 2</a>

</li>

</ul>

</a>

</div>

</div>

</div>

</div>

<div class="form-group"><label class="col-sm-2 control-label">Hobbies<br/><small class="text-navy">Your hobbies</small>< /label>

<div class="i-checks"><label> <input type="checkbox" value="" checked=""> <i></i> 运动/label></div>

</div>

</select>

</div>

</select>

</div>

</div>

<div class="form-group has-error"><label class="col-sm-2 control-label">Email</label>

</div>

<button class="btn btn-primary" type="submit">Rewrite all</button>

</div>

</form>

</div>

</div>

</body>

</html>

Screenshot of the running result:

, experiment summary

All form controls (text boxes, text fields, buttons, radio boxes, check boxes, etc.) must be placed between <form></form> tags.
<form method="transmission method" action="server file"></form>
1. <form>: <form> tags appear in pairs, starting with <form> and ending with </form>.
2.action: The place where the data entered by the viewer is sent, such as a PHP page (save.php).
3.method: The method of data transmission (get/post).
Let's get to know the form control labels

text input box, password input box
<form>
    <input type="text/password" name="name" value="text" />
</form>
1. type:

   when type=" text", the input box is a text input box;

   when type="password", the input box is a password input box.

2. name: Name the text box for use by background programs ASP and PHP.

3. value: Set the default value for the text input box. (Generally play a prompt role)

Text field:
<textarea rows="number of rows" cols="number of columns">text<
/textarea> 1. <textarea> tags appear in pairs, starting with <textarea> and ending with </textarea>.
2. cols: The number of columns in the multi-line input field.
3. rows: the number of rows in the multi-line input field.
4. You can enter the default value between the <textarea></textarea> tags.

Selectable radio button, check box
<input type="radio/checkbox" value="value" name="name" checked="checked"/>
1, type:
   When type="radio", the control is
   When the radio button type="checkbox", the control is a check box
2. value: the value submitted to the server (used by the background program PHP)
3. name: name the control for use by the background program ASP and PHP
4. checked : When checked="checked" is set, the option is selected by default

list box
<selected>
    <option>option one</option>
    <option>option two</option>
    <option>option three</option> </option> </option>
selected>

Submit button:
<input type="submit" value="Submit">

value: the value displayed on the button

Experiment 4 CSS+DIV page layout

1. Purpose of the experiment

1. Understand the separation of web content and presentation;

2. Familiar with the basic syntax and format of CSS;

3. Understand the common layout structure of the page;

4. Learn to make a blog page with CSS+DIV layout.

2. Experimental environment

Computer, Windows operating system

3. Program Analysis Description and Results

There are four ways to apply CSS in a web page, namely: inline CSS style, embed CSS style, link external CSS style sheet and import external CSS style sheet.

Inline CSS styles

(2) Embedded CSS styles

(3) External style sheet

(4) Import external CSS styles

4. Program design description, source code and running results

1. Program Design Description

Combining HTML5 semantic tags, using DIV+CSS web page layout technology to design a personal blog page. Require:

(1) The header tag defines the head area of the page; the nav tag defines the navigation area; the div tag defines the content block in the middle, and the section tag is used to nest two article article areas on the left, and each article area should contain the title area of the head , paragraph content and page footer; the sidebar is designed with aside on the right; the copyright information is defined with the footer tag at the bottom, as shown in Figure 2.1.

(2) Write an external CSS file, and set the style of each label attribute used in the main file, such as background color, font, font size, alignment, etc.

(3) Use an unordered list to implement a horizontal navigation menu. Key points: eliminate the bullets in front of the unordered list, and convert the default vertical arrangement to a horizontal arrangement.

(4) Set the hyperlink style of the navigation menu, the key point: the link target is #, and the background color changes when the mouse hovers over the hot word in the navigation bar.

2. Source code

(1) HTML source code

<html>

<head>

<title>Someone's Blog</title>

</head>

<body>

<h1><b>某某的博客</b></h1>

</header>

<nav>

</ul>

</nav>

<div>

<p class="font01">HTML是下一代HTML的标准，目前任然处于发展阶段。经过了Web2.0时代，基于互联网的应用已经越来越丰富，同时也对互联网应用提出了更高的要求。</p>

</article>

<p class="font01">对于前端是设计师来说，虽然CSS3不全是新的技术，但它却重启了一扇奇思妙想的窗口。</p>

</article>

</div>

<aside>

<p class="font03">HTML5和CSS3正在掀起一场变革，它不是在替代Flash，而是正在发展成为开放的Web平台，不但在移动领域建功卓著，而且对传统的应用程序发起挑战。</p>

</aside>

</footer>

</body>

</html>

css源码

.font01{

font-family: 微软雅黑;

font-size: larger;

}

.font03{

color: white;

line-height: 45px;

font-size: larger;

}

.font02{

font-family: 微软雅黑;

font-size: larger;

color:gray;

}

.nav a:hover{

background:red;

margin:20px auto;

}

.li{

float:left;

list-style:none;

padding:0px 20px;

font-size:20px;

}

header{

height:50px;

border:2px solid alpha;

margin:20px auto;

text-align:center;

}

nav{

height:50px;

border:1px solid blue;

margin-bottom:5px;

background-color:#33CCFF;

}

div{

height:650px;

width:80%;

clear:both;

float:left;

}

article{

height:250px;

border:2px solid blue;

margin:40px;

}

aside{

width:15%;

height:450px;

border:1px solid gray;

background-color:gray;

margin-top:40px;

margin-right:50px;

float:right;

}

footer{

clear:both;

height:100px;

text-align:center;

line-height:100px;

}

3.运行结果

五、实验总结

Css的样式属性包含了对文本、段落、背景、边框、位置、列表和光标效果等众多属性的设置，通过设置这些css样式，是我对基本知识有了更深的了解，对今后的学习和工作有了更大的帮助。

[Basic R of web programming] Experiment report (JavaScript events, JavaScript built-in functions and built-in objects, HTML basics, CSS+DIV page layout)

Experiment 2 JavaScript built-in functions and built-in objects

1.

2.

Guess you like