JavaScript creates its own object

xiaoxiao2021-04-10  336

Use JavaScript to create your own objects. Although the function of JavaScript and browser itself is very powerful, JavaScript provides a method of creating a new object. Many complex work can be completed without having to make or other multimedia tools like hypertext identification languages.

Creating a new object in JavaScript is very simple. First it must define an object, then create an instance for the object. This instance is a new object that has the basic feature of the object definition.

First, the definition of the object

The definition of the JavaScript object, its basic format is as follows:

Function Object (Property)

This.prop1 = prop1 this.prop2 = prop2 ... this.meth = functionName1; this.meth = functionName2; ...

In an object's definition, it can indicate its properties and methods for this object. An example of an object is constituted by attributes and methods. As is the definition of the university object:

Function University (Name, City, Creatdate URL)

THIS.NAME = Name this.city = city this.creatdate = new date (create) this.url = URL

The basic meanings are as follows:

Name- Specify a "unit" name. City-"Unit" City. Creatdate-records the update date of the UNIVERSITY object. URL-This object points to a URL.

Second, create an object instance

Once the object definition is complete, you can create an instance for the object:

NewObject = new Object ();

Where newobjet is a new object, Object has defined a good object. example:

U1 = New University ("Yunnan Province", "Kunming", "January 05, 199712: 00: 00", "http://www.yn.km")

U2 = new University ("Yunnan University of Electronic Science and Technology", "Kunming", "January 07, 1997 12:00:00", "htlp://www.ynkj.cn")

Third, the use of object methods

In addition to the use of properties in the object, it is sometimes necessary. In the definition of the object, we see this.meth = functionName statement, that is, the method of defining objects. The method of substantive object is a function of functionName, which has achieved its intent by it.

Example Add a method in the university object that shows it itself and returns the corresponding string.

Function University (Name, City, CreateDate, URL)

THIS.NAME = Name; this.city = city; this.created); this.url = url; this.Showuniversity = showunance;

One of this.Showuniversity is defined a method --- showuniversity ().

The showuniversity () method is to implement the display of the University object itself.

Function showuniversity ()

FOR (VAR PROP IN THIS) ALERT (Prop = " THIS [PROP]"); where Alert is the internal function in JavaScript, which shows its string.

Fourth, array in JavaScript

Creating an array in JavaScript using NEW is not provided with a significant array type like other languages, but you can define an array with Function and create an array with a subscript using the NEW object operator. Thereby, any data type can be implemented. a, define the array of objects Function ArrayName (size) {this.length = size; for (var x =; x <= size; x ) THIS [x] = 0; Reture this;} where arrayname is a name for defining arrays Sub, size is the number of values ​​(1-size), ie array elements. The array of current objects is defined by the For loop, and finally returns this array. As can be seen, the arrays in JavaScript are from 1 to size, which is different from other 0 to SIZE an array representation. Of course, you can adjust the subscript of the array from 1 to SIZE to 0 to Size-1 as needed. It can be implemented by the following: function arrayname (size) for (VAR x = 0; x <= size; x ) THIS [x] = 0; this.lengHt = size; return this; It can be seen from above is just adjustment The location of this.lenght, which is used to store the size of the array. Thus the subscript of the adjusted array will be consistent with other languages. However, the reader is noted that since the array subscript is from 1 to Size, the object functions in JavaScript are more powerful. b. Creating an array instance After a array definition is complete, you can't use it immediately, you must create an array instance for the array: myarray = new arrayname (n); and assigns the initial value: MyArray [1] = "string 1"; MyArray [2] = "String 2"; MyArray [3] = "String 3"; ... myarray [n] = "String N"; once the number is set to the initial value, there is an array True data is available, you can reference directly during programming. Create a multi-dimensional number of Function CreatMarray (Row, COL) {var index = 0; this.Length = (Row * 10) col for (var x = 1; x <= row; x ) for (var y = 1; y < = col; y ) index = (x * 10) y; this [index] = "";} mymarray = new createmarray (); after passing Mymarray [11], Mymarray [12], Mymarray [13], MyMarRay [21], mymarray [22], mymarray [23], ... Internal array

In Java In order to facilitate the operation of the internal object, you can use the Forms, Frames, Element, Links, and anchors anchor (anchors) arrays to implement object access.

Anchors []: Use the "a name =" anchorname "identifier to create an anchor link. Links []: Use the to define a super-text link item. Forms []: This array is established when using multi-forms in the program. Elements []: Use the array when you use from an element in a window. Frames []: When establishing a framework, use the array anchors [] Access to the form (it is specified by "form name =" form1 "), link [] is used to link to the anchor (It is specified by "a href = url"). Forms [] reflects the properties of the form, and Anchors [] reflects the link properties in the web page. Documents for anchors:

defined the first anchor

HTML CODE

Define the second anchor

HTML CODE

Concrete anchor link

Concurrent link

.

This document segment has established a link on both sides and access these anchors through Anchors []. Document.Anchors [0] reflects the first anchor, and Document.Anchors [1] reflects the information about the second anchor.

V.

