前端（java script学习）

本文主要是介绍前端（java script学习），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

一、初始Java Script

二、Java Script 的组成

1. Java Script格式

2.方法

3.变量

4.运算符

5.流程控制语句

总结

前言

初步学习JavaScript，以下是关于自己的笔记的整理。

一、初始Java Script

Java Script 是脚本编程语言，简称JS。用于网页交互效果。

1.语言核心：变量，表达式，运算符，函数，if语句等。
        2.DOM，控制html中的元素，比如盒子的移动，变色，轮播图。
        3.BOM，控制浏览器的一些东西，比如浏览器自动滚动。
        js是前台语言而不是后台语言
        后台语言：是运行在服务器上的，比如php，asp，python，perl，scale，这些语言能操作数据库，能够对数据库进行“增删改查”的操作。
        用户访问一个网址，这些服务器上面的文件，传输到用户的电脑里面。
        js运行在客户的电脑里面，而不是服务器上，所以我们叫做“前台语言”。

二、Java Script 的组成

1. Java Script格式

JavaScript 是先引入再使用。

 <!-- 外部 -->
<script type="text/javascript" 
    src="../Demo211222/js/one.js">
</script>

 <!-- 内部 -->		
<script type="text/javascript"> 			
</script>

2.方法

方法 = 定义 + 调用

方法定义：function 方法名() { }

方法调用：方法名（）

alert = js 内置的方法 = 信息提示框

alert( 变量名);

alert(typeof 变量名)

<!-- js方法定义 function  方法名() {} -->
<!-- js方法调用 = 方法名() -->

<script type="text/javascript"> 
		function test () {
		alert(23); // alert = js 内置的方法 = 信息提示框
		}
</script> 
	<body>
    <!--    属性（type）    -->
	<!--	属性名 = 属性值    -->

	<!--    事件绑定（onclick）    -->
	<!--    on 事件 = js 代码    -->
		
	<!--    js使用（引入） 外部 内部  内联  （js先引入再使用）    -->
	<!--    cas使用（引入）外部 内部  内联    -->
    <!-- 简化格式 -->
	<button name="A" onclick="test()">小A</button> 
	<button name="C" onclick="alert(33)">小C</button>
	<!-- 标准格式 -->
	<a href="javascript:alert(33)">asas</a>

    <!-- 只能使用标准格式 -->
	<button name="B" onclick="javascript:test()">小B</button>
	
	<button name="B" onclick="javascript:alert(b1)">小B1</button>
	<button name="B" onclick="javascript:alert(b2)">小B2</button>
	<button name="B" onclick="javascript:alert(b3)">小B3</button>
	<button name="B" onclick="javascript:alert(b4)">小B4</button>
</body>

重点（切记） ***方法调用了才会去执行***

 function 定义函数 = 可以视为变量 = 方法的名称就是变量名

 function fun1(){ // 方法定义
	 alert(123)   // 阻塞   先确定再控制台输出
	 console.log(123) // 类似java sysout   先控制台输出 再确定
 }

 var fun2 = function(){ // 方法定义（方法的名称就是变量名）
	 
 }
 
 // ****方法调用了 才会去执行***
 // 方法调用
 fun1(); // 先调用82行（alert(123)） 才会执行
 fun2();

方法的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test1(){// 闭包  方法中定义方法
					var a =0 ;
				function test2(){// 当做变量来用
					a++;
					console.log(a);
				}
				return test2;
				// var test2 =function(){// 局部方法 与上面等价	
			}
			function test3(){
				var s1 = test1(); // s1 就是test2 方法
				console.log(s1)// s1 就是test2 方法
				console.log(typeof s1) // 获取类型为 s1类型
				s1();//  方法调用 输出 a=1
				var s2 = s1();
				console.log(s2) // s2 未初始化（赋值） 输出 undefined  未定义
				s1(); // 方法再次调用  a=2
			}
			function test(a,b){
				alert(a);
				alert(b);
			}

		</script>
	</head>
	<body>
		<button onclick=" test4(1,2)">b1</button>
		<button onclick=" test4('a','b')">b2</button>
		<button onclick=" test4('',null)">b3</button>
		
		<button onclick=" test4('ttt')">b4</button>  
		<!-- 赋值数量大于定义数量时，多出的没有。 -->
		<!-- 赋值数量小于定义数量时，多出的显示undefined 未定义。 -->
		
	</body>
