Javascript.RU

Фишки JS

Решил для новичков разместить несколько всем хорошо известных
тонкостей.
Пока лишь несколько примеров, попозже добавлю еще

Замыкания - классический пример с массивом

Замыкания - классический пример с массивом

Не то, что ожидаем

var a=[];
for(var i=0;i<100;i++){
   a[i]=function(){
       alert(i);
   }
}
a[1]();//А нет, не 1, а 100

Теперь то, что ожидаем

var a=[];
for(var i=0;i<100;i++){
   a[i]=(function(i){
       return function(){
            alert(i);
       }
   })(i);
}
a[1]();//1

+new Date()

Короткая запись для new Date().getTime() и new Date().valueOf()

alert(+new Date());

x=+x;

Из строки делаем число без parseInt и Number.

var x = "5";
alert(typeof x);//string
x=+x;
alert(typeof x);//number

0.1+0.2==0.3//false

Просто примерчик.

alert(0.1+0.2==0.3);//Вовсе не true, а false
alert(0.1+0.2);//0.30000000000000004
alert((0.1+0.2).toFixed(2)==0.3);//true

JSONP

JSONP, второе название кросс-доменный запрос, применяется для запроса на другой хост.
Название JSONP образовано из ответа сервера в виде

callback1({success:true,params:[{a:1,b:2,c:3}]})

JSON - {success:true,params:[{a:1,b:2,c:3}]}
префикс - callback1.
От слова prefix и взята буква P.

Заметка:
Cтараюсь с сервера не передавать знаки " '.
" и ' - только для строк .
Но у JSON есть свой стандарт, и это считается не верным
{success:true} - не JSON,
{"success":"true"} - JSON.
Для меня JSON - это то, что работает.

<html>
<head>
	<title>JSONP</title>
</head>
<script>
function getJSONP(url, callback) {
	var cbnum = "cb" + getJSONP.counter++;
	var cbname = "getJSONP." + cbnum;
	if (url.indexOf("?") === -1){
		url += "?jsonp=" + cbname;
	}
	else{
		url += "&jsonp=" + cbname;
	}
	
	var script = document.createElement("script");
	getJSONP[cbnum] = function(response) {
		try{
			callback(response);
		}
		finally {
			delete getJSONP[cbnum];
			script.parentNode.removeChild(script);
		}
	};
	script.src = url;
	document.body.appendChild(script);
}
getJSONP.counter = 0;
	window.onload = function(){
		var url = 'http://moc-081.ru/jsonp.php?name=Вася',
			callback = function(res){
				var div = document.createElement('div');
				div.innerHTML = "Ответ сервера: "+res.answer;
				document.body.appendChild(div);
			setTimeout(function(){
				getJSONP(url,callback);
			},3000);
		}
		
		getJSONP(url,callback);
	}
</script>
<body>

</body>
</html>

Файл jsonp.php

<?
if(isset($_GET['jsonp']) && isset($_GET['name'])){	
	echo $_GET['jsonp'].'({success:true,answer:"Привет, '.$_GET['name'].'"})';
}
?>

Random String

alert((function RandomString(length) {    
    var str = '';
    for ( ; str.length < length; str += Math.random().toString(36).substr(2) );
    return str.substr(0, length);
})(10));
+6

Автор: I-zone, дата: 6 июля, 2011 - 04:18
#permalink

Вообще, более корректно эта форма передачи данных называется JSON with Padding. JSON с подкладкой. Не обязательно, чтобы ответ содержал callback prefix, в ответе можно, например, просто объявлять глобальную переменную и всё равно это будет называться jsonp. Под подкладкой понимается сам узел script, в который и загружается код, несущий json. А кроссдоменный запрос - это кроссдоменный запрос и никаким вторым названием не является. Никто не мешает осуществлять jsonp в своей песочнице. Передавать можно любые символы в строке, если специализированные символы прослешировать (\"). В двойных кавычках можно передавать одиночные без слеша, в одиночных - двойные. Ну а то что ты стараешься не передавать - улыбнуло. Автобиография? true, false, null, числа и т.д. не надо помешать в кавычки, вернется строковое значение, а не то, что планировалось. Формат позволяет передавать их без кавычек, сохраняя их природу и ни одна функция защиты от xss не запрещает передавать их как есть. Поражаюсь, откуда ты всё это достаешь? Свои предположения? По тексту видно, что ты слабо представляешь себе, что такое JSON в javascript в принципе. JavaScript object notation, а значит можно описывать структуры точно так же, как это делают непосредственно в javascript.

{
   string: "''\"\"",
   number: 007,
   empt: null,
   undef: undefined,
   bool: true,
   func: function(){},
   eval: eval('"Hello World"'),
   window: window,
   "What da fuck?": "I don't know!"
}

Представь себе - это тоже json, причем весьма корректный и прекрасно будет работать в jsonp запросе.
Также, сформировалось правило хорошего тона, указывать в querystring свойство ?callback=, тем самым обеспечивая совместимость между сервисами, ты же для новичков вводишь какое-то своё свойство ?jsonp=, зачем? А вообще вся публикация написана в разброс и по большей части - никакими 'фишками' javascript не является, а является обычным здравым смыслом. Большемутво примеров верно для всех языков программирования, поэтому название 'фишки' да еще и 'в javascript' не отражает содержания статьи.


Автор: mycoding, дата: 6 июля, 2011 - 18:35
#permalink

Пример c JSONP взят из книги Дэвида Фленагана.
Который для меня авторитет.

Как писать код решать Вам.


Автор: melky, дата: 6 июля, 2011 - 18:29
#permalink

тот пример, который представлен как корректный JSON, таковым вообще не является, вы путаете его с хэшем. JS абсолютно пофиг, заключать ли свойства в кавычки или нет (кроме случаев с минусами, плюсами, пробелами, другими зарезервированными символами\словами )

mycoding, опечатался? не Х, а Ф.


Автор: mycoding, дата: 6 июля, 2011 - 18:36
#permalink

>mycoding, опечатался? не Х, а Ф.
Да опечатался ))) Исправил


