24.05.2024
10:18
24.05.2024 10:18:39
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заголовок страницы</title>
<link rel="stylesheet" href="styles/style.css">
<meta property="og:title" content="Заголовок страницы в OG">
<meta property="og:description" content="Описание страницы в OG">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/">
</head>
<body>
<header>
<h1>Личный сайт</h1>
<p>Который сделан на основе готового шаблона</p>
<nav>
<ul>
<li><a href="index.html">Эта страница</a></li>
<li><a href="catalog.html">Другая страница</a></li>
</ul>
</nav>
</header>
<main>
<article>
<section>
<h2>Первая секция</h2>
<p>Она обо мне</p>
<img src="images/image.png" alt="Человек и пароход">
<p>Но может быть и о семантике, я пока не решил.</p>
</section>
<section>
<h2>Вторая секция</h2>
<p>Она тоже обо мне</p>
</section>
<section>
<h2>И третья</h2>
<p>Вы уже должны были начать догадываться.</p>
</section>
</article>
</main>
<footer>
<p>Сюда бы я вписал информацию об авторе и ссылки на другие сайты</p>
</footer>
<!-- сюда можно подключить скрипты -->
</body>
</html> |
переработанный header
используется php
<header>
<h1>Личный сайт</h1>
<p>Который сделан на основе готового шаблона</p>
<?
$arMenu = [
[
"URL" => "index.html",
"NAME" => "Эта страница",
],
[
"URL" => "catalog.html",
"NAME" => "Другая страница",
]
];
if(!empty($arMenu)):?>
<nav>
<ul>
<?foreach($arMenu as $arLink):?>
<li><a href="<?=$arLink["URL"]?>"><?=$arLink["NAME"]?></a></li>
<?endforeach;?>
</ul>
</nav>
<?endif;?>
</header> |
Формы и инпуты
добавим раздел с формой
<section>
<h2>А теперь червертая секция с формой</h2>
<form action="form.php" method="get">
<input type="text" name="textInput" placeholder="Введите текст">
<input type="submit" value="Submit">
</form>
<button id="formBtn">Кнопка</button>
</section> |
по клику на submit будет открываться form.php
файл form.php
<?if(!empty($_GET["textInput"]) && ($_GET["textInput"]=="hello")):?>
<h1>И Вам hello!</h1>
<?else:?>
<h1><?=__FILE__?></h1>
<?endif;?>
<h2>$_REQUEST</h2>
<pre>
<?print_r($_REQUEST);?>
</pre>
<h2>$_GET</h2>
<pre>
<?print_r($_GET);?>
</pre>
<h2>$_POST</h2>
<pre>
<?print_r($_POST);?>
</pre> |
а теперь вод футером добавим скрипты
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/html.js?<?=time()?>"></script>
|
файл html.js
//native js
document.addEventListener("DOMContentLoaded", function(event) {
console.log('js native document ready',event);
var element = document.getElementById('formBtn');
element.addEventListener("click", function(event) {
console.log('jquery click',event);
let textInput = document.querySelector("input[name='textInput']");
if(textInput.value == 'hello1'){
alert('И Вам hello1!');
}
}, false);
});
//jquery
$(document).ready(function(event){
console.log('jquery document ready',event);
$('#formBtn').on('click',function(event){
console.log('jquery click',event);
if($('input[name="textInput"]').val()=='hello'){
alert('И Вам hello!');
}
});
}); |
AJAX
document.addEventListener("DOMContentLoaded", function(event) {
console.log('js native document ready',event);
var element = document.getElementById('formBtn');
element.addEventListener("click", function(event) {
console.log('jquery click',event);
let textInput = document.querySelector("input[name='textInput']");
if(textInput.value == 'hello1'){
alert('И Вам hello1!');
}
else{
//
let dataRequest = new URLSearchParams({
val : textInput.value,
});
const strRequest = dataRequest.toString();
console.log(strRequest);
var xmlhttp = new XMLHttpRequest();
//не видит он val
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
if (xmlhttp.status == 200) {
console.log(JSON.parse(xmlhttp.responseText));
}
else if (xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", "ajax.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");
xmlhttp.send(strRequest);
}
}, false);
});
$(document).ready(function(event){
console.log('jquery document ready',event);
$('#formBtn').on('click',function(event){
console.log('jquery click',event);
if($('input[name="textInput"]').val()=='hello'){
alert('И Вам hello!');
}
else{
let dataRequest = {
val : $('input[name="textInput"]').val(),
}
$.ajax({
url: "ajax.php",
data: dataRequest,
type: "GET",
dataType: "json"
}).done(function(data) {
console.log('jquery ajax done',data);
}).fail(function(data){
console.log('jquery ajax fail',data);
});
}
});
}); |
ajax.php
<?if(empty($_GET['val'])){
$result = "Ничего не ввели";
}
else{
$result = "Введено: ".$_GET['val'];
}
echo json_encode($result);die(); |
24.05.202410:1824.05.2024 10:18:39
Если блог был полезным, можете угостить меня "чашечкой кофе" :)
Сбер по номеру телефона +7 (953) 585-13-09 Вероника.
Спасибо!
