Javascript-форум - Использование функции в скрипте

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Использование функции в скрипте (https://javascript.ru/forum/dom-window/39726-ispolzovanie-funkcii-v-skripte.html)

Stalin45

09.07.2013 16:11

Использование функции в скрипте

Ребят, вопрос элементарный, почему я никак не могу добиться исполнения функции resetIP2() по щелчку на кнопку?? Не происходит абсолютно ничего...

<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
function resetIP2()
{
    document.getElementById('ajax').innerHTML = 'fdfhs';
}
</script>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
	<title>Telnet connection</title>
</head>
<body>
<FORM METHOD = "POST" ACTION = "" id = "setForm1">
   <input type="submit" value="По-умолчанию" onclick="resetIP2()">
</FORM>
  <div id="Ports">
    <h3>Информация о портах</h3>
    <div id="ajax"></div>   
  </div>
</body>
</html>

skrudjmakdak

09.07.2013 16:20

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
	<title>Telnet connection</title>
	<script type="text/javascript" type="text/javascript">
function resetIP2()
{
    document.getElementById('ajax').innerHTML = 'fdfhs';
	return false;
}
</script>
</head>
<body>
<FORM METHOD = "POST" ACTION = "" id = "setForm1">
   <input type="submit" value="По-умолчанию" onclick="return resetIP2()">
</FORM>
  <div id="Ports">
    <h3>Информация о портах</h3>
    <div id="ajax"></div>   
  </div>
</body>
</html>

Deff	09.07.2013 16:22

Stalin45,
тег <script> с наличием src
игнорирует контент внутри тега.
Ставьте раздельно

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
function resetIP2()
{
    document.getElementById('ajax').innerHTML = 'fdfhs';
}
</script>

skrudjmakdak

09.07.2013 16:24

комментарии:
1. тег <script> принято писать внутри <head>, а не в самом начала
2. надо писать <script type="text/javascript" ..., а не <script language="JavaScript"...
3. писать скрипт js и прописывать src одновременно нельзя
4. когда пишите submit и идет клик по этой кнопке, то происходит отправка формы, чтобы ее предотвратить необходимо писать return false;

danik.js

09.07.2013 17:08

Цитата:

Сообщение от skrudjmakdak

1. тег <script> принято писать внутри <head>, а не в самом начала

Можно (и даже нужно) внутри <body>, чтобы не задерживать отрисовку страницы. Читай статьи на webo.in хотя бы.

danik.js

09.07.2013 17:13

Цитата:

Сообщение от skrudjmakdak

2. надо писать <script type="text/javascript" ..., а не <script language="JavaScript"...

Для встроенных скриптов смысла указывать type нет. Он и так по умолчанию определяется как text/javascript. Раз уж на то пошло, почему ты не указываешь charset? Для js-файлов тоже можно не указывать, но нужно убедиться что сервер отдает верный Content-Type (например raw.github.com отдает text/plain для любых текстовых файлов)

skrudjmakdak

09.07.2013 17:21

Цитата:

Сообщение от danik.js (Сообщение 261362)

Можно (и даже нужно) внутри <body>, чтобы не задерживать отрисовку страницы. Читай статьи на webo.in хотя бы.

тогда почему на этом сайте, да как и на любом другом тег <script> описывают в <head>...

skrudjmakdak

09.07.2013 17:30

вот с этого сайта.. далеко не ходил:
http://javascript.ru/tutorial/foundation/start

метки:
Для этого его помещают внутрь тега HEAD
Современное оформление тэга <script>

danik.js

09.07.2013 18:04

Цитата:

Сообщение от skrudjmakdak

тогда почему на этом сайте, да как и на любом другом тег <script> описывают в <head>...

Почему картинки этого сайта не упакованы в спрайты? Почему скрипты и стили не минимизированы? Почему они не объединены в один файл?
Вот когда ответишь на эти вопросы, тогда и я отвечу.

Что касается "современного оформления", то оно не очень то там современное. Взгляни на дату поста.
А теперь иди на http://validator.w3.org/check и проверь на валидность такую разметку:

<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<script>abc</script>

skrudjmakdak

09.07.2013 20:54

danik.js, я не спорю что как вы сказали: "чтобы не задерживать отрисовку страницы". ну в наше время компьютеры настолько слабые, что js обрабатываются по пол часа, что процитирую: "даже нужно) внутри <body>" пихать js. даже не в силе компа дело..
а что действительно играет большую роль? не скорость интернета ли, а? и если скорость маленькая то тут эти пару миллисекунд сыграют роль как вычерпнуть из моря одно ведро воды.. не так ли?? Поэтому говорить что будет уж слишком большая разница между первым и вторым вариантом, нет.. я так не считаю..

теперь о валидности. цитирую: "проверь на валидность такую разметку". Конечно, если рекомендовано писать так, то нужно придерживаться.
и давай возьмем тот же вконтакте, sencha (ext).. они до сих пор пишут js в head, и говорить, что там сидят лузеры?? хотя extjs оч большая библиотека, а генерится довольно таки быстро. ааааа да.. еще зависит от браузера))

