Pages

Saturday, October 1, 2011

62

Blogger, javascript and CDATA

In some of my code samples in this blog you will see javascript blocks like this:

<script type='text/javascript'>
  ... code ...
</script>

And in some like this:

<script type='text/javascript'>
//<![CDATA[
  ... code ...
//]]>
</script>

You might ask: What is that CDATA? Why cannot he make up his mind which one to use? Can I stick to one of the notations?

Blogger layout template must be valid XML, otherwise it won't pass validation and you cannot save it. In XML for example character < starts a tag. Lets assume you want to run the following javascript code, which you have found somewhere in internet:

<script type='text/javascript'>
  alert("Tip of the day: 5 < 6 & 1 < 2");
</script>

But if you put that on your template and try to save or preview, you'll get:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.

Now there are two ways to correct this script before pulling out your hair. To make the original script to be valid XML inside script tags, you must escape certain characters, like <, >, and &. And if you don't escape, the template editor will escape " and ', too. The script in your template becomes:

<script type='text/javascript'>
  alert(&quot;Tip of the day: 5 &lt; 6 &amp; 1 &lt; 2&quot;);
</script>

You can use HTML Escape Tool (from htmlescape.net) and similar tools to escape the javascript code, if you don't want to do it by hand. There are also tools for unescaping the characters.

Ok, as you see that "messes up" the code and makes it harder to maintain. Another solution is to mark the code between <script> and </script> tags as CDATA (character data). This tells XML parser that the text is general character data, instead of XML to be parsed. You may have already guessed, it looks like this:

<script type='text/javascript'>
//<![CDATA[
  alert("Tip of the day: 5 < 6 & 1 < 2");
//]]>
</script>

The latter is perfect, you may think. It is good, but, there is a but. If you want to use widget tags for templates, you cannot mark those sections as CDATA. I'll give you a simple example.

<script type='text/javascript'>
  alert("<data:blog.url/>");
</script>

In this script you must not escape <data:blog.url/>, because it is template data tag http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=47270. You can escape "s to &quot;s, and if you don't, Blogger will do it for you. But if you try this:

<script type='text/javascript'>
//<![CDATA[
  alert("<data:blog.url/>");
//]]>
</script>

It does not show your blog address, but the text "<data:blog.url/>", which probably was not the intention.

For some reason, you cannot find this information in Blogger help.

Some references:
Wikipedia CDATA
Javascript and XHTML
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

62 comments:

jorgedeSaliceta said... [reply]

Excelent, is just that I have searching for.

But, I have a code like this:

/* */


What's the function of /* an */?

Thanks

jorgedeSaliceta said... [reply]

17I just saw that the element "CDATA" onmy comment is disappeared, and was inconprensible!

Unknown said... [reply]

Thanks for sharing this info, I've also come across Sitepoint's javascript tutorial which was pretty helpful when I needed to problem solve issues.

Daniel Gubalane said... [reply]

@Jorge deSaliceta

It's a comment tag Jorge. The text inside that are just an explanation of what the code does.

It's sort of a programmer's note.

Alberto said... [reply]

Thanks for the explanation. It's useful to know why you need to use that! :)

Anonymous said... [reply]

Thank you for sharing this wonderful information.

Javascript Course | Javascript Training Institute in Chennai

pavithra dass said... [reply]

Appreciate Your Work... Thanks for Sharing Useful Information. I Just want to Share Some information related to HTML5 training in Chennai hope it is useful for the Community Here.

Unknown said... [reply]

Quite Interesting post!!! Thanks for posting such a useful blog. Keep posting it’s really helpful to enhance my skill set, keep blogging.
Regards,
Java J2EE Training in Chennai|Java Training Institute in Chennai

Unknown said... [reply]

Quite Interesting post!!! Thanks for posting such a useful blog. Keep posting it’s really helpful to enhance my skill set, keep blogging.

HTML5 Training in Chennai
HTML5 Training in Chennai

Unknown said... [reply]

It is indeed an informational one ! Thank you for sharing your knowledge. Hope this is of use,

html5training

divya said... [reply]

i went through your blog and now i got a basic idea about HTML5 .It was very useful for me. when i was searching for HTML5 tutorials i came across html5training.in . Is this a good site to learn HTML5

divya said... [reply]
This comment has been removed by the author.
divya said... [reply]

Thanks for sharing a useful blog. keep posting
HTML5 TRAINING IN CHENNAI

Sharma said... [reply]

Thanks for the info...

Real Trainings provide all IT-Training Institutes information in Hyderabad, Bangalore, Chennai . Here students can Compare all Courses with all detailed information. In Real trainings we provide courses like GPS Infotec, Eduwizz online training, Akshara Technologies, Spark Trainings, Visualpath etc...

Calla said... [reply]

Really very happy to say, your post is very interesting to read. I never stop myself to say something about it. You’re doing a great job. Keep it up.php training in Mumbai

Hoangdacviet said... [reply]

Thanks for infomation <3

It's very useful for me when I custom Schema for my website Kome Cafe Vietnnamese Coffee https://www.kome.cafe

Thanks for share!

Rahul said... [reply]
This comment has been removed by the author.
Poshe said... [reply]

Good Stuff. Thank you for providing such a valuable information. I am looking forward to visit your blog at daily basis.
If you’re looking for a safety training institute in Chennai, it doesn’t get better than POSHE Solutions.
NEBOSH Course in Chennai
Fire and safety course in vizag
Fire and safety course in vizag