</html>

3.变量

变量：定义 + 使用

变量命名规则 =标识符（跟标识符一样） var 变量名 = 变量值;

定义对象：标准格式：var 对象名 = new Object( { } ); // 大括号可省略

简化格式： var 对象名 = { };

// 变量 = 定义 + 使用
// 方法 = 定义 + 调用

// 命名规则 = 标识符

// 变量定义
// 关键字
var w1; // 切记：undefined = 未初始化（未赋值）   以后可能经常碰到
var w2=null;
var w3=NaN
alert(typeof w1);
alert(typeof w2);
alert(typeof w3);
// 强变量类型 java  int a
// 若变量类型 js    不知道变量类型

// 字符串
var s1 ="AAA";
var s2 ="BBB";
var s3 = new String("CCC");
alert(typeof s1)
var s4 ='dd"d"dd';
var s5 ="eee'e'e";
var s6 ="eee\"e";

// 数字 number
var n1 = 12;
var n2 = 1.2;
var n3 = new Number(12);
var n4 = '12';

// 布尔 Boolean
var b1 = false; // js中表示假的值有七个(之后会提到)
var b2 = true;
var b3 = new Boolean(false);
var b4 = new Boolean(0);
// alert(typeof n1)
// alert(typeof n2)
// alert(typeof n3)
// alert(typeof n4)