danik.js

09.07.2013 21:49

Объясняю. Если скрипт находится в <head> , то страница не отобразится пока скрипт не будет загружен. Очень часто на сайте подключают локальную копию jQuery, к тому же без gzip-сжатия. Плюс три-четыре плагина, иногда вобще ввиде сорцов. В итоге имеем до 200 кб объема.
Пару милисекунд говоришь? В моем регионе многие сидят на 128кбит/с, это 12секунд времени. На более продвинутом тарифе - 512кбит/с это будет три секунды. А еще прибавь объем страницы + объем стилей + пинг на нераспараллеливаемые запросы - это все тоже нужно ждать. А теперь возьми в руки мобилу или хотя бы планшет и открой тот же javascript.ru. Пару милисекунд открывается, да? И это хорошо если 3G ловит. Белый экран ожидания на мобиле - это чаще всего заслуга скриптов, любезно засунутых в <head>. Ты можешь считать как хочешь. Я считаю так как вижу ситуацию со своей стороны.
Подробнее тут или вот нашел на javascript.ru перевод: http://javascript.ru/optimize/perfor...ules#js_bottom . Вот статья на сайте по оптимизации: http://webo.in/articles/habrahabr/56...ng-javascript/

Насчет валидности. Да, мне не стоило давать ссылку на валидатор и говорить слово "валидность". Вот спецификация, определяющая что атрибут type необязателен. Вот рекомендация от Google не указывать атрибут type. Или тут на русском.

danik.js

09.07.2013 21:54

Что касается ExtJS то там отображать тупо нечего, ибо весь UI рендерится скриптом. А vk - крайне сомнительный пример. На хабре уже однажды обсуждали качество этого сайта. Речь тогда началась с того, что все строки локализации хранятся как глобальные переменные. Мнооого глобальных переменных. Такой подход однозначно намекает что автор сего - юный студент, зарабатывающий себе на бухло и бомжпакеты.

skrudjmakdak

09.07.2013 23:08

danik.js, опять таки.. сегодня js очень популярен и страницы на сайтах не будут корректно работать без js. и бывает такое, что все таки приходится ждать пока страница полностью не загрузится где бы js не находился, в хидерах или в бодях. Ладно, бывают такие что и можно обойтись без js.. Вы сказали, 200кб либы памяти, это не так уж и много, ибо картинок бывает по объему (кб) куда больше.. тогда давайте затронем еще тему о мобильной версии сайта (если заказчик уважает своего клиента), где нет лишнего js, картинок и прочей бурды...

цитата: "В моем регионе многие сидят на 128кбит/с,"...
ответ: Ну при такой политике давайте вообще откажемся от js дабы всех удовлетворить и в конце придем в каменный век...

Про вконтакте..
цитата: "крайне сомнительный пример. На хабре уже однажды обсуждали качество этого сайта"
ответ: хотите сказать одноклассники лучше??

цитата: "Такой подход однозначно намекает что автор сего - юный студент, зарабатывающий себе на бухло и бомжпакеты."
ответ: Этот, как вы сказали, юный студент зарабатывает миллионы.. А сколько зарабатываешь ты??? Я думаю он поумней тебя (без обид)

короче. я с вами конечно согласен, что в какой то мере это и решит проблему, но сайты из за этого все равно идеальными не станут

skrudjmakdak

09.07.2013 23:10

кстати, причем тут стили?? даже если их поместим в конец, то страница то загрузится.. но отображаться она то будет все равно <криво> пока не загрузятся цсс...

Deff	09.07.2013 23:13

skrudjmakdak,
Да ей богу, как то Вы слишком лично воспринимаете, - нужно быть отстраненнее, и пытайтесь воспринять как инфу к размышлению, но не наезд на самолюбие
Вона на хабре, ежли так воспринимать все спичи - так вообще в гуно изведут за пару выложенных строк.

