Javascript Course

In this page is presented a simple JavaScript script with a form that contains a textarea with buttons to add BBcode, or HTML tags to format the text with Bold, Italic, Underline, and colors, also to add links, and Smiles.
When the user clicks a button to format the text, the JavaScript code adds specified BBcode, or HTML tag, in the location where the cursor is in textarea, or arround the selected text (the smiles are added at the end of text).
This form can be used, for example in PHP applications that retrieve the text added in textarea and save it into a database or file on the server.


To download the script, click -> Script textarea with format text, and smiles.
The archive contains a directory (icos/) with images for buttons, a JavaScript and a PHP file for formating the text, and a "form.html" file that contains the form, and can also be used for test (if it's accessed from server).

- By default, the buttons add BBcode and smile characters in textarea, if you want to add directly HTML tags, open the "addformat.js" file and replace the "bbcode" value of the tagtype variable (line 4) with "html".
var tagtype = 'bbcode';

- To add other colors, edit the color code in the variable colors (line 7), the colors must be added with hexazecimal code (without '#'), between quotes.
Example: Red, Green, Blue:
var colors = [ 'ff0000', '00ff00', '0000ff' ];

• Demo: With BBcode - With HTML tags.
- With BBcode:
B I U Link  Color :) :( :P :D :S :O :=) :|H :X :-*


If you want to use this form with a PHP script, you can use the following PHP function to replace the BBcode and smiles added in textarea with HTML code.
// Function to convert BBcode in HTML tags ( coursesweb.net )
function formatBBcode($str) {
 // characters that represents bbcode, and smiles
 $bbcode = array(
 '/\[b\](.*?)\[\/b\]/is', '/\[i\](.*?)\[\/i\]/is', '/\[u\](.*?)\[\/u\]/is', // for format text
 '/\[url\=(.*?)\](.*?)\[\/url\]/is', // for URL
 '/\[color\=#([0-9a-f]{3,6})\](.*?)\[\/color\]/is', // for color
 // smiles
 '/:\)/i', '/:\(/i', '/:P/i', '/:D/i', '/:S/i', '/:O/i', '/:=\)/i', '/:\|H/i', '/:X/i', '/:\-\*/i');

 // HTML code that replace bbcode, and smiles characters
 $htmlcode = array(
 '<b>$1</b>', '<i>$1</i>', '<u>$1</u>', // format text
 '<a target="_blank" href="$1" title="$2">$2</a>', // URL
 '<span style="color:#$1;">$2</span>', // color
 // smiles (from "icos/" directory)
 '<img src="icos/0.gif" alt=":)" style="border:none;" />',
 '<img src="icos/1.gif" alt=":(" style="border:none;" />',
 '<img src="icos/2.gif" alt=":P" style="border:none;" />',
 '<img src="icos/3.gif" alt=":D" style="border:none;" />',
 '<img src="icos/4.gif" alt=":S" style="border:none;" />',
 '<img src="icos/5.gif" alt=":O" style="border:none;" />',
 '<img src="icos/6.gif" alt=":=)" style="border:none;" />',
 '<img src="icos/7.gif" alt=":|H" style="border:none;" />',
 '<img src="icos/8.gif" alt=":X" style="border:none;" />',
 '<img src="icos/9.gif" alt=":-*" style="border:none;" />'
 );

 $str = preg_replace($bbcode, $htmlcode, $str); // perform replaceament

 return nl2br($str); // nl2br() to replace new line characters with <br>
}

// if data from POST "txtmsg", gets the text
// delete tags, replace BBcode with HTML, and output the text
$str = isset($_POST['txtmsg']) ? formatBBcode( strip_tags($_POST['txtmsg'], '<b><i><u><span><img><a>') ) : 'coursesweb.net';
echo $str;

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
Textarea with buttons to format text, colors and smiles

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (142308)
  2. Get and Modify content of an Iframe (32367)
  3. $_GET, $_POST and $_REQUEST Variables (33884)
  4. Ajax-PHP Chat Script (49508)
  5. JavaScript Course - Free lessons (31647)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (311)
  2. The Mastery of Love (48)
  3. CSS cursor property - Custom Cursors (36)
  4. Read Excel file data in PHP - PhpExcelReader (35)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (31)