Collecting related dojo materials from the Internet is always daunting. The first hello World made a lot of things, such as widgets, Custom Script labels, and CSS files to be introduced, such as djconfig and dojo. require. According to the examples provided in the network, because too many dojo packages are involved, and I am a beginner, I have not been configured well. It gives me the feeling that it is "too messy ". How can I use dojo in this complicated way?
I have refined the problem, so I just need to regard dojo as a common JS class library and only introduce dojo. JS, just like prototype. Can I use it? OK!
Let's take a look at how to use several basic functions in Dojo. js.
1. How to introduce dojo. js
Note:The release package of dojo is divided into Ajax and Widget versions. Here I downloaded the dojo-0.3.1-ajax version
[
To download the complete dojo framework, click here to download: http://download.dojotoolkit.org/release-0.3.1/dojo-0.3.1-ajax.zip.
]
The downloaded dojo. JS is compressed (remove comments and space)CodeWe recommend that you read dojo. JS. uncompressed. JS, dojo. javascript has about 127 KB, but 211 KB before compression. Why is it so big? It has already integrated some common modules into dojo. JS, so it looks a little bigger. build.txt shows the default dojo. which modules does JS contain.
Next, we will introduce the dojo. js file in the subdirectory named "dojo.
Instance:<SCRIPT type = "text/JavaScript"Src = "dojo/dojo. js"Djconfig = "isdebug: True, bindencoding: 'utf-8'"> </SCRIPT>
Note: The djconfig attribute. The first isdebug indicates whether to enable the firebug console, and the second bindencoding indicates the encoding used by XMLHTTP, which will be used later.
2. Usage of dojo. Connect ()
Note:Listen to common DOM events
Instance 1:When the page is loaded, "Hello World!" Is output !"
<HTML>
<Head>
<Meta name = "generator" content = "HTML tidy, see http://www.w3.org/">
<Meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1">
<Title> dojo, hello World! </Title>
<SCRIPT type = "text/JavaScript" src = "dojoroot/dojo. js" djconfig = "isdebug: True, bindencoding: 'utf-8'">
</SCRIPT>
<SCRIPT type = "text/JavaScript">
Function Init (){
Alert ("Hello world! ");
}
Dojo. Connect (Dojo, "loaded", "init ");
</SCRIPT>
</Head>
<Body>
<Input id = "hello" value = "hello" type = "button"/>
</Body>
</Html>
Instance 2:When the page is loaded, "hello Karl" is output"
<SCRIPT type = "text/JavaScript">
VaR name = "mark"
Function sayhello ()
{
Alert ("hello" + this. Name );
}
VaR OBJ = {
Name: "Karl"
}
Dojo. addonload (function (){
VaR BTN = dojo. byid ('hello ');
Dojo. Connect (BTN, "onclick", OBJ, sayhello); // pay attention to the third and fourth parameters in this line.
});
</SCRIPT>
3. Usage of dojo. event. Connect (in combination with the package mechanism)
Note:After the event package is introduced, how does one listen to DOM events? Powerful dojo. event. Connect.
Instance:When the page is loaded, "Hello World!" is displayed !"
<HTML>
<Head>
<Meta name = "generator" content = "HTML tidy, see http://www.w3.org/">
<Meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1">
<Title> dojo, hello World! </Title>
<SCRIPT type = "text/JavaScript" src = "dojo/dojo. js" djconfig = "isdebug: True, bindencoding: 'utf-8'"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
Dojo. Require ("dojo. event .*");
Function Init (){
Alert ("Hello world! ");
}
Dojo. event. Connect (Dojo, "loaded", "init ");
</SCRIPT>
</Head>
<Body>
</Body>
</Html>
4. Usage of dojo. addonload ()
Note:Automatic page loading
Instance:When you click the button, a dialog box is displayed. That is, the onclick event of the button
<HTML>
<Head>
<Meta name = "generator" content = "HTML tidy, see http://www.w3.org/">
<Meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1">
<Title> dojo, hello World! </Title>
<SCRIPT type = "text/JavaScript" src = "dojo/dojo. js" djconfig = "isdebug: True, bindencoding: 'utf-8'">
</SCRIPT>
<SCRIPT type = "text/JavaScript">
Dojo. Require ("dojo. event .*");
Function helloworld (){
VaR myfirst = Document. getelementbyid ("hello"). value;
Alert (myfirst );
}
Dojo. addonload (Function (){
Alert ("Hello, welcome! ");
VaR first = Document. getelementbyid ("hello ");
Dojo. event. Connect (first ," Onclick ", Helloworld );
})
</SCRIPT>
</Head>
<Body>
<Input id = "hello" value = "this is my first page! "Type =" button "/>
</Body>
</Html>
5. Usage of dojo. byid
Note:Dojo. byid is equivalent to commonly used document. getelement.
Instance:Clear the text box when loading the page
<HTML>
<Head>
<Meta name = "generator" content = "HTML tidy, see http://www.w3.org/">
<Meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1">
<Title> dojo, hello World! </Title>
<SCRIPT type = "text/JavaScript" src = "dojo/dojo. js. uncompressed. js" djconfig = "isdebug: True, bindencoding: 'utf-8'">
</SCRIPT>
<SCRIPT type = "text/JavaScript">
Dojo. Require ("dojo. event .*");
Function helloworld (){
VaR myfirst = Document. getelementbyid ("hello"). value;
Alert (myfirst );
VaR buttoncontent = dojo. byid ("dropcontent ");
Buttoncontent. value = myfirst;
}
Dojo. addonload (function Init (){
Dojo. byid ("Dropcontent"). value = "";
Alert ("Hello, welcome! ");
VaR first = Document. getelementbyid ("hello ");
Dojo. event. Connect (first, "onclick", helloworld );
})
</SCRIPT>
</Head>
<Body>
<Input id = "hello" value = "this is my first page! "Type =" button "/> <input id =" dropcontent "value =" "type =" text "/>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