NIHAL AHAMED said... [reply]
This comment has been removed by the author.
NIHAL AHAMED said... [reply]

Hi MS-potilas ,
Thanks for Clear and brief Content MS-potilas. Your Knowledge towards Html and Javascript Would help all the Programmers, intermediate programmer, students and Working Professional.Please share your knowledge and all sort of ideas in your blog. It will be helpful for everybody.Keep Blogging!!!!! All the Best!!!!
Regards
Nihal Blog Follower
HTML5 TRAINING IN CHENNAI

Vicky Ram said... [reply]

Thanks for posting such an blog it is really very informative. And useful for the freshers Keep posting the
updates.

Guest posting sites
Education

yugandar said... [reply]

The blog is so interactive and Informative , you should write more blogs like this. We provide Datascience training with real time experts and 100% placement program Datascience Training

High Technologies Solutions said... [reply]

I really like your post. Thanks for sharing such a valuable post. Please keep sharing such kind of post. It will be helpful for other.

Delhi's best python institute
Noida's best python institute

Gurgaon's best python institute

Manipriyan said... [reply]
This comment has been removed by the author.
rudraveni said... [reply]

It is very good and very informative. There is a useful information in it.Thanks for posting... Machine Learning Training In Hyderabad

jayapriya said... [reply]

I recently came across your blog and have been reading along. I thought I would leave my first comment.

Hadoop Online Training

jagedheesh kumar said... [reply]

Good post!Thank you so much for sharing this lovely article.It was so good to read and useful to upgrade my understanding...
salesforce Training in Bangalore
uipath Training in Bangalore
blueprism Training in Bangalore

unknown said... [reply]

Hiii..Thanks for Sharing Great info...Nice post...Keep move on...
Angular JS Training in Hyderabad

Shoaib khan said... [reply]

This is a very Amazing and Very Informative Article we get a lot of pieces of information from this article we really appreciate your teamwork keep it up and keep posting such informative articles...
Washing Machine

Pramod J said... [reply]

Garmin Care Map Update team is here to help you Garmin map updates/download! Troubleshooting all issues concerning maps update, just call at 0330-113-3590 and get help to fix your issue.
Garmin Map Updates
Garmin Support
Garmin Com/Express

Deepthi said... [reply]

Nice blog..! I really loved reading through this article. Thanks for sharing such a amazing post with us and keep blogging...Well written article
aws Training in Bangalore
python Training in Bangalore
hadoop Training in Bangalore
angular js Training in Bangalore
bigdata analytics Training in Bangalore

nareshit said... [reply]

Thank you for sharing the article. The data that you provided in the blog is informative and effective.

Best javascript Online Training Institute

Itools Mobile Service said... [reply]
This comment has been removed by the author.
Unknown said... [reply]

Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
top angularjs online training
best angularjs online training
angularjs online training

Technogeekscs said... [reply]

Thanks for the post. It was very interesting and meaningful. I really appreciate it! Keep updating stuff like this.
We are giving all Programming Courses such as You can

Register for a free Demo Sessions

RPA Ui Path Online Training
Best Python Online Training
Online AWS Training
Online Data Science Training
Hadoop Online Training

Data Science Course in Bhilai - 360DigiTMG said... [reply]

Really wonderful blog completely enjoyed reading and learning to gain the vast knowledge. Eventually, this blog helps in developing certain skills which in turn helpful in implementing those skills. Thanking the blogger for delivering such a beautiful content and keep posting the contents in upcoming days.

data science institute in bangalore

Anonymous said... [reply]

Excellent blog, Thanks for sharing this information.

Full stack classes in ahmedabad

Maneesha said... [reply]

Excellent work done by you once again here. This is just the reason why I’ve always liked your work. You have amazing writing skills and you display them in every article. Keep it going!
data scientist training and placement

data scientist course said... [reply]

A good blog always comes-up with new and exciting information and while reading I have feel that this blog is really have all those quality that qualify a blog to be a one
data scientist training and placement

Priya Rathod said... [reply]

I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.
DevOps Training in Hyderabad
DevOps Course in Hyderabad

Priya Rathod said... [reply]

Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.
AWS Training in Hyderabad
AWS Course in Hyderabad

Cyberz Pc said... [reply]

Exceptionally instructive case! There is loads of hint here that could previously any situation income started further to a rich interpersonal interaction cognizant up assessment. thanks! Clash Of Clans Hack Game Download

Cyberz Pc said... [reply]

Best announce! this is an each level of simple to apply weblog that I can conclusively come steerage to more prominent age this yr! gratitude for useful declare. thanks! Wifi Hacker Pc

Best CA in Jaipur said... [reply]

We have a professional and expert team of CA who gave you productive results. Our CA will deal with all your Annual Compliance for Companies and help to complete all the documentation work.

Trademark Registration in Mumbai
Trademark Registration in Delhi
GST Registration in Jaipur
CA in Delhi
CA in Pune
CA in Mumbai
CA in Jaipur
Company Registration in Ahmedabad
Trademark Registration in Ahmedabad
Trademark Registration in Agra

Mobilecourse said... [reply]

your post is really amazing with lots of important points Thank you for sharing. I was really enjoying reading this article. We provide 20% theoretical classes rather than practical training to clear all concepts of basic fundamentals of mobile repairing in our advanced mobile repairing course in Delhi.

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: