One of my friends asked me how to dynamically include a reference to the JavaScript file into an html file.
Sincerely to say, I didn't know what to answer. But no additional effort was needed to find the answer, it's easy.
If you are familiar with JavaScript, then you can think of it yourself and you'll find the answer.

I wrote a function in JavaScript which makes all the work: dynamically creates object corresponding to the "<script>" tag, assigns it's "src" property a value of file name, and then adds this object to the current document. Have a look:

<script language="javascript" type="text/javascript">
function IncludeJS(file)
{
var scr = window.document.createElement("script");
scr.src = file;
document.body.appendChild(scr);
}
</script>

All works fine. One more thing I would mention here:
When invoking a method that is contained in dynamically referenced script file, always make a little more coding to ensure that no script errors will be thrown. For this purpose, my test button's "onclick" event checks, if the method that SHOULD be in the included file, exists. Look at this button tag:

<input type="button" value="Invoke Sample Method" onclick="if (window.SampleMethod) SampleMethod()" />

That's all about today's JavaScript.

Did you know that almost any HTML control can be switched into edit mode? This effect can be achieved easily: just add CONTENTEDITABLE attribute to the component that must be an editor.

Place the following tag into the source of you HTML page and view it in browser:

<div CONTENTEDITABLE>some editable text</div>

As you can see, the text "some editable text" is editable now. In the easiest editing scenario, you can copy-paste the content from Word document to that editable area. For more complicated scenarios you can use document.execCommand method. (For advanced scenarios you can use a free and ready to use HTML editor tinyMCE).
Now let's talk about how you can get the content of that div as HTML. Depending on your needs, you can just get the content and do some operation with it. In my practice I had few situations when I wanted the content to be submitted to the server. As you probably know, only HTML input controls have ability to submit their values to the server. For this purpose, here I consider the code fragment that shows how to move the HTML value of the editable div to a Textarea control that actually can submit its value. The Input-button tag is added to move the content from one control to another.

<div id="text" CONTENTEDITABLE>some editable text</div>
<textarea id="content"></textarea>
<input type="button" value="get HTML content" onclick="content.value=text.innerHTML">

That's all, a little but sometimes very useful thing.
And one more: Button element can be created using not only the standard input tag, but also using a button tag like this:

<button value="some value">some text</button>

Note, that the button has a text "some text" instead of "some value" as you might think at a first look.

Thanks for your time.

Hello everyone. How about making world better? Sounds good.

