Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Бизнес и карьера в интернете" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2010   →
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Автор

Елена Иванова

Статистика

11.093 подписчиков
+1 за неделю

• Выпуски
• Статистика

←   Все выпуски   →

Как сделать популярный сайт. ~~~~~ Java Script. Джава Скрипт. ~~~~~

Добрый день, уважаемые читатели рассылки "Как сделать популярный сайт" Выпуск 153. ~~~~~ Java Script. Джава Скрипт. ~~~~~ Внимание! Если ваша почтовая программа не отображает корректно рисунки или тексты, то Нажмите здесь :: http://kocby.ru/post/webmaster/text/issue153.html Java Script Если Вы не популярны, Значит, Вас как бы и не существует... Настало время задуматься о серьезном использовании Джава Скриптования. ДжаваСкрипт (JavaScript) - позволяет выполнять программки на рабочей станции пользователя. Суть - тонкая доводка. Нет смысла передавать явно неправильные данные от пользователя на сервер. Логично провести первичную проверку сразу на компьютере пользователя. Типичные примеры: проверить наличие "собаки" и "точки" в емейле, чтобы пароль состоял только из определенных символов, был нетривиален и имел достаточную длину и т.д. Конкретный пример практического приминения JavaScript. Проблема совместного использования технологий CSS и JavaScript. © Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru. Уважаемые дамы и господа! Не могу сказать, что тема "Джава Скрипт" является для нашего Клуба совсем уж новой. Немного мы баловались с этим языком в плане создания или модификации разных простейших игрушек, например, такой как - Игра пилота :: http://kocby.ru/post/games/text/pilot-game.html Но вот настало время задуматься о серьезном использовании Джава Скриптования. Вообще говоря, материала по "Джава Скриптованию" в Интернете очень много, в том числе качественного и бесплатного. Навскидку рискну порекомендовать javascript.ru, а уж если он не понравится, спрашивайте у Гугла и Яндекса. А у нас сегодня будет разговор чисто практической направленности. Минимум теории. Я даже не буду говорить о том, что "Джава Скрипт" и "Джава просто"... Первый шаг java программиста :: http://kocby.ru/post/webmaster/text/issue134.html ... это есть абсолютно разные вещи, хотя об этом говорят авторы всех учебников по "Джава Скрипт" и даже некоторые авторы учебников по "Джава"... Немного теории по вопросу все-таки придется затронуть, чтобы сразу ввести в курс дела новичков в веб-программировании. Итак, вкратце, мы имеем винегрет со следующими компонентами. 1. Язык разметки HTML или его "строгая", "правильная" версия XHTML (соответствующая стандартам w3.org). Нужен для того, чтобы браузер мог предоставить для просмотра документ конечному пользователю. 2. Примочка к HTML под названием CSS, Cascading Style Sheets — каскадные таблицы стилей. Нужен для облегчения решения задач дизайнерского характера. Суть CSS разделение контента и дизайна документа. Идеология такая. За контент (содержание) отвечает HTML документ, а за дизайн - CSS. Пока все понятно? Не переживайте, это только начало. 3. Динамика, программирование на сервере, примочка к HTML - язык PHP. Дает возможность пользователям вводить данные, хранить данные и обрабатывать данные на сервере. За функционирование сервера отвечает хостинговая компания. 4. База данных MySQL. Это уже примочка к PHP. Позволяет удобно хранить и обрабатывать данные. Прошу здесь, ранее и далее не придираться сильно к термину "примочка", который я сам и придумал. Разумеется, MySQL, строго говоря, не является каким-то подчиненным элементом к PHP. Просто так уж почему-то складывается на практике. 5. Наконец-то! Подобрались к нашей сегодняшней теме. ДжаваСкрипт (JavaScript) - позволяет выполнять программки на рабочей станции пользователя. Суть - тонкая доводка. Нет смысла передавать явно неправильные данные от пользователя на сервер. Логично провести первичную проверку сразу на компьютере пользователя. Типичные примеры: проверить наличие "собаки" и "точки" в емейле, чтобы пароль состоял только из определенных символов, был нетривиален и имел достаточную длину и т.д. Весь современный (2010-го года) программистский мир Интернета держится на пяти упомянутых пунктах. Есть, конечно, существенные альтернативы (aspx к пункту 3 или PostgreSQ к пункту 4), отклонения и расширения (Ajax к пункту 5), но мы говорить о них не будем, т.к. тогда мы совсем запутаемся. А наша задача заключается немного в другом, а именно - сообразить, как из этих ингредиентов сварить нечто полезное и съедобное. Перед тем, как приступить к практической работе, я прочитал пяток книжек по JavaScript, попробовал приводимые тестовые примеры. Пришел к мысли, что практическая ценность (которую можно использовать сразу) заключается в проверке ключевых полей форм. Практическую реализацию можно посмотреть здесь - Форма контактов для "Матрицы" :: http://sumat.ru/contact/ Разумеется, авторы всех руководств предлагают свои решения подобных моментов, но так как я взял у них "best of the best" + добавил немного своего, но у меня по логике должна быть лучшая версия. Короче говоря, если вам понравилась эта версия, можете взять и использовать для своих целей. Чтобы вам было проще, скачать сам скрипт можно здесь (хотя, конечно, вы прекрасно понимаете, что он уже где-то есть на вашем компьютере, просто искать не очень удобно). И еще, если вам нетрудно, пульните какое-нибудь тестовое сообщение, типа "время отправки такое-то". Теперь о неприятном открытии. К сожалению, все пять упомянутых выше технологий подружить на указанной страничке не удалось. Конкретно, JavaScript решительно не захотела дружить с CSS вот в каком месте. Следите за моей логикой (буду рад, если увидите в ней дыру!) (head) ... (script language="Javascript" type="text/javascript" src="../js/valide.js")(/script) (link rel="stylesheet" href="../css/style-ve.css" type="text/css") ... (/head> ... Далее, если перед использованием JavaScript будет что-то вроде обычной попытки использования CSS - ... (p class="courier16" align="justify") Тут какой-то текст, все равно какой... (/p) ... ... то Javascript отрабатывается со страшными глюками. Причем нельзя сказать, что вообще не работает, а работает "частично"... Я поэкспериментировал и могу сказать с точностью 99% - все дело в слове class, если на страничке Javascript встречает class, относящейся не к ней, а к чужой технологии (в нашем случае - CSS), то глюки неизбежны... Проблему можно обойти, причем разными способами. Например, использовать фреймы. Т.е. использовать Javascript во фрейме, где нет чужеродных классов. Но это все как-то негармонично, некрасиво, грубо. К тому же, фреймы - это свои косяки и глюки. А хочется получить набор простых и прозрачных решений. В данном случае я поступил, как опытный хирург. Если два органа не хотят работать совместно, наименее нужный просто удаляется. В данном случае, я удалил CSS. Сначала только до вступления в игру Javascript. Потом подумал, да и удалил полностью. Т.е. вместо - (p class="courier16" align="justify") Надо писать просто и прямолинейно - (font color="#000000" face="Courier New" size="3") Почему обязательно так - не знаю. Но загадка очень интересная, я над ней думаю. Помимо банального любопытства тут есть и практический интерес. Если разрешить эту проблему, можно будет очень удобно программировать сразу на всех пяти технологиях, применяя каждую в нужной пропорции для конкретного участка. А если вы знаете отгадку на эту загадку - сообщайте. Не исключаю, что отгадка лежит прямо перед носом... Скорее всего, надо почитать умную книжку с названием типа "CSS + Javascript для полных кретинов" или что-то в этом роде. Если такая книжка? Так читайте и сообщайте о своих открытиях. У меня на сегодня все. Спасибо за внимание. Пишите. :::::::::::::::::::::::: ::: Vladimir Abramov ::: ::: va@sumat.ru :::::::: ::: http://sumat.ru/ ::: :::::::::::::::::::::::: ### Конец выпуска. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

---

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти"> <!--</a>--> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> <img src="http://www.kupivip.ru/images/vip/logo.png?1604" style="width: 86px; vertical-align: middle;display: block;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div> <!-- <div class="gray_bg register_shadow"></div> --> </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br />  <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}