índice

1. Introdução
2. Código prático

1. Introdução

1.1 O que é JavaScript

JavaScript é uma linguagem dinâmica de programação de computador. É leve e mais comumente usado como parte de uma página da Web. Sua implementação permite que os scripts do lado do cliente interajam com os usuários e criem páginas dinâmicas. É uma linguagem de programação interpretada com funções orientadas a objetos.

1.2 A diferença entre JavaScript e linguagem Java

Javascript não tem nada a ver com Java, são duas linguagens diferentes (java é uma linguagem de programação, javascript é a linguagem de script do cliente), mas há um Java no nome.

1.3 Html 、 Css 和 Javascript

Esses três elementos juntos formam a base do desenvolvimento da web.

HTML : A estrutura do título da página, corpo, quaisquer imagens a serem incluídas
CSS : Controle a aparência da página (isso será usado para personalizar fontes, cores de fundo, etc.)
JavaScript : O incrível terceiro elemento. Depois de criar a estrutura (HTML) e a atmosfera estética (CSS), o JavaScript torna seu site ou projeto vibrante.

1.4 Função Javascript

Validação de dados de formulário: a validação de dados de formulário é a função mais básica e eficiente do JavaScript.
HTML dinâmico (DHTML): HTML dinâmico refere-se a efeitos de página da web que mudam dinamicamente sem intervenção do servidor, incluindo conteúdo dinâmico, estilos dinâmicos e layouts dinâmicos. Como alterar o tamanho da caixa, cor de fundo, imagem, etc.
Interação do usuário: a interação do usuário se refere ao processamento de resposta com base em diferentes operações do usuário. Por exemplo: menu de ligação, etc.
Vinculação de dados: formulários e tabelas HTML podem ser definidos como fontes de dados em arquivos .txt. Ao acessar os arquivos de fonte de dados localizados no lado do servidor, os dados na fonte de dados podem ser transmitidos para o cliente e os dados podem ser salvos no cliente fim.
Pesquise uma pequena quantidade de dados: pode pesquisar e substituir cadeias de caracteres na página da web atual.
Tecnologia de núcleo AJAX: AJAX é JavaScript + XML assíncrono. Este objeto fornece uma tecnologia que suporta solicitações assíncronas, de forma que o cliente pode usar o JavaScript para fazer uma solicitação ao servidor e processar a resposta, mas não afeta a navegação do usuário no cliente.
O Nodejs usa javascript como back-end. É a única linguagem que pode ser usada como front-end e back-end.

(A função acima é usar diretamente o material do curso do meu professor. Eu não sei muito. Ele é um programador sênior com mais de 10 anos de experiência em desenvolvimento. Hahahahahaha, quero ajudar a promover sua aula online, mas pense nisso Esqueça, acho que a publicidade é um pouco ruim)

*********************************************一条华丽的分割线***************************************************

2. Código prático

2.1 Javascript é escrito neste html

1. O programa js deve ser escrito na tag de script.
2. Script: pode ser escrito em qualquer lugar da página da web.
3. Digite = "text / javascript": indica que o idioma atual é o idioma javascript. Este atributo pode ser omitido .

Exemplo: código acima

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			alert("出错啦")
		</script>
	</body>
</html>

Basta executar o código e você saberá

2.2 Javascript pode ser escrito em um arquivo separado (link externo)

Crie um arquivo js e escreva o código js no arquivo js. (Basta escrever o código js no arquivo externo, apenas escrever o código diretamente, sem necessidade de adicionar tags de script)

Por exemplo, crie um arquivo test.js no diretório js e o código nele é alert ("Ocorreu um erro!")

Código de exemplo

a.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script src="js/test.js" type="text/javascript" charset="UTF-8">
			
		</script>
		
	</body>
</html>

Basta executar o código e você saberá

2.3 Combate real: Clique em uma caixa para mudar a cor de outra caixa

Por exemplo, o código:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
     
     
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			#box2{
     
     
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			
		</div>
		<div id="box2">
			
		</div>
		
		<script type="text/javascript">
			//目标：点击box1时，让box2变颜色
			var b1 = document.getElementById("box1")
			b1.onclick=function(){
     
     
				// 当点击b1的时候，执行此处的代码
				document.getElementById("box2").style.backgroundColor="pink"
			}
		</script>
	</body>
</html>

Você saberá o efeito da corrida, basta clicar na primeira pequena caixa

2.4 Combate real: um botão vinculado a um evento

Em js, uma função pode ser definida usando a palavra-chave função. O código na função não será executado automaticamente. O código na função só será executado após a função ser chamada.
Você pode vincular eventos de clique a qualquer tag de contêiner html na página da web. οnclick = "add ();" onclick significa executar quando clicado.
Existem duas funções parseInt em js para converter uma string em um número. parseFloat (): especializa a string como um tipo de ponto flutuante.