Example 1: An example of a dynamic text scroll.

TEST5_1.HTM

</ title></p> <p><script language = "javascript"></p> <p>With (Top.Window.Location)</p> <p>{Baseurl = href.substring (0, href.lastindexof ("/") 1)}</p> <p>TOTAL_TOC_ITEMS = 0;</p> <p>Current_overid = "";</p> <p>Last_overId = ""</p> <p>Browser = navigator.Appname;</p> <p>Version = parseint (navigator.appversion);</p> <p>Client = NULL;</p> <p>Loaded = 0;</p> <p>IF (browser == "Netscape" && version> = 3)</p> <p>Client = "ns3";</p> <p>Function TOC_ITEM (IMG_NAME, ICON_COL, Width, Height) {</p> <p>IF (client == "ns3") {</p> <p>IMG_PREFIX = BaseURL IMG_NAME;</p> <p>THIS.ICON_COL = icon_col;</p> <p>THIS.TOC_IMG_OFF = New Image (Width, Height);</p> <p>THIS.TOC_IMG_OFF.SRC = IMG_PREFIX "_OFF.GIF";</p> <p>THIS.TOC_IMG_ON = New Image (Width, Height);</p> <p>THIS.TOC_IMG_ON.SRC = IMG_PREFIX "_on.gif";</p> <p>}</p> <p>}</p> <p>Function new_toc_item (IMG_NAME, ICON_ROW, Width, HEight) {</p> <p>TOC_ITEM [IMG_NAME] = New TOC_ITEM (IMG_NAME, ICON_ROW, Width, Height);</p> <p>Function TOC_MOUSEOVER (ItemID) {</p> <p>IF (client == "ns3") {</p> <p>Current_overid = ItemID;</p> <p>IF (current_overid! = last_overid) {</p> <p>Document [current_overid] .src = TOC_ITEM [current_overid] .toc_img_on.src;</p> <p>IF (Last_Overid! = ") {</p> <p>Document.images [last_overid] .src = TOC_ITEM [Last_Overid] .toc_img_off.src;</p> <p>}</p> <p>Last_overid = current_overid;</p> <p>}</p> <p>}</p> <p>}</p> <p>Function TOC_MOUSEOUT () {</p> <p>IF (client == "ns3") {</p> <p>IF (current_overid! = ") {</p> <p>Document.Images [current_overid] .src =</p> <p>TOC_ITEM [Current_Overid] .toc_img_off.src;</p> <p>}</p> <p>Current_overid = "";</p> <p>Last_overId = ""</p> <p>}</p> <p>}</p> <p>New_toc_item ("1", 2, 1220, 20);</p> <p><! - begin</p> <p>Function bannerObject (p) {</p> <p>THIS.MSG = Message</p> <p>THIS.out = "" "</p> <p>THIS.POS = position</p> <p>THIS.DELAY = Delay</p> <p>THIS.I = 0</p> <p>this.Reset = ClearMessage}</p> <p>Function ClearMessage () {</p> <p>THIS.POS = position}</p> <p>Var position = 50;</p> <p>Var delay = 150;</p> <p>Var message = "This is an example of dynamic JavaScript text display;</p> <p>Var scroll = new bannerObject ();</p> <p>Function scroller () {</p> <p>Scroll.out = "";</p> <p>IF (scroll.pos> 0)</p> <p>For (scroll.i = 0; scroll.i <scroll.pos; scroll.i )</p> <p>{scroll.out = "";</p> <p>IF (scroll.pos> = 0)</p> <p>Scroll.out = scroll.msg</p> <p>Else</p> <p>Scroll.out = scroll.msg.substring (-scroll.pos, scroll.msg.length)</p> <p>Document.noticeForm.notice.Value = scroll.out</p> <p>Scroll.out = "";</p> <p>Scroll.pos -;</p> <p>Scroll.pos -;</p> <p>IF (scroll.pos <- (scroll.msg.length) {scroll.reset ();} settimeout</p> <p>('scroller ()', scroll.delay);</p> <p></ script></p> <p></ hEAD></p> <p><body οnlοad = "scroller ()" bgcolor = "# 000000" link = "# c0c0c0" vlink = "# c0c0c0" alink = "# 008080"</p> <p>Text = "# c0c0c0"></p> <p><table border = "0" cellspacing = "0" Cellpadding = "0"></p> <p><tr></p> <p><td width = "100%> <form name =" noticeform "></p> <p><p> <input type = "text" name = "notice" size = "40"</p> <p>Style = "Background-Color: RGB (192, 192, 192)> </ p></p> <p></ form></p> <p></ td></p> <p></ TR></p> <p></ TABLE></p> <p></ center> </ div></p> <p></ body></p> <p></ html></p> <p>Example 2: Example of color change.</p> <p>TEST5_2.HTM</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-133278.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="133278" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.048</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = '1qjb0ZiWHXu3uVpzruUHnN13ofVdGSx6d9UfFDxCkGvTP_2BI7OfNxZXLK0z5ntqp2psyof4Lfc25qlNFDOSXx_2Fw_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>