Do you know that JavaScript doesn't allow drawing? I wanted to create some drawing capabilities for some reason. However, it won't be very important, if your web site is built using ASP.NET technology. There is a great way for generating images dynamically in asp.net.
A little more difficulties are met while using PHP, or no server side scripting. I remember once I had a web-site written in PHP, but a hosting server was not supporting image generating. Thus, I had no chance to draw any user friendly images to the client browser.
And of course, there is no way to generate any kind of images without server side script hosting.
Yesterday I decided to write a little JavaScript code. And today I want to consider that code with you.
My only wish was, to create some drawing capabilities, as simple as possible. Sometimes a human wants to terminate the borders, so called Rules. In the end of this article you will understand that there can be created something for drawing purposes in JavaScript.
As there is nothing for drawing in JavaScript, the first thing that I needed is something that would be a drawing board, and as long as JavaScript works well with HTML components (furthermore, it's created for working with HTML components), I decided to use them as a boards. Decision stopped on the html DIV component. So I placed the DIV on my empty HTML page.
Then the logic built itself from the scratch.

What is drawing? What means to draw a line, a circle, rectangle, etc.? Any of them contain points, right? Anything can be drawn if we can draw a point. So, let's start thinking how we can do that.
I remember my first impression, when I looked at the picture containing just a point very closely. When I zoomed into a 500%, I was surprised; point became a rectangle, great effect of the computer technologies. Think of that as a great point to start from, indeed everything placed on the HTML page is displayed like rectangles. Did you catch an idea? Yes, I mean that we can create a component on the drawing board (actually HTML DIV component), with a very little sizes, and believe me, that wouldn't be nothing else than a point. Let's see how I wrote a code:

function Graphics_DrawPoint(x,y)
{
var div = document.getElementById(DivID);
var point = document.createElement("<div>");
point.style.position="absolute";
point.style.top=document.body.offsetTop + div.offsetTop + y;
point.style.left=document.body.offsetLeft + div.offsetLeft + x;
point.style.backgroundColor=Brush_Color;
point.style.width=Brush_Size;
point.style.height=Brush_Size;
div.appendChild(point);
}

Now, as we can draw a point, we can draw a line as well. The only thing we need is to remember a formula of line from the mathematics. As a theory says, if we have two points (x0,y0) and (x1,y1), then any (x,y) point on the line will satisfy the following formula: (x-x0)/(x1-x0) = (y-y0)/(y1-y0). So how can we use that? If given two points, we must generate all the points between them. Of course it will be easier if we generate only one from the pair of coordinates, and then calculate another one using the first one. So, functions calculating x using y and vice versa will look like this:

function Graphics_CalculateLineX(y,x0,x1,y0,y1)
{
return ((y-y0)*(x1-x0)/(y1-y0))+x0;
}

function Graphics_CalculateLineY(x,x0,x1,y0,y1)
{
return ((x-x0)*(y1-y0)/(x1-x0))+y0;
}

and after these functions we can of course write a function that will draw a line (having in mind the fact we already can draw a point):

function Graphics_DrawLine(x0,y0,x1,y1)
{
var x;
var y;
if (Math.abs(x0-x1)>Math.abs(y0-y1))
{
x = Math.min(x0,x1);
while (x<x1)
{
y=Graphics_CalculateLineY(x,x0,x1,y0,y1);
Graphics_DrawPoint(x,y);
x++;
}
}
else
{
y = Math.min(y0,y1);
while (y<y1)
{
x=Graphics_CalculateLineX(y,x0,x1,y0,y1);
Graphics_DrawPoint(x,y);
y++;
}
}
}

Very easy, isn't it?
Now let's think a little about a fact, that all these functions are executed on the client machine, meaning that they are using a memory of the client machine. As more points are drawn as more memory is needed. But don't forget a fact that: in our days, when the internet network is developing and growing, this must not be a problem. Any web page, that is accessed across the web, using a simple HTML browser, parses and displays a large amount of HTML components. To prove that, you can open any average size web site and view it's HTML source. But anyway, trying to make a world better must not become a warranty of memory overflow. Yes, a developer must make a decision to make a little pressing on the client machine during execution of some code, if there's no other way to do that. My next functions will show that some drawing purposes can be achieved without crating a large amount of points dynamically.
Next step is to draw a rectangle. As mentioned above, I'm not going to draw the rectangle using lines, because in this case I consider a rectangle that is positioned so as its sides are parallel to the edges of our screens. Any other king of rectangles, or polygons, can be drawn using a line drawing functions. In my case, rectangle is the same starting point, saying that every component on an html page is a simple rectangle. So, a task of drawing rectangle becomes a task of creating a transparent component that displays only borders. Those borders will appear as a rectangle itself. It will work fast, and the solution will be the same as needed:

function Graphics_DrawRectangle(x0,y0,x1,y1)
{
var div = document.getElementById(DivID);
var rect = document.createElement("<div>");
rect.style.position="absolute";
rect.style.top=document.body.offsetTop + div.offsetTop + Math.min(y0,y1);
rect.style.left=document.body.offsetLeft + div.offsetLeft + Math.min(x0,x1);
rect.style.background="transparent";
rect.style.border=Brush_Color + " " + Brush_Size + "px solid";
rect.style.width=Math.abs(x1-x0);
rect.style.height=Math.abs(y1-y0);
div.appendChild(rect);
}

I don't want to waste a time explaining how to create a function that will allow us drawing a filled rectangle. Think a little about it.
An interesting step is to draw a circle. Let's again, remember a little mathematics. Again, a formula says that if we draw a circle with center at point with coordinates (0,0) then any point with coordinates (x,y) satisfies any of the next two formulas: 1) x*x + y*y = r*r. 2) sin(alpha) = y/r, cos(alpha) = x/r. where alpha is an angle calculated in the backward direction of a clock. First formula is a little more difficult to use, because calculating all x and y coordinates will take a little more time. It's easier to change alpha from 0 to 360 and find all the coordinates. But wait, the circle's bottom side repeats it's upper side, so we can calculate only one side from them and draw the same points as transformed to the middle line of the circle... But wait again, we can see that a part of circle contained between angles 90 and 180 repeats a part contained between angles 0 and 90, and applying the same logic we can calculate only a one-forth part of the circle and draw all other points as transformed to the middle line in horizontal or in vertical direction. And one more thing, as I found the topic in the documentation, JavaScript Math.sin() function needs a parameter in radians, not in degrees. So a function looks like this:

function Graphics_DrawCircle(x,y,r)
{
var div = document.getElementById(DivID);
var alpha = 0;
while (alpha <= (Math.PI/2))
{
var x1 = r * Math.cos(alpha);
var y1 = r * Math.sin(alpha);
Graphics_DrawPoint(x+x1,y+y1);
Graphics_DrawPoint(x+x1,y-y1);
Graphics_DrawPoint(x-x1,y+y1);
Graphics_DrawPoint(x-x1,y-y1);

alpha += (Math.PI/180);
}
}

Ok. I think I have explained a big amount of my thoughts about JavaScript drawing capabilities. All the code can be found in the attached file. I just changed a code so that callings to these functions look like object oriented, like this:

var g = new Graphics("divContainer");
g.Brush.Color='green';
g.DrawLine(10,10,200,50);

There are also added a little more functions, like displaying a string and filling a rectangle, and of course drawing an arc. You can add more and more functions as your needs request.
When you can use it?
For example, when displaying a result of user surveys on the page, and indeed without any ready images saved on the server. A simple shape can be drawn without any other tools.

I hope you found something interesting here, in this topic.

Have a good day!

Attached File: Sample.htm

Why we need it? - In order to make some programmatic changes to the page. Have in mind - it works on the client side that means no JavaScript can be executed on the server. In general terms, that means, JavaScript does not do any server works like connecting to the database, calculating user rights, etc.
But there are several exceptions. For example, there are special ways for JavaScript to connect to the database, like using some special object types, or dlls. They can be used in JavaScript like assemblies that contain definitions of objects for implementing some logic of works. My own mind is, it's not correct to use such decisions in your work, because someone can view your JavaScript code as it's written down in clear way to the client browser. And of course, if you have written SQL database name, server name, username and password in clear format, it's not secure as you already understand.
Some other exceptions: JavaScript can be encrypted so that a general user of browser can not read your JavaScript code, as it's converted to some special character set, not recognizable for human eyes. But this kind of decision also contains some risk. There are a ways to decrypt back your encrypted code. Are you ready to take all the risk on your own? (But encrypting your code makes it a little harder for other coders to take your code and use it in their projects. It's useful if your code contains some high-intellectual logic that you don't want others to see and to still for example)

So, in general, JavaScript is used to make some little logical works on the client side, also for designing purposes, for example changing background color dynamically, or as an answer on some client action, not refreshing all the page.

Have you ever heard about AJAX technology? - A technology that is in most cases used to refresh some client area without refreshing the entire page. AJAX technology mainly uses JavaScript, in other words it automatically generates a JavaScript code to the client browser. But don't take too much; it doesn't make any server-side works at client side. For example if AJAX is used to collapse some part of page and expand another one, it's executed fully at client side, without refreshing the page. But if you use AJAX for refreshing the client area that contains exchange rates, and those rates are loaded from the database, then it will work fine, but not only at client side. In this case Page's Load event occurs also. But that little mechanism that sends the request to the server and then handles the request and refreshes the little area on the page, that's exactly a JavaScript, and acts as a part of AJAX generally.

How to learn it? Have a look at Microsoft Developer Network (MSDN) Library (http://msdn.microsoft.com).

Why I wrote this? I just opened internet explorer and hit Escape button as I saw browser was trying to enter my home page. Page loading process canceled and displayed the message, and a little link, possibly automatically generated by the browser, saying "click here to refresh", displaying a JavaScript code on mouse-over:

"javascirpt:location.replace("http://MyHomePage")".

Good JavaScript sample to begin with. Give a little attention to it and you will understand it's very useful.

And have in mind, here I've mentioned a fact that is often forgotten by the coders: even refreshing only a little part of ASP.NET page using AJAX, it makes a whole page to reload, and all the code contained in Page_Load event handler is executed.

Thank you for your time.

I decided to make a next step in researching the ASP.NET calendar control. I've used it several times, but never could find the way how I could change the navigate URLs that is navigated when the user clicks a day on the calendar control.

One decision that I have seen, is to create a user control for calendar, and then hard code all the logic in it. It's the same as to create a bicycle when it already exists. No, thanks.

And this time I just started searching through Google. Found something. One guy wrote on his blog, how to change background colors of the cells of calendar control. Really good work. The only thing you have to remember is a DayRender event of calendar control.
But one moment, the author of that blog shows us how to handle that event and write our logic. But it all's done outside of the control. When should we do so and when should we inherit from the control? Let's think.
Few weeks ago I have created a user control, which contains a calendar control, in this case sure, I really prefer to write the logic of the event handling outside the calendar control, because, anyway, this logic is placed inside the user control. I think it's a good manner to have all the logic inside the object that can be used repeatedly on your site and anywhere in the project, or other projects.
But if you don't need a user control, then I advice you to create a class, inherited from System.Web.UI.Calendar control class, and write all the logic inside that class. In other words you will need to override a method called OnDayRender. Then, in your page you will need to add a <%@ Register%> directive. And then, the most pleasant thing: change <asp.Calendar> tag with your one. I mean, "Register" directive requires you to register some TagPrefix that is associated with a namespace containing your calendar control. For example, if you created a class MyCalendar and it's contained in the namespace MyControls, then you will explicitly register that namespace with some TagPrefix. Let's say that tag prefix is "mc", then you will have to change <asp:Calendar> tags with this one "<mc:MyCalendar>". Of course you need to change only those calendar controls, which you want to extend with your logic, written in your code.

One interesting note: it doesn't break a design mode of your pages.
That means, All's OK!

... And let's return from the off-topic. I hope it was at least interesting.
We already understand where to handle the DayRender event.

DayRender (or OnDayRender) method has very useful parameters. I will consider an overridden method here; the same can be said about an event handler that can be implemented outside the class inherited from the Calendar control class.

protected override void OnDayRender(TableCell cell, CalendarDay day)

This will be the title of your method. You would think that our solution is under using variable day. I would think so also. But no. A day variable just contains information about a day that is to be rendered. You can change its properties, such as day.IsSelectable etc. But nothing to overwrite the navigate URL of the day. It's possible to do using cell variable. In this case, cell is a simple table cell. A calendar in general, is a table, which contains cells of course. cell variable is empty on this step. But one interesting thing is, if you assign something to the cell.Text property, it will remain it's value, and will not become something like just clickable number.
Let's take a look on my code fragment:

protected override void OnDayRender(TableCell cell, CalendarDay day)
{
if (day.IsSelectable)
{
cell.Text = string.Format("<a href=\"{0}.aspx\">{1}</a>", day.Date.ToString("dd-MM-yyyy"), day.DayNumberText);
}
}

It's clear, I just want to have a clickable numbers, but not with the navigate URLs like "_doPostBack..." etc etc. I want it to contain clear URLs, those are combinations of date and extension ".aspx". Why I needed it? Just to make a calendar control for viewing archive for some date.
That's almost all.

One moment that you would be interested in:
If you want to add some dynamic, JavaScript content to the cell, you can use it's Attributes collection. For example to make a background color yellow on mouseover, you would write something like this:
cell.Attributes["onmouseover"] = "this.style.backgroundColor='yellow'";
etc.

Have a good day!