// 数组[]
var array1 =[1,2,3];
array1[0]=5;
alert(array1[0]);
var array2 = new Array (1,2,3,4);
var array3 = new Array ();
array3[0] = 1;
array3[1] = 2;
array3.push(3);
var array4 = ['a','b','c' ];
 
 
 // 对象 Object  属性名:属性值,   字符串类型加""  数字类型不加
 var person1 = {// 定义对象 简化
	 name :"张三", // 属性    属性之间用 ,(逗号) 分割
	 age : 20,
	 sex : "男"
 }
 person1.name = '李四'// 对象赋值
 // alert(person1.name) // 对象的使用 简化
 // alert(person1) // 默认弹出对象
 // alert(typeof person1);
 
 var person2 = new Object({ // 定义对象  // 标准格式
 	 name : "张三", // 属性    属性之间用 ,(逗号) 分割
 	 age : 20,
 	 sex : "男"
 });
 var person3 = new Object();// 定义对象
 person3.id = "A101";
 person3.name = "王五"；// 添加属性
 // al ert(person3.id)
 
 // function 定义函数 = 可以视为变量 = 方法的名称就是变量名
 // 方法定义
 function fun1(){ // 方法定义
	 alert(123)   // 阻塞   先确定再控制台输出
	 console.log(123) // 类似java sysout   先控制台输出 再确定
 }
 var fun2 = function(){ // 方法定义（方法的名称就是变量名）
	 
 }
 
 // ****方法调用了 才会去执行***
 // 方法调用
 fun1(); // 先调用82行 alert(123)  才会执行
 fun2();
 
 var now = new Date();
 alert(now); // 系统当前时间 
 alert(typeof now) // obje类型
 
 var r1 = /\ d+/  // 正则表达式
 var r2 = new RegExp("\\d+");// 标准格式
 alert(typeof r1) // obje类型 
 console.log(r1.test("1213"))
 
 var e1 = new Error("asas");
 console.log(e1.me;
 
 // *** 复合类型基本上都是obje类型 ***

变量（对象）的使用（主要针对于数组）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var obj1={
				name:"张三",
				age:20,
				say:function(a){
					return "b";
				}
			}	
			// 数组遍历
				for(a in obj1 ){// 对对象 for in 得到属性名
					console.log(a+"--") // 属性左边 name-- age-- 
					console.log(a+"--" +obj1[a]) // 属性语句 name--张三  age--20
				}
				var array = [9,8,7,6];
				for(a in obj1 ){// 对数组 for in 得到数组下标 和数据
					console.log(a+"--" +obj1[a]) 
				}
				var array ={
					"0":9,
					"1":8,
					"2":7,
					"3":6,
				}
			
			function test3(){
				var array = [9,8,7,6];
				// callback = 回调函数
			
				var fun1() = function(a,b,c){	
				}
				array.forEach(fun1) //
			// 等价于
				array.forEach(function(value,index,arr){
					console.log(value+"--"+index+"--"+arr+"--")
				})
			}
			// 数组求和
			function test4(){
				var array = [2,3,4,5];
				var sum = 0;
				array.forEach(function(value,index,arr){
					console.log(value+"--"+index+"--"+arr+"--");
					sum += value;
				})
				console.log(sum);
			}
				
				

			function test(){
				var age = obj1.age;
				obj1.age =21;
				obj1.name ="王五";
				obj1.say("aaa");
				obj1.id =101;
				obj1.tell =function(){}
			}
			
			function test1(){
				var person ={
					"first name" : "aaa" ,// 标准 属性名 有空格用 引号 加 冒号
					"say hello" :function(){
						alert(123);
					}
				}
				person["first name"]="bbb"; //属性名或方法名 存在特殊符号 必须用标准调用对象格式
				person["say hello"]();
				
				person.id=1001;
				alert(person.id) //输出1001
				delete person.id; //删除属性名 
				alert(person.id) // 输出undefined 未定义的
			}
			
		</script>
	</head>
	<body>
	
	</body>
</html>

4.运算符

算数运算符 + 、- * / %

赋值运算符 += -= /= %=

比较运算符 > >= < <= == !=

逻辑运算符 & | && || ! 也存在短路现象

// 运算符
// 算数运算符 + - * % 

var a1 = 1,a2 = 2;
var a3 = a1 + a2;
// console.log(a3);
var a4 = ++a1;

// 赋值 += -= *= %=
var b1 = 1,b2 = 2;
b2 +=b1;

// 比较  > < >= <= == !=
var d1 = 5, d2 = '5';
var d3 = d1 != d2;
var d4 = d1 === d2; //全等 = 类型与值都相等
var d5 = d1 == d2; 
// console.log(d4)
// console.log(d5)

// 逻辑 && ||  !   与或非
var f1 =false, f2 =true;
var k1 = 1,k2 = 2, k3 =3;
 // console.log(k1 < k2 || ++k3 > 5) // 存在短路现象
 // console.log(k3)
 
 // 条件运算符
var e1 = 10;
var e2 = e1>5 ? 7:9;

var g1 = 'b';
var g2 = 2 ;
var g3 = g1 + g2 // 字符串拼接

5.流程控制语句

一、if语句：

1.if语句：如果满足条件语句，则执行执行语句；

if(条件语句){
　　　　执行语句；
　　　　　....；
　　　}

2.if....else语句：如果满足判断语句，则执行执行语句1，否则执行执行语句2；

if(判断语句{
　　　执行语句1；
　　　　.....;
　　}else{
　　执行语句2；
　　......;
　　}

3.if....else if....else语句：对多个条件进行判断，进行多种不同的处理；

if(判断条件1){
　　　　执行语句1
　　}else if(判断条件2){
　　　　执行语句2
　　}
　　　　....
　　else if(判断条件n){
　　　　执行语句n
　　}else {
　　　　执行语句n+1
　　}

二、while语句：反复进行循环条件的判断，若成立则执行执行语句，直至条件不成立，循环结束。

while(循环条件){
　　执行语句
　　.......
}

三、do....while语句：先执行执行语句一次，再根据循环条件判断是否继续执行；

do{
　　执行语句；
　　.....;
}while(循环条件)；

四、for循环:先执行初始化表达式，再根据循环条件，若不成立则退出循环；若成立则执行执行语句，继而再执行操作表达式，再进行循环条件的判断。

for(初始化表达式；循环条件；操作表达式){
　　执行语句;
　　......;
}

五、三元运算：进行判断条件的判断，若成立则执行表达式1，若不成立则执行表达式2.

判断条件？表达式1：表达式2

六、选择结构switch语句：将表达式的值与目标值比较，满足则执行相应的执行语句；没有匹配的执行default后的语句；

switch (表达式){
    case 目标值1:
        执行语句1
        break;
    case 目标值2:
        执行语句2
        break;
    ．．．．．．
    case 目标值n:
        执行语句n
        break;
    default:
        执行语句n+1
        break;
}

七、跳转语句：

1.continue:

continue语句用在循环语句中，作用是终止本次循环，执行下次循环。

public class ContinueDemo {
    public static void main(String[] args) {
        int sum = 0; // 定义变量sum，用于记住和
        for (int i = 1; i <= 100; i++) {
            if (i % 2 == 0) { // i是一个偶数，不累加
                continue; // 结束本次循环
            }
            sum += i; // 实现sum和i的累加
        }
        System.out.println("sum = " + sum);
    }
}
 
 
输出：
 
sum = 2500

2.break:

public class BreakDemo02 {
    public static void main(String[] args) {
        int i, j; // 定义两个循环变量
        aaa: for (i = 1; i <= 9; i++) { // 外层循环 标记aaa
            for (j = 1; j <= i; j++) { // 内层循环
                if (i > 4) { // 判断i的值是否大于4
                    break aaa; // 跳出外层循环
                }
                System.out.print("*"); // 打印*
            }
            System.out.print("\n"); // 换行
        }
    }
}

出现在循环语句中，作用是跳出循环语句，执行后面的代码；若出现在嵌套循环中的内层循环时，只能跳出内层循环，如果想跳出外层循环需要对外层循环添加标记。

八、循环嵌套：

嵌套循环是指在一个循环语句的循环体中再定义一个循环语句的语法结构。

while、do....while、for都可以进行嵌套。

流程控制语句应用

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		// 顺序
		// console.log(777) 全局变量 网页一打开就执行
		function test1(){
			console.log(111)
			console.log(222)
			test2();
			console.log(333)	
		}
		function test2(){
			console.log(444)
			console.log(555)
			console.log(666)
		}
		// 分支
		// if 判断
		function test11(){
			var t = 1;
			 if(t == 1 ){
				 alert("1111");
				 // 一条语句 js中 ; 可以写也可以不写 自动识别
			 }else if(t == 2){
				 
			 }else if(t == 3){
				 
			 }
		}
		// switch 判断
		function test12(){
			var t = 5;
			switch(t){
				case:1
					break;
				case:2
					break;
				default:
					break:
			}
		}
		
		// 循环(for)
		function test21(){
			for(var i=1;i<=10;i++){
				if(i==3)continue;
				if(i==6)break;
				console.log(i);
			}
		}
		function test22(){
			var array = [1,2,3,5,6,7]
			for(var i=0;i<array.length;i++){
				console.log(array[i])
			}
		}
		function test31(){
			var t=1;
			if(t){
				console.log(t)
			}
			// 0 -0 '' false null undefined NaN  js中只有这七个假值 ，剩余全为真
			console.log(123)
		}
		
		function test32(){
			var array = [1,2,3,5,6,7]
			for(var i=0;i=array.length-1;i--){
				console.log(array[i])
			}
		}
		function test41(){
			var t =new Boolean(false);
			console.log(t)
			console.log(typeof t)
			if(t)
				console.log(111)
			var t1 = t.valueOf();// 封装
			console.log(t1)
			console.log(typeof t1)
			if(t1)
				console.log(222)
		}
		

		</script>
	</head>
	<body>
		<button onclick="test22()">ggggg</button>
	</body>
</html>

三、总结

相比java来说，更容易上手。明天学习DOM 流，加油！！！

这篇关于前端（java script学习）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

前端（java script学习）

前言

一、初始Java Script

二、Java Script 的组成

1. Java Script格式

2.方法

3.变量

4.运算符

5.流程控制语句

三、总结

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