Автор: B@rmaley.e><e, дата: 6 июля, 2011 - 19:13
#permalink

Лолшто? В каком месте здесь корректный JSON?

var str = "{\n\
   string: '',\n\
   number: 007,\n\
   empt: null,\n\
   undef: undefined,\n\
   bool: true,\n\
   func: function(){},\n\
   eval: eval('\"Hello World\"'),\n\
   window: window,\n\
   \"What da fuck?\": \"I don't know!\"\n\
}";
alert(str);
try{
  JSON.parse(str);
} catch(e){
  alert(e.message)
}

Судя по Вашему комментарию, JSON для Вас - просто кусок JavaScript'ового кода. Так вот, вынужден Вас разочаровать, но это не так. Более того, JSON не имеет с JS ничего общего, кроме того, что любая JSON строчка представляет собой корректную запись JS объекта. Но не наоборот!
1. Ключи обязательно в двойных кавычках.
2. Значения ключей - строки, объекты, числа, массивы (+ null, false, true). Так как JSON - это формат представления данных, ни о каком вычислительном процессе и речи быть не может. Т.е. утверждение, что {"eval": eval('Lalala')} - корректный JSON - феерический бред.
3. Средства для работы с JSON'ом существуют для многих языков, отсюда логически вытекает предыдущее утверждение про eval. Поэтому и нужен единый стандарт, который является "вырезкой" из JS.
Рекомендую ознакомиться: http://json.org/


Автор: mycoding, дата: 6 июля, 2011 - 22:26
#permalink
JSON.parse("{\"success\":\"true\"}");
JSON.parse("{\"success\":true}");
JSON.parse("{success:true}");

Автор: B@rmaley.e><e, дата: 6 июля, 2011 - 20:03
#permalink

Пример с

0.1+0.2==0.3

не является фишкой JS. Что в Си, что в Хаскелле, Пайтоне, Руби или php, 0.1 + 0.2 != 0.3.Таковы особенности реализации чисел с плавающей точкой и каждый программист просто обязан знать об этом.


Автор: I-zone, дата: 7 июля, 2011 - 10:38
#permalink

Последний пример с json был показан для наглядности только в работей jsonp. Он не работает? Такой синтаксис описания объекта появился в javaScript под названием json.
Можно обратить внимание, на то, что написано: такой метод прекрасно будет работать в jsonp. Другое дело мегрируемый json формат. Его имена должны быть в кавычках, а значения не должны быть функциями. Естественно, что это будет работать только в js прямым вызовом, чем и является jsonp. Разве не его рассматривает автор? А теперь скажите, имеет ли смысл в jsonp держать имена свойств в кавычках? Может быть и юникодить всё внутри строк, как предписывает формат? Нет конечно. Из текста видно плохо, так что уточняю еще раз, последний пример относится !ТОЛЬКО к jsonp, всё что написано выше, относится к классическому межплатформенному формату json и описывает примерно то-же, что и на json.org. Про не понимание, что такое json относил, например к этому примеру:
{"success":"true"} - это json,
{"success":true} - не json.
На самом деле оба решения верны, только второй сохраняет свою логическую природу и т.д. Предполоваю фленеган такого не мог написать...


Автор: Гость (не зарегистрирован), дата: 17 июля, 2011 - 14:36
#permalink
var a=[];
for(var i=0;i<100;i++){
   a[i]=function(){
       alert(i);
   }
}
a[1]();//А нет, не 1, а 100

Собственно, а по чему не то, что ожидаем?
Элементу массива 1 - была присвоена функция, которая выводит переменную i, а не ее значение.
После того как цикл завершился i равно 100. Все верно, вполне ожидаемо.


Автор: ArtemSmirnov (не зарегистрирован), дата: 27 июля, 2011 - 16:55
#permalink

alert(+new Date());
Чето много символов, пишите так
alert(+new Date);


Автор: B@rmaley.e><e, дата: 28 июля, 2011 - 21:47
#permalink

И зачем? Вообще писать нужно так:

new Date().getTime()

Автор: melky, дата: 31 июля, 2011 - 14:28
#permalink
alert( Date.now() );

Автор: AlfeG (не зарегистрирован), дата: 22 августа, 2011 - 12:10
#permalink

За
x=+x;
Из строки делаем число без parseInt и Number.

Руки отрывать надо.


Автор: undefinedstepan (не зарегистрирован), дата: 19 декабря, 2019 - 10:37
#permalink

Абсолютно не аргументированно. Это удобная короткая запись. Руки за parseInt в 2019 надо отрывать


Автор: Гость (не зарегистрирован), дата: 13 апреля, 2022 - 02:38
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 01:01
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 13:02
#permalink

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
17 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
mycoding
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum