Результати пошуку за запитом: обучение c*
5 важливих речей, які Вам необхідно знати про веб-розробку
Автор: Редакция ITVDN
1. Используйте сброс CSS стилей в браузерах (Reset CSS)
Различные браузеры по-разному устанавливают шрифты, поля и другие свойства. Вместо того, чтобы устранять каждый элемент по одному, большинство разработчиков используют “Reset CSS” стиля для сброса таких параметров, как margin, border, font-size и других.
Примеры и библиотеки для сброса CSS:
Eric Meyer
Yahoo!
Crucial
2. Используйте средства разработки браузера и дополнительные плагины.
Очень полезно при разработке визуализировать «невидимые» части веб-страницы, например, свойства - margin, padding, parent positions и так далее. Вместо того, чтобы спрашивать себя, почему функция остановилась или неверно задан border style, рекомендуется использовать встроенные средства веб-разработки или использовать плагины для браузера.
Firebug – плагин для браузера Firefox. Фантастическая и бесценная вещь при разработке страницы.
Yahoo!'s YSlow – Плагин для Firebug для проверки скорости загрузки страницы.
3. Выучите JavaScript
JavaScript является языком высокого уровня, где автоматически выполняется установка и компилирование. Он подходит для людей даже без опыта программирования.
С появлением AJAX, JS становится очень важной частью современных веб приложений.
4. Выучите Photoshop
Photoshop - необходимая вещь для каждого разработчика. Используя различные инструменты программы, Вы можете создать как отдельную часть дизайна, например, кнопку, так и полноценный дизайн, который не только произведет впечатление на клиентов, но и позволит Вам проявить Ваше творчество.
5. Тестируйте Ваш продукт на IE
30% пользователей интернета до сих пор используют данный браузер для просмотра контента. К сожалению, Internet Explorer на данный момент не получил стандартов HTML, и веб разработчики должны учитывать это в своих продуктах.
Проверяйте Ваш продукт на всех браузерах. Например, Firefox имеет полную поддержку стандарта HTML, в то время как Internet Explorer только продолжает развиваться.
Источник: http://www.hackification.com/2008/11/06/ten-web-development-tips-i-wish-id-known-two-years-ago/
Основи ADO.NET
Автор: Редакция ITVDN
Введение
ADO.NET – это набор классов (фреймворк) для работы с базами данных, а также XML файлами. Аббревиатура ADO расшифровывается как ActiveX Data Objects. Данная технология имеет методы и классы для извлечения и обработки данных.
Список .NET приложений, которые используют возможности ADO.NET для различных действий с БД:
ASP.NET Web Applications
Console Applications
Windows Applications.
Структуры подсоединения к БД
Можно определить два типа архитектуры подключения:
Архитектура, подключенная к базе: подсоединена к БД на протяжении всего рабочего времени.
Архитектура, не подсоединённая к БД: приложение, автоматически подключается/отключается в процессе работы. Приложения на такой архитектуре используют временные данные, хранящиеся на стороне клиента (DataSet).
ADO.NET и его библиотеки классов
На данной диаграмме видны различные типы приложений (Веб приложения, консольные приложения, приложения для Windows и так далее), использующие ADO.NET для подсоединения к БД (SQL Server, Oracle, OleDb, ODBC, XML-файлы и так далее).
Классы в ADO.NET
Также на предыдущем рисунке мы видим различные классы, а именно:
Connection Class
Command Class
DataReader Class
DataAdaptor Class
DataSet.Class
1. Connection Class
Данные классы применяются в ADO.NET для подсоединения к БД.
2. Command Class
Данный класс обеспечивает хранение и выполнение SQL команд. Ниже приведены различные команды, выполняющиеся с помощью данного класса.
ExecuteReader: Возвращает данные к клиенту в виде строк.
ExecuteNonQuery: Выполняет команду, изменяющую данные в базе данных.
ExecuteScalar: Данный класс возвращает только одно значение.
ExecuteXMLReader: (Только для классов SqlClient) Получает данные из базы данных SQL Server 2000 с помощью XML-потока.
3. DataReader Class
DataReader используется для получения данных. Он используется в сочетании с Command Class для выполнения SQL-запроса.
5. DataSet Class
Класс DataSet – сердце ADO.NET, представляющее из себя набор объектов DataTable. Каждый такой объект содержит много объектов DataColumn и DataRow.
Подключение ADO.NET к базе данных
Для настройки подключения Вы должны быть знакомы со строками подключения (connection strings). ConnectionString – строка переменной (регистр не учитывается). Строки подключения нужны нам для параметра SQLConnection. Данные примеры содержат основные значения, а именно: provider, server, database, userid и password.
SQL Аутентификация
String constr="server=.;database=institute;user id=rakesh;password=abc@123";
Или:
String constr="data source=.;initial catalog=institute;uid=rakesh;pwd=abc@213";
Windows Аутентификация (Windows Authentication)
String constr="server=.;database=institute;trusted_connection=true"
Или:
String constr="server=.;initial catalog=institute;integrated security=true"
Получение и отображение данных из базы данных
Получить и отобразить данные можно по такой схеме:
Создайте объект SqlConnection, используя строку подключения.
Откройте соединение.
Создайте SQLCommand. Укажите тип SQLCommand.
Выполните команду (используйте executereader).
Получить результат (используйте SqlDataReader).
Закройте соединение.
Получите результат.
Ниже приведен код для подсоединения к SQL:
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data.OracleClient;
using System.Data.OleDb;
using System.Data.Odbc;
namespace AdoDemo
{
public partial class WebForml : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("data source=.; database=Sample; integrated security=SSPI");
SqlCommand cmd = new SqlCommand("Select * from tblProduct", con);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
GridView1.DataSource = rdr;
GridView1.DataBind();
con.Close();
}
}
}
Вы должны использовать System.Data.SqlClient для подключения к SQL. В предыдущем коде мы использовали классы SqlConnection, SqlCommand и SqlDataReader, потому что наше приложение обращалось к SQL Server, а он понимает только SQL.
Подключение к базе данных Oracle
При подключении к БД Oracle Вам нужно изменить имя некоторых классов, а именно SqlConnection на OracleConnection, SqlCommand на OracleCommand и SqlDataReader на OracleDataReader. Также вначале используйте System.Data.OracleClient.
Источник: http://www.c-sharpcorner.com/UploadFile/18fc30/understanding-the-basics-of-ado-net/
Швидко вчимося рахувати у двійковій та шістнадцятковій системі
Автор: Костянтин Чорний
Вступ
Іноді виникає потреба швидко прочитати чи записати числа у двійковій чи шістнадцятковій системі числення, наприклад, працюючи з різними байтовими редакторами, під час розрахунків формул з побітовими операціями чи роботі з кольором. Часто в таких ситуаціях немає можливості довго переводити числа за допомогою формул або калькулятора. Про швидкі способи переходу між системами числення йтиметься у цій статті.
Перехід від десяткової системи до двійкової
Перший випадок – рахуємо від десяткової системи до двійкової. Основне, що потрібно пам'ятати в даному випадку – це ряд ступенів двійки (1, 2, 4, 8, 16, 32, 64, 128 і т. д.). Навіть якщо його ви не знаєте, то можна просто кожне наступне число множити на двійку. Оскільки молодші розряди йдуть праворуч, а старші – ліворуч, то їх записуватимемо у зворотному порядку справа наліво.
Для прикладу будемо переводити число 115. Далі дивимося, якщо значення розряду вміщується в число, то віднімаємо від нього це значення і ставимо в цьому розряді 1, інакше ставимо 0.
Зворотний переклад ще простіше – треба підсумувати всі значення розрядів, які відзначені одиничками: 64+32+16+2+1=115.
Перехід до шістнадцяткової системи
Тепер давайте розберемося із шістнадцятковою системою. Маючи на увазі те, що кількість чисел, які кодуються тетрадою (4 біти) і одним шістнадцятковим символом співпадають, відповідно кожен символ кодує одну двійкову тетраду.
В результаті одержали число 0х73. Головне пам'ятати, що А=10, B=11, C=12, D=13, E=14, F=15.
Якщо є потреба перевести десяткове число в шістнадцяткове або навпаки, то тут найпростіше спочатку буде перевести число в двійкове уявлення, а потім тільки в шістнадцяткове або десяткове відповідно.
У результаті ми навчилися швидко переводити числа з однієї системи числення до іншої. Головне, що потрібно пам'ятати – ступені двійки і вміти гарно додавати та віднімати. Детальніше про машинну математику ви можете дізнатись у другому уроці курсу C# Стартовий.
Попрактикуйтеся самостійно і переведіть кілька чисел з однієї системи до іншої, звіряючись з калькулятором. Трохи практики – і ви всьому навчитеся.
Оновлення для ASP.NET vNext, .NET Native та RyuJIT
Автор: Редакция ITVDN
Введение
В августе 2014 года были обновлены продукты, работающие на .NET, а именно: ASP.NET vNext, .NET Native и RyuJIT.
ASP.NET vNext
ASP.NET vNext - обновленная версия ASP.NET, используемая для создания клиент-серверных приложений. Разработчики продолжают добавлять новые функции и улучшают разработку ASP.NET vNext приложений, написанных в Visual Studio 14.
Список преимуществ, почему ASP.NET vNext лучше выбирать в качестве веб-платформы:
Единое и улучшенное API для MVC и Web API.
Значительно улучшена производительность при запуске и пропускная способность.
Полная поддержка .NET Framework.
Компоненты ASP.NET vNext не надо регистрировать, потому что конфигурационные сведения уже встроены.
Поддерживает работу с Mono на Mac и Linux
Новые функции
Минимальный Формат Проекта «Minimal Project Format»
Формат проекта ASP.NET (kjproj) также был обновлен.
Новый функционал теперь будет влиять на работу внутри проекта Visual Studio:
Легкий контроль всех исходников, так как kproj не будет изменятся при добавлении, перемещении или переименовании файла.
Улучшенный опыт использования командной строки Visual Studio и ASP.NET, поскольку среда разработки не нуждается в списке файлов. Это хорошо работает, когда над проектом работают один-два человека.
Поддержка Модульного Тестирования «Unit Testing Support»
Была добавлена базовая поддержка для модульного тестирования, теперь можно использовать любой фреймворк для тестирования. Разработчиками создана первоначальная поддержка xUnit, работающая в рамках текущего Visual Studio Test Explorer.
Скаффолдинг «Scaffolding»
ASP.NET Scaffolding – это фреймворк для генерации кода, используемый в ASP.NET веб приложениях. Его использование позволяет сократить время разработки конфигурационных файлов для приложений.
Новая версия позволяет добавить первоначальную поддержку фреймворка в ASP.NET vNext, а также создавать собственный скаффолдинг для генерации контента.
Обновленный домашний репозиторий «Update Home Repo»
“Home Repo” – Ваш репозиторий на Github для командной строки ASP.NET vNext. В новой версии были добавлены: новая документация, примеры и скрипты. Теперь имеются простые ASP.NET vNext примеры “Home Repo” для проверки работоспособности вашей программной среды.
.NET Native
Обновление .NET Native включает в себя лимитированную поддержку “Windows Communication Foundation” (WCF). Так же были добавлены новые свойства для WCF:
CustomBinding
BasicHttpBinding
HttpTransportBindingElement
TextMessageEncodingBindingElement
ChannelFactory
ClientBase
DataContractSerializer
RyuJIT – Новое поколение JIT компиляторов
В JIT компиляторе RyuJIT обновилась исполняющая библиотека CoreCLR. Библиотека SIMD на данный момент не поддерживается, но разработчики обещают ее добавить в следующих релизах.
Подробнее про компилятор RyuJIT Вы можете узнать на ресурсе: blogs.msdn.com/b/dotnet/archive/2013/09/30/ryujit-the-next-generation-jit-compiler.aspx
Ознакомиться со всеми обновленными продуктами можно в Visual Studio 2014 или Visual Studio 2015 Preview.
Источник: blog.msdn.com
Компілятор Roslyn
Автор: Редакция ITVDN
Введение
Roslyn – это компилятор с открытым исходным кодом для C# и Visual Basic. Roslyn представляет из себя библиотеку (API), интегрируемую в проект. Данный компилятор не имеет ничего общего с CLR. Таким образом, он может скомпилировать код с преобразованием в Intermediate Language для последующей передачи в CLR.
Установка компилятора
Для установки Roslyn Вам нужно скачать и установить Visual Studio 2015 Preview (рекомендуется установка на виртуальной машине). Затем перейдите на страницу проекта Roslyn и скачайте исходный код. Распаковав файл, Вы увидите папку с несколькими файлами и папками в ней. Нас интересует только папка Src:
Дважды щелкните на Roslyn.sln для загрузки проекта. После этого настройте solution в VS и перейдите в Roslyn/Binaries/Debug:
Использование компилятора
Каждый, кто использует C#, наверняка знаком с csc.exe. Посмотрев на дату создания файла, Вы увидите, что одновременно с открытием проекта Roslyn скомпилировался csc.exe. Как мы этим будем пользоваться?
Запустив файл csc из командной строки, Вы увидите ошибку:
C:\Users\Michael\Documents\Visual Studio 2015\Projects\roslyn\Binaries\Debug>csc
Microsoft (R) Visual C# Compiler version 1.0.0.0
Copyright (C) Microsoft Corporation. All rights reserved.
warning CS2008: No source files specified.
error CS1562: Outputs without source must have the /out option specified
C:\Users\Michael\Documents\Visual Studio 2015\Projects\roslyn\Binaries\Debug>
Тут нечему удивляться, поскольку Вы не указали исходный файл для компиляции. Теперь можно посмотреть ошибки и предупреждения в нашем исходном коде.
Если мы будем искать текст Outputs without source must have the /out option specified, то мы найдем место в коде, выдающее нам ошибку. В этом случае ошибка исходит из класса ResourceManager.
Разбираем пример
Скачайте и установите:
• Visual Studio 2015 Preview SDK
• Visual Studio Project Templates для Roslyn
• Syntax Visualizer для Roslyn
После установки откройте Visual Studio 2015 Preview и выберите шаблон “Compiler Platform Console Application”:
Добавьте следующий код в Main:
public static void Main(string[] args)
{
SyntaxTree tree = CSharpSyntaxTree.ParseText(
@"using System;
using System.Collections.Generic;
using System.Text;
namespace HelloWorld
{
class Program
{
static void Main(string[] args)
{
Console.WriteLine(""Hello, TDN!"");
}
}
}");
var root = (CompilationUnitSyntax)tree.GetRoot();
var compilation = CSharpCompilation.Create("HelloTDN")
.AddReferences(references: new[] { MetadataReference.CreateFromAssembly(typeof(object).Assembly) })
.AddSyntaxTrees(tree);
}
Установите точку остановки (breakpoint) на последней фигурной скобке и запустите Syntax Visualizer через меню View -> Other Windows -> Roslyn Syntax Visualizer. Вы увидите следующее:
Запустите приложение и перейдите в верхнюю часть документа. Нажмите на объявленный SyntaxTree, и он перенаправит Вас на часть кода, в котором содержится большая часть информации. В нашем примере мы рассматриваем Leading и Trailing WhiteSpace.
Теперь мы увидели процесс компиляции с помощью Roslyn.
Выводы
Roslyn - это отличный метод получения полезной информации о нашем исходном коде. Он предоставляет множество функциональных возможностей, например: IntelliSence, переформатирование кода и т.д. Также он обеспечивает совместимость языков. Данный функционал дает много возможностей для инноваций в таких областях, как мета-программирование, генерация кода и его преобразование, интерактивное использование языков C# и Visual Basic.
Источник: http://developer.telerik.com/featured/roslyn-nutshell/
Валідація форм засобами HTML5
Автор: Редакция ITVDN
Введення
Використовуючи форми в HTML5, Ви часто використовуєте методи перевірки (валідації) даних, адже їх ігнорування може призвести: до втрат користувачів, до сміття в базі даних або до взлому сайту. Історично склалося, що створення форм із гарною валідацією – складне завдання.
В HTML5 є інструменти оброблення даних для форм, з їх допомогою можна проводити валідацію, що включає в себе спеціальні атрибути і нові типи вхідних даних. Давайте розберемо їх детальніше.
1. Спеціалізовані типи вхідних даних
HTML5 містить кілька нових типів введення. Вони використовуються для створення поля введення, що приймає тільки певні типи даних.
Нові типи вхідних даних виглядають наступним чином:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
Приклад:
<input type="email"/>
Якщо браузер не підтримує даний тип введення, поле поводитиметься як звичайне поле введення тексту.
2. Обов’язкові поля для заповнення
Просто додавши атрибут "required"до <input>, <select> або <textarea>, Ви кажете браузеру, що значення має бути заповнене.
<input type="checkbox" name="terms" required >
3. Ліміти
Ми можемо встановити деякі обмеження та ліміти, наприклад, максимальні та мінімальні значення для числових полів. Щоб обмежити довжину поля введення, треба використовувати атрибут "maxlength".
<input type="text" name="name" required maxlength="15">
Поле <input type="number" /> використовує атрибути "max" та "min", щоб створити діапазон можливо-допустимих значень (у прикладі мінімально допустимий вік – 18).
<input type="number" name="age" min="18" required>
4. Стилізування
CSS3 псевдо-класи дозволяють прикрасити форму незалежно від її стану. Це:
:valid
:invalid
:required
:optional
:in-range
:out-of-range
:read-only
:read-write
У прикладі ми об'єднали селектори "valid" та "invalid" із псевдо-класом "focus" для зафарбовування поля форми в червоний або зелений, залежно від того, що робить користувач: вибирає або друкує.
input:focus:invalid,
textarea:focus:invalid{
border:solid 2px #F5192F;
}
input:focus:valid,
textarea:focus:valid{
border:solid 2px #18E109;
background-color:#fff;
}
5. Підказки
Ви помічали спливаюче вікно з підказкою під час відправлення неправильно заповненої форми? Встановивши атрибут "title" для поля введення, можна додати підказки, що вказують на помилки при порушенні тих чи інших правил валідації.
Зверніть увагу, що різні браузери відображають підказки по-різному. У браузері Chrome значення назви атрибуту буде відображатися дрібним шрифтом, під основним повідомленням про помилку. У Firefox інша проблема: використовуючи атрибут “pattern” після того, як він береться в якості шаблону, Ви не отримаєте спливаючу підказку.
<input type="text" name="name" title="Будь ласка, введіть ім’я користувача.">
6. Шаблони
Атрибут "pattern" дозволяє розробникам задавати регулярний вираз, який браузер порівнює з даними введення, перш ніж відправити форму заявки.
Ось як це можна використати:
<input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">
З функцією фільтрування вхідних даних ми можемо приймати тільки повну e-mail адресу.
Джерело: http://tutorialzine.com/2014/12/quick-tip-easy-form-validation-with-html5/
6 основних тенденцій, які будуть популярні у веб-розробці у 2015 році
Автор: Редакция ITVDN
Введение
Подошел к концу 2014 год и самое время спросить себя: «Какие тенденции будут преобладать в сфере веб-разработки в 2015 году?». Представляем вашему вниманию подборку трендов, которые, по нашему мнению, будут популярны в следующем году.
1. Адаптивный дизайн
Вместе с ростом популярности на планшеты начал расти спрос на адаптивный дизайн, сегодня это - неотъемлемая часть любого сайта. С помощью “Responsive Design” пользователь сможет спокойно просматривать Ваш сайт на любом девайсе, будь то PC или мобильный телефон. Зачем Вам адаптивный дизайн? Ответ простой, сейчас все больше пользователей просматривают новости через разные устройства с разным расширением экрана, поэтому выбор ресурса напрямую зависит от удобства его использования на всех носителях. Главный критерий выбора – ширина контента не должна превышать ширину экрана, иначе пользователю будет неудобно воспринимать информацию и он к вам больше не вернется.
2. Плоский дизайн (Flat Design)
Плоский дизайн начал набирать свою популярность после релиза Windows 8, благодаря компании Microsoft и ее Metro-стилю. Концепция плоского дизайна заключается в том, что двухмерные изображения не перегружают восприятие пользователя и уменьшают загруженность ресурса. В плоском дизайне отсутствуют лишние эффекты: тени, блики и градиенты, в противовес им выдвигаются яркие цветовые решения.
3. Карточный дизайн
Карточный дизайн — это способ подачи контента на страницах сайта. Каждая карточка содержит в себе определенную информацию, это дает ресурсу возможность концентрировать внимание пользователя и легко группировать содержимое сайта. Главное преимущество данного типа дизайна — это легкость взаимодействия пользователя с Вашим сайтом, ведь карточки легко можно опубликовать на своей странице в социальных сетях, сохранить в избранное или прокомментировать. Первопроходцами карточного дизайна считаются Pinterest и Google+. Благодаря своей отзывчивости и адаптивности все больше сайтов переходит на карточный дизайн.
4. Фоновые изображения и видео
За последнее время все большую популярность набирают ресурсы с широкоформатным изображением или видео на фоне, с небольшой цитатой поверх него. Этот прием идеально подходит для сайта-портфолио или сайта-визитки.
5. Рисованные иллюстрации и шрифты
Сайты с рисованной типографикой или иллюстрациями подкупают своей неповторимостью. Все больше сайтов начали использовать в своем дизайне элементы, разработанные вручную, именно под определенный проект. Эти детали делают сайт уникальным и запоминающимся, пользователю приятней пользоваться таким сайтом, он захочет рассказать о нем другу и обязательно вернется сам.
6. SVG иконки и анимации
SVG — это специальный язык разметки векторной графики, который разрабатывается W3C с 1999 года. Возможность создавать SVG изображения доступна в большинстве векторных редакторов: Illustrator, Corel Draw или Sketch. SVG-графика часто используется для создания иконок, они выглядят качественней и легко адаптируются под разные расширения экрана. И напоследок, с помощью SVG можно создавать анимированные иконки.
Источник: http://www.sevensignature.com/blog/articles/top-10-sign-things-come-2015-web-design-trends/
Як виконати налагодження JavaScript програми
Автор: Дмитро Охріменко
Введение
Данная статья будет полезна web разработчикам, которые начинают работать с языком JavaScript и знакомятся с инструментами разработки, встроенными в браузер. Умение «дебажить» JavaScript приложение является очень важным для веб разработчика, поскольку позволяет быстро найти причину ошибки в сценарии.
Отладка в Google Chrome
Отладка приложения – процесс обнаружения, локализации и устранения ошибок при помощи отладчика (инструмента встроенного в среду разработки или другое ПО). При отладке разработчик может узнать значения переменных и ход выполнения программы.
Во всех современных браузерах есть инструменты, позволяющие разработчику анализировать работу веб приложения, в том числе и выполнять отладку JavaScript кода. Для того, чтобы открыть инструменты веб разработчика, в большинстве браузеров используется клавиша F12. В данной статье будет рассмотрена отладка JavaScript приложения на примере инструмента Web Inspector в браузере Google Chrome.
Ниже приведен HTML код страницы с простым сценарием, который будет анализироваться с помощью Web Inspector.
<div id="myDiv">div>
<script>
var div = document.getElementById("mydiv");
var text = "";
for (var i = 0; i < 10; i++)
{
text += i + " ";
}
div.innerHTML = text;
<script>
Задача данного сценария - создать ряд цифр от 0 до 9-ти и отобразить их в элементе div на странице. Но код не срабатывает, и мы попробуем найти проблему, выполнив отладку.
Запуск Web Inspector и переключение в окно отладчика.
Нажав на клавишу F12, мы получаем следующее окно в Google Chrome.
Убедитесь в том, что выбран пункт меню Sources, который и позволяет произвести отладку.
Окно отладки делится на три панели (отмечены на изображении цифрами):
1 – Панель файлов, подключенных к текущей странице, в которых есть JavaScript код.
2 – Панель, в которой будет отображаться JavaScript код выбранного файла.
3 – Панель с дополнительными настройками, упрощающими отладку.
Установка точки останова или breakpoint
Для того, чтобы начать отладку приложения, нужно определить, на каком этапе произойдет остановка выполнения сценария. Для этого, как и в большинстве других инструментах отладки, необходимо установить точку останова или breakpoint.
Точка останова (breakpoint) – метка, которая указывает отладчику, на каком этапе выполнения приложения нужно сделать паузу.
Для начала необходимо выбрать файл, в котором будет выполнятся отладка JavaScript (для этого дважды щелкаем по файлу index.html)
После этого устанавливаем точку останова, нажимая на номер строки в центральной панели, которая отображает код выбранного файла. Точка останова отображается синим прямоугольником. Теперь, если обновить страницу, сценарий должен выполниться до 9 строки и остановиться. Далее мы сможем пошагово выполнять отладку приложения и отслеживать значения переменных в сценарии.
Одно из преимуществ отладчика – отображение ошибок, выброшенных интерпретатором. На строке 14 выводится сообщение – Uncaught TypeError: Cannot set property ‘innerHTML’ of null (невозможно установить свойство ‘innerHTML’ для null). Это сообщение уже может помочь в решении проблемы сценария. Сценарий пытается обратиться к свойству на переменной div - сообщение говорит о том, что в этой переменной null и для null нельзя установить значения свойства. Если в переменной null - значит нужно искать код, который записывает в переменную значение.
Пошаговая отладка JavaScript
После установки breakpoint нужно начать отладку. Для этого достаточно обновить страницу (F5). При наличии точки останова сценарий остановился на строке №9 (об этом свидетельствует синяя подсветка строки).
С помощью горячей клавиши F10 можно пошагово выполнять приложение и отследить значения переменных. При первом нажатии на F10 выполнение переходит на следующую строку кода и, наведя курсор на переменную div, мы сможем увидеть значение этой переменной. Отладчик показывает, что в переменной находится значение null.
Ошибка на строке №9 вызвана отсутствием инициализации переменной div должным образом. После внимательного изучения этой строки мы находим ошибку – неправильно указанный id элемента “myDiv”.
Дополнительную информацию по отладке JavaScript приложений Вы можете найти в бесплатном видео уроке https://itvdn.com/ru/video/javascript-advanced. В этом видео уроке будет идти речь не только об отладке, но и о работе с объектами и прототипами в JavaScript.
Пріоритет операторів у JavaScript (частина 1)
Автор: Олександр Марченко
Введение
В данной статье мы познакомимся со стандартными операторами и их применением в языке программирования JavaScript для работы с переменными и со значениями.
Сперва познакомимся со специфической терминологией, которая используется при работе с операторами.Большинство операторов обозначаются символами пунктуации, такими как =, +, - и другими. Некоторые – специальными ключевыми словами, к примеру, delete и new. Но, как знаки пунктуации, так и ключевые слова обозначают обычные операторы, просто используют для этого разный синтаксис.
Оператор присвоения
Операнд – то, к чему будет применен оператор, или порой можно встретить название: «аргумент оператора».
Оператор присваивания выглядит как знак равенства = :
var a = 1, b = 2;
В данной строке переменной "a" было присвоено значение 1, а переменной b – значение 2.
var a = a + 2;
В этой строке переменной "a" было присвоено ее значение, увеличенной на 2. Иначе говоря, сперва выполнится операция сложения текущего значения переменной a, результат которого будет пере-присвоен переменной a.
Полезной особенностью данного оператора является использование его по цепочке:
var a, b, c;
a = b = c = 2 + 3;
В результате работы последней строки всем трем переменным будет присвоено значение 5.
Арифметические операторы
Арифметические операторы используются для определения простейших математических операций над операндами, в качестве которых могут выступать как значения, так и переменные: плюс + , минус - , умножить * , поделить / , деление по модулю (определение остатка от деления) %.
Большинство JavaScript-операторов работают с двумя операндами, следовательно, способны два простых выражения объединить в одно более сложное. Но JavaScript поддерживает несколько унарных операторов, которые преобразуют только одно выражение в другое, более сложное.
Таким оператором является унарный минус, который изменяет знак числа на противоположный. В таком случае оператор «минус» в выражении -1 представляет собой унарный оператор и выполняет смену знака у своего единственного операнда 1.
<script type="text/javascript">
var x = 1;
document.write(-x + " ");
document.write(-(-x) + " ");
document.write(-(x + 4) + " ");
script>
Унарный плюс, используемый в качестве арифметического оператора, не выполняет каких-либо действий:
<script type="text/javascript">
document.write(+1);
document.write(" ");
document.write(+(1 - 2));
script>
Более распространенным применением унарного плюса является преобразование значения в число.
В случае объединения двух выражений в одно более сложное используются бинарные операторы, иначе говоря, бинарным называют оператор, который применяется к двум операндам, к примеру, если оператор плюс будет стоять между двумя числами, он будет представлен в своей бинарной форме:
<script type="text/javascript">
var a = 1, b = 2;
document.write(a + b + " ");
document.write(b + a + " ");
script>
Кроме того, если у нас есть две переменные со строковыми значениями, бинарный плюс сложит эти строки. произведя конкатенацию, а применение унарного плюса к каждой из переменных произведет преобразование их значений к числу.
var a = "2";
var b = "3";
alert(a + b); // "23", произошла конкатенация строк
alert(+a + b); // "23", второй операнд - всё ещё стоковая переменная
alert(+a + +b); // 5, число, поскольку оба операнда предварительно преобразованы в числа ((+a) + (+a))
В то же время, если использовать оператор «минус», мы получим другие результаты:
var a = "2";
var b = "3";
alert(a - b); // -1, произошло неявное преобразование типов
Таким образом, мы подошли к тому, что создавая JavaScript-выражения, важно обращать внимание на типы данных, передаваемых операторам, и, как следствие, на типы данных, которые они возвращают. Стоит отметить, что различные операторы требуют, чтобы операнды, с которыми они работают, возвращали значения только определенного типа. Так, нельзя выполнить умножение строк, поэтому выражение var a = "text1" * "text2"; не является допустимым и приведет к ошибке. В то же время, выражение var a = "2" * "3"; вполне допустимо, потому что интерпретатор JavaScript будет пытаться по мере возможностей преобразовать выражение в требуемый тип данных, в нашем случае из строкового типа в числовой.
Познакомимся с работой операторов умножения и деления на простом примере. В данном случае мы используем бинарные формы операторов, поскольку они взаимодействуют с двумя операндами:
<script type="text/javascript">
document.write("2" / 2 + " "); // 1, произойдет неявное преобразование строки в число
document.write(((2 + 2) * 6) / "12" + " "); // 2, произойдет неявное преобразование строки в число
document.write(12 * 7 / 2 + " "); // 42
document.write(17 % 7 + " "); // 3, возвращаем остаток от целочисленного деления
document.write(21 / 3 - 1 + " "); // 6, наблюдаем правильный порядок выполнения операций: сперва деление, затем нахождение разницы
script>
Если с работой операторов +, -, *, / в самом простом их применении мы были знакомы еще из младшей школы, то с оператором % стоит познакомиться детальней. Оператор деления по модулю % вычисляет остаток, получаемый при целочисленном делении первого операнда на второй, которые в курсе школьной математики именовались как делимое и делитель соответственно, а в результате самого деления мы получали частное и остаток от деления. Деление по модулю подразумевает возвращение остатка от деления.
Например, выражение var a = 190 % 27; будет выполнено следующим образом:
Оператор деления по модулю зачастую применяют к целочисленным операндам, но он корректно работает и с вещественными значениями. Так, в итоге выполнения выражения var a = -6.3 % 3; переменной a будет присвоено значение -0.3.
Кроме этого, стоит отметить следующие особенности вычислений в JavaScript:
<script type="text/javascript">
var a = 4,
b = true;
c = undefined,
d = Infinity,
e = 0,
res = undefined;
res = a * d;
document.write(res + " "); // Infinity, умножение числа на бесконечность возвращает бесконечность
res = a + b;
document.write(res + " "); // 5, true преобразовывается в 1 и производится операция сложения
res = a / e;
document.write(res + " "); // Infinity, деление числа на ноль возвращает бесконечность
res = a * c;
document.write(res + " "); // NaN, умножение числа на неопределенный тип данных, вернет сигнализацию об ошибке в виде NaN - Not a Number
script>
В дальнейшем мы познакомимся с такими операторами как инкремент/декремент, операторами сравнения, равенства и идентичности, которые будут часто использоваться в написании клиентских сценариев c использованием языка JavaScript.
Початок кар'єри в ІТ
Автор: Олександр Марченко
Введение
Пожалуй, все давно знают, что эра технологий уже наступила, и произошло это уже давно. На сегодняшний день невозможно создать производство чего-либо без использования информационных технологий.
Насколько целесообразным является выбор именно Информационных технологий в качестве своей профессиональной сферы, решать каждому из Вас. Но Вам будет очень трудно найти что-то более динамичное и захватывающее. Также стоит помнить, что и уровень зарплат по-прежнему сохраняет статус наиболее привлекательных, практически во всех современных экономиках развитых государств.
Что нужно знать о построении своей карьеры? Все решают Ваши знания и отношения с другими людьми. Причем, влияние этих двух аспектов абсолютно равноправное.
Если Вы отдадите должное внимание построению нужных связей и знакомств, будете постоянно пополнять свой круг общения новыми приятными и полезными знакомствами, и, главное, не забудете поддерживать старые отношения, то всегда будете оставаться в более выгодных условиях.
И наоборот, тот, кто будет разбрасываться знакомствами, ставить свои приоритеты выше других, вести себя неподобающе в современном обществе, в итоге приобретет дурную славу, которая очень быстро распространиться по локальному ИТ-сообществу и за его пределами.
Первым шагом в построении карьеры, скорее всего будет трудоустройство на первую работу. И тут придется ответить на самый страшный вопрос: «Где взять 2 года опыта?»
Порой этот вопрос звучит следующим образом: «Где я обзаведусь опытом работы в реальных проектах, если я только учусь/только что выпустился/работаю в другой сфере/не имел опыта с этой платформой?». И это абсолютно правильный вопрос, поскольку работодатель хочет нанять надежного профессионала, а не дилетанта.
Попробуем найти ответы на этот вопрос, и вот несколько вариантов:
Принимайте участие в хакатонах и OpenSource проектах
Данного рода активности позволят Вам обзавестись своими личными проектами. Их Вы сможете развивать, при этом, без сомнений, улучшите свои профессиональные навыки и обзаведетесь полезными знакомствами. Ведь они могут сыграть ключевую роль в Вашем будущем.
Анализируйте чужой код
Доступ к которому все также легко получить на OpenSource проектах. Вы не сможете стать профессионалом и создавать свои решения до тех пор, пока не сможете полностью понимать чужие. Это все равно как учиться писать, не имея навыков чтения.
Участвуйте в стажировках
Большинство крупных компаний с огромным удовольствием берут на стажировки студентов, которые проявляют потенциал. Вам никто не даст участвовать в крупных и критически важных проектах, но зато Вы сможете проявить себя в реальных условиях, да еще и сделать это под чутким руководством более опытных коллег. Дополнительным бонусом стажировок является пусть и незначительная, но возможность получения приглашения на работу. Для этого нужно постараться, но никто и не говорил, что будет легко.
Кроме всего прочего не забывайте о постоянной работе над собой. Если Вы хотите оставаться востребованным на рынке труда специалистом, Вам необходимо оставаться в курсе последних событий ИТ-мира и непрерывно совершенствоваться. Для Вас не должно быть открытием то, что работа - это рутина, а вот обучение зачастую приносит больше удовольствия. Так превратите свою работу в непрерывное развитие, и Вы не пожалеете!