Código de exemplo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	<input type="text" name="tb1" id="tb1" value="" />+<input type="text" name="tb2" id="tb2" value="" /> =<input type="text" name="tb3" id="tb3" value="" />
	<input type="button" id="btnjisuan" value="计算" onclick="add();" />
	
	<a href="javascript:void(0);"  onclick="bb();">腾讯</a>
	
	
	<script type="text/javascript">
		
		function add()
		{
     
     
			
			var v1=document.getElementById("tb1").value;
			var v2=document.getElementById("tb2").value;
			var v3=parseInt(v1) + parseInt(v2);
			document.getElementById("tb3").value=v3;
		}
		
		function bb()
		{
     
     
			location.href="http://www.qq.com"; //通过js代码实现页面的跳转 
			
		}
	</script>
	</body>
</html>

Basta rodar um e você saberá hahahaha, depois de aprender isso, o próximo é bem mais fácil!
*********************************************一条华丽的哈哈哈哈哈哈哈哈***************************************************

2.4 Combate real: mudança de skins

Efeito de realização: clique no pequeno quadro representado por qual cor, e a fada das roupas que vestir vai aparecer
Insira a descrição da imagem aqui
(hahahaha adoro ver essas coisas lindas hahahaha)

Você pode baixar algumas imagens ou imagens em gradiente de cor para o fundo, colocá-las no img e nomeá-las você mesmo. O formato básico é o seguinte: o
Insira a descrição da imagem aqui
código acima:

Skinning.html da página da web

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/css2.css" id="btnlink"/>
	</head>
	<body>
		
		<div id="box1">
			<span id="s1" onclick="a1();">志玲</span><span id="s2" onclick="a2();">依林</span><span id="s3" onclick="a3();">昆凌</span>
			
			
		</div>
		
		<script type="text/javascript">
			function a1()
			{
     
     
				document.getElementById("btnlink").href="css/css1.css";
			}
			
			function a2()
			{
     
     
				document.getElementById("btnlink").href="css/css2.css";
			}
			
			function a3()
			{
     
     
				document.getElementById("btnlink").href="css/css3.css";
			}
			
			
			
		</script>
		
	</body>
</html>

css1.css

*{
	margin: 0;
	padding: 0;
}


html,body{
	width:100%;
	height: 100%;
}

body{
	background-image: url(../img/blue.jpg);
	background-repeat: repeat-x;  /* 设置不重复平铺 */
}

#box1{
	width: 186px;
	height: 60px;
	background-color: white;
	margin: 0 auto;
	position: relative;
}
#s1{
	width: 60px;
	height: 60px;
	background-color: blue;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;  /* 子绝父相 */
	left: 0;
	top: 0;
}
#s2{
	width: 60px;
	height: 60px;
	background-color:green;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	left: 62px;
	top: 0;
}
#s3{
	width: 60px;
	height: 60px;
	background-color: pink;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
}

css2.css

*{
	margin: 0;
	padding: 0;
}


html,body{
	width:100%;
	height: 100%;
}

body{
	background-image: url(../img/green.jpg)
}

#box1{
	width: 186px;
	height: 60px;
	background-color: white;
	margin: 0 auto;
	position: relative;
}
#s1{
	width: 60px;
	height: 60px;
	background-color: blue;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;  /* 子绝父相 */
	left: 0;
	top: 0;
}
#s2{
	width: 60px;
	height: 60px;
	background-color:green;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	left: 62px;
	top: 0;
}
#s3{
	width: 60px;
	height: 60px;
	background-color: pink;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
}

css3.css

*{
	margin: 0;
	padding: 0;
}


html,body{
	width:100%;
	height: 100%;
}

body{
	background-image: url(../img/pink.jpg)
}

#box1{
	width: 186px;
	height: 60px;
	background-color: white;
	margin: 0 auto;
	position: relative;
}
#s1{
	width: 60px;
	height: 60px;
	background-color: blue;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;  /* 子绝父相 */
	left: 0;
	top: 0;
}
#s2{
	width: 60px;
	height: 60px;
	background-color:green;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	left: 62px;
	top: 0;
}
#s3{
	width: 60px;
	height: 60px;
	background-color: pink;
	display: inline-block;
	margin: 1px;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
}

Algumas coisas muito básicas são demais para escrever e muitas não são usadas com frequência. Quando precisamos, o Google e o Baidu farão.
Devido a limitações de tempo, estou aqui por enquanto (eu bati na essência da palestra do professor). Se houver algum suplemento mais tarde, irei atualizá-lo a tempo.
Bem-vindo ao
https://blog.csdn.net/hanhanwanghaha,
um super invencível fofo As pessoas anseiam
por aprender juntas.

Um artigo leva você a começar rapidamente com JavaScript (código prático)