前端开发之基础篇（四）JavaScript动态脚本语言：if elseif else语句+switch语句+while循环+for循环+视频教程...

JavaScript条件语句

if 语句

只有当指定条件为 true 时，该语句才会执行代码。

语法：

if (condition) {
当条件为 true 时执行的代码
}

实例：demo01

if...else 语句

语法：

if (condition) {
当条件为 true 时执行的代码
}
else{
当条件不为 true 时执行的代码
}

实例：demo02

if...else if...else 语句

语法

if (condition1) {
    当条件 1 为 true 时执行的代码
}
else if (condition2) {
    当条件 2 为 true 时执行的代码
}
else{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

实例：demo03

JavaScript switch 语句

使用 switch 语句来选择要执行的多个代码块之一。

语法：

Var n=1;
switch(n) {
case 1: //如果n=1，则执行这里的代码
		alert(‘n=1’); //弹窗提示
break; //执行到这里就停止，不再执行下面的代码
case 2: //如果n=2，则执行这里的代码
alert(‘n=2’); //弹窗提示
break; //执行到这里就停止，不再执行下面的代码
default: //如果n不等于1也不等于2，则执行这里的代码
}

实例：demo04

JavaScript获取和设置HTML元素

1. 通过ID属性获取HTML元素，只能获取第一个 document.getElementById('name')

2. 通过CLASS属性获取HTML元素，可以获取多个，用item(n)来获取第n个 document.getElementsByClassName('text').item(0)

3. 通过标签名获取HTML元素，可以获取多个，用item(n)来获取第n个 document.getElementsByTagName('button').item(0)

4. 使用“.value”来设置或者获取HTML输入框元素的值 Var val = document.getElementById('name').value; document.getElementById('name').value = "JavaScript修改的内容";

5. 使用“.innerHTML”来设置或者获取HTML双边元素内部的所有子元素和文字 Var val = document.getElementsByClassName('text').item(0).innerHTML; document.getElementsByClassName('text').item(0).innerHTML = "

   你好

   ";

6. 使用“.innerText”来设置或者获取HTML双边元素内部的所有文字 Var val = document.getElementsByTagName('button').item(0).innerText; document.getElementsByTagName('button').item(0).innerText = '搜索';

实例demo05

	
		
		
	
	
		

			HTML的文字内容
		
		
		按钮
	
	

JavaScript常用事件

1. 文档加载事件 window.onload = function(){ /里面谢代码/ }

2. 元素点击事件 document.getElementById('name').onclick = function(){ /里面写代码/ }

3. 表单输入元素获取焦点时的事件 document.getElementById('name').onfocus = function(){ /里面写代码/ }

4. 表单输入元素失去焦点时的事件 document.getElementById('name').onblur = function(){ /里面写代码/ }

案例：登录

实例：demo06 + HTML

	
		
		
		
		
	

	
		

			

				
用户登录
				
				
				登录
			
		
	

实例：demo06 + CSS

body {
	background: -webkit-linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);
	background: -moz-linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);
	background: -o-linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);
	background: linear-gradient(left, red, orange, yellow, green, indigo, violet, blue);
}

#content {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 400px;
	height: 200px;
	border-radius: 10px;
	padding: 50px;
	background-color: rgba(0, 0, 0, 0.4);
}

#content:hover {
	background-color: rgba(0, 0, 0, 0.7);
}

form {
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

#title {
	width: 360px;
	font-size: 22px;
	text-align: center;
	margin-bottom: 20px;
	color: white;
	font-weight: bold;
}

input {
	position: relative;
	display: block;
	width: 360px;
	height: 40px;
	margin: auto;
	border-radius: 5px;
	font-size: 18px;
	outline: 0;
	border: 0;
}

input:not([type=button]) {
	width: 300px;
	margin-bottom: 20px;
	padding: 0 30px;
}
input[type=text]:focus{
	font-size: 20px;
}
button[type=button]{
	width: 360px;
	height: 40px;
	margin: auto;
	border-radius: 5px;
	font-size: 18px;
	outline: 0;
	border: 0;
	background-color: rgba(0,200,200,0.6);
	color: white;
}
button[type=button]:hover{
	background-color: rgba(0,200,200,0.8);
	color: white;
}
button[type=button]:active{
	background-color: rgba(20,200,200,0.4);
	color: white;
}

实例：demo06 + JS

function nameBlur(){
	//用户名输入框失去焦点时的事件
	document.getElementById('name').onblur = function(){
		var name = document.getElementById('name').value;
		if (!name) {
			document.getElementById('name').style.backgroundColor = 'rgba(255,100,100,0.8)';
		}
	}
}
function nameFocus(){
	//用户名输入框获得焦点时的事件
	document.getElementById('name').onfocus = function(){
		this.style.backgroundColor = 'white';
	}
}

function pswdBlur(){
	//密码输入框失去焦点时的事件
	document.getElementById('pswd').onblur = function(){
		var pswd = document.getElementById('pswd').value;
		if (!pswd) {
			document.getElementById('pswd').style.backgroundColor = 'rgba(255,100,100,0.8)';
		}
	}
}
function pswdFocus(){
	//密码输入框获得焦点时的事件
	document.getElementById('pswd').onfocus = function(){
		this.style.backgroundColor = 'white';
	}
}

JavaScript循环语句

JavaScript while 循环

先判断条件，只要指定条件为 true，循环就可以一直执行代码块。

语法：

while (条件) {
需要执行的代码
}
实例：demo07


	
		
		
	
	
		

	
	

JavaScript do/while 循环

do/while 循环是 while 循环的变体。 先执行一次代码，然后判断条件，如果条件为真的话，就会重复这个循环。

语法：

do{
需要执行的代码
}while (条件);
实例：demo08


	
		
		
	
	
		

	
	

JavaScript for 循环

常用于已知循环次数的情况。

语法：

for (语句 1; 语句 2; 语句 3) {
    被执行的代码块
}

• 语句 1:在循环开始执行之前做的操作
• 语句 2:（循环的条件）判断循环条件是否满足，true：执行循环；flase：不执行
• 语句 3:每次循环结束后，下雨次循环开始前，执行的操作

实例：demo09

JavaScript Break 和 Continue 语句

break 语句用于跳出整个循环。

continue 用于跳过循环中的某一次。

实例：demo10

实例：demo11

视频课程

配套教学视频： HTML5+CSS3+JS教程精细化前端WEB开发实战视频教学2019课件源码

全套前端企业开发教学视频： WEB大前端教程视频教学小程序+VUE+AJAX+HTML5+canvas+node.js+Angular系列完整视频教学

转载于:https://my.oschina.net/u/3586285/blog/3073128