skrudjmakdak

09.07.2013 23:17

Deff, а я в споре не вижу ничего плохого. Вы знайте такое: в споре рождается истина. из нее мы оба вынесем выводы.. в чем здесь плохого???

skrudjmakdak

09.07.2013 23:18

Deff, покритикуйте меня, если хочецо)) я буду не против

danik.js

10.07.2013 06:49

Цитата:

Сообщение от skrudjmakdak

Ну при такой политике давайте вообще откажемся от js дабы всех удовлетворить и в конце придем в каменный век

Какой каменный век? Ты о чем? Нужно просто опустить скрипты из <head> в конец <body>. В большинстве случаев это делается безболезненно.

Насчет некорректности работы сайта - это не так. JS в 90% случаев необходим для интерактивности, коей не последует в первые же секунды открытия страницы. Вместо созерцания белой страницы юзер может ознакомиться с содержимым, а к моменту когда нужна будет интерактивность - скрипты уже подгрузятся. Что касается картинок, то ты упустил такой момент что их загузка не блокирует отображение страницы. Кстати на качественном сайте будут обязательно прописаны width/height картинок, чтобы в процессе загрузки сайт не скакал.

Цитата:

Сообщение от skrudjmakdak

хотите сказать одноклассники лучше??

Из чего это следует? Из отсутствия с твоей стороны каких либо весомых аргументов?

Цитата:

Сообщение от skrudjmakdak

Этот, как вы сказали, юный студент зарабатывает миллионы

Ага, ты че, вправду думаешь Павлик Дуров сидит и кодит себе свой вконтактик, да?

Цитата:

Сообщение от skrudjmakdak

короче. я с вами конечно согласен, что в какой то мере это и решит проблему, но сайты из за этого все равно идеальными не станут

Сайты не станут идеальными если включить gzip (пять минут, потраченных на настройку даст эффект сжатия текстовых ресурсов в 3-5 раз), настроить минимизацию, оптимизировать кэширование (поможет уменьшить число повторных запросов в разы), использовать серверные оптимизации.
Перенос скриптов вниз (2 минуты затраченного времени) позволит отобразить страницу раньше на 0.5 - 5 с. Так что незачем все это делать. Ты правильный вывод сделал, да.

skrudjmakdak

10.07.2013 08:40

Цитата:

Сообщение от danik.js (Сообщение 261458)

Сайты не станут идеальными если включить gzip

Но трафик существенно сократится, как вы сказали в 3-5 раз..

Цитата:

Сообщение от danik.js (Сообщение 261458)

Ага, ты че, вправду думаешь Павлик Дуров сидит и кодит себе свой вконтактик, да?

нет конечно! ему что, больше заняться нечем? но кодить, я думаю, он умеет

Stalin45

10.07.2013 12:56

Ребят, спасибо вам большое за помощь! И за оптимизационные моменты.

Только вот у меня снова проблема возникла...
У меня эта форма:

<FORM METHOD = "POST" ACTION = "" id = "setForm1">
   IP Adrees:
   <INPUT NAME = "IP" ID = "_ip" TYPE = "TEXT" VALUE = "<?php echo $settings [0];?>" ><br>
   Subnet Mask:
   <INPUT NAME = "MASK" ID = "_mask" TYPE = "TEXT" VALUE = "<?php echo $settings [1];?>" ><br> 
   VLAN Name:
   <INPUT NAME = "VLAN" ID = "_vlan" TYPE = "TEXT" VALUE = "<?php echo $settings [2];?>"><br><br>
   <INPUT TYPE="submit" VALUE="Save" onclick = "changeIP()">
   <input type="submit" value="Default" onclick="resetIP()">
   </FORM>

Вначале работала без JS и просто отправляла по ACTION в новый php файл данные, все работало.

Но мне понадобилось теперь после использования php-скрипта возвращаться на эту же страницу, поэтому я изменил форму так, как показано выше. Пытаюсь выполнить changeIP(), но параметры либо не передаются, либо неправильно передаются, я уже голову сломал, думая, почему...
вот скрипт:

<script language="JavaScript">
var req = Create();

function Create() { 
    if(navigator.appName == "Microsoft Internet Explorer") {
        req = new ActiveXObject("Microsoft.XMLHTTP"); 
    }
    else { 
        req = new XMLHttpRequest(); 
    } 
return req; 
} 

function changeIP() {
	var ip = document.getElementById('_ip');
	var mask = document.getElementById('_mask');
	var vlan = document.getElementById('_vlan');
	var ipad = document.getElementById('curIP');
    
	req.open('POST', 'telnetChange.php' , true );
    req.onreadystatechange = Refresh();
	req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	var ParamStr = 'ip='+ ip.value +'&mask='+ mask.value +'&vlan='+ vlan.value +'&ipaddress=' +ipad.value;
req.setRequestHeader("Content-Length", ParamStr.length);
	req.send(ParamStr);
}
 
function Refresh()
{
    var a = req.readyState; 
    if( a == 4 )
    {  
        document.getElementById('loading').innerHTML = "Succeed!";
    }
    else
    { 
        document.getElementById('loading').innerHTML = 'Loading.........';
    }
}
</script>

P.S. Повторюсь, при обычном вызове php через Action все работает, то есть я неправильно отправляю параметры??

Спасибо заранее опять же :)

danik.js

10.07.2013 13:15

Цитата:

Сообщение от Stalin45

req.onreadystatechange = Refresh();

Скобки тут не нужны. Тебе же нужно присвоить саму функцию. А так получается что ты вызваешь функцию и присваиваешь ее результат

danik.js

10.07.2013 13:19

Цитата:

Сообщение от Stalin45

navigator.appName == "Microsoft Internet Explorer"

Хреновая проверка. Во-первых, XMLHttpRequest нету только в IE6-7, на которые можно забить, а если забить не хочется, то проверять так и нужно:

if (typeof XMLHtppRequest !== 'undefined')
    return new XMLHttpRequest;
else
    return 'какашка';

Stalin45

10.07.2013 14:18

danik.js, благодарю! Постепенно хоть проясняться начинает.
Только на основную проблему это все-таки не повлияло...
Тут уже 2 вопроса:
1.

function Refresh()
{
    var a = req.readyState; 
    if( a == 4 )
    {  
        document.getElementById('loading').innerHTML = "Succeed!";
    }
    else
    { 
        document.getElementById('loading').innerHTML = 'Loading.........';
    }
}

Почему функция сразу выдает "Succeed", не ожидая окончания php скрипта? В этом я уверен, поскольку сам скрипт после выдает:

Fatal error: Maximum execution time of 30 seconds

2. Отсюда: все-таки не передает он параметры, либо передает некорректно...в чем я ошибся??
Тут вот где-то ошибка, но не могу понять, в чем:

function changeIP() {
	var ip = document.getElementById('_ip');
	var mask = document.getElementById('_mask');
	var vlan = document.getElementById('_vlan');
	var ipad = document.getElementById('curIP');
    
	req.open('POST', 'telnetChange.php' , true );
    req.onreadystatechange = Refresh;
	req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	var ParamStr = 'ip='+ ip.value +'&mask='+ mask.value +'&vlan='+ vlan.value +'&ipaddress=' +ipad.value;
req.setRequestHeader("Content-Length", ParamStr.length);
	req.send(ParamStr);
}

На всякий случай, вот сам php-скрипт (5 строка):

<?php
include("telnetControlClass.php");
$telnet = new PHPTelnet();
$control1 = new telnetControlClass();
	$control1->conTelnet($telnet, $_POST['ipaddress']);
 	$control1->changeConfigVLAN($telnet, $_POST['ip'], $_POST['mask'], $_POST['vlan']); 
?>

danik.js

10.07.2013 14:28

Цитата:

Сообщение от Stalin45

Почему функция сразу выдает "Succeed", не ожидая окончания php скрипта? В этом я уверен, поскольку сам скрипт после выдает:

Сделай console.log(this.readyState, this.status) да посмотри что к чему. И вкладку Сеть изучи.

Stalin45

10.07.2013 16:22

danik.js, спасибо, долго дебагал, тут вот такая странность:
Если обойтись без точек останова, то вот такая вот картина...

Статус сразу 4, а ответ сервера - 0.
Если с точкой останова в этом месте и подождать немного времени:

То связь с машиной удастся и у роутера сменится IP, но по прежнему:
Статус сразу 4, а ответ сервера - 0. В чем причина?

И очень важный для меня вопрос, при измененном IP мне теперь необходимо, чтобы страница, на которой скрипт расположен, перезагружалась с 1 другим параметром, а как это сделать??

Часовой пояс GMT +3, время: 03:10.