Javascript study notes (variables, operators, loop)

Javascript Introduction

  • One kind of literal JavaScript scripting language, is a dynamically typed, weakly typed, prototype-based language, built-in support types. It is known as JavaScript interpreter engine, as part of the browser, widely used in client-side scripting language that was first used on HTML (an application under the Standard Generalized Markup Language) pages, HTML pages used to increase the dynamic function .

  • JavaScript is integrated into the browser which, as long as the browser installed, JavaScript there.

  • JavaScript is an object-oriented programming language. You can put any page elements are seen as an "object."

Javascript role

  • Complete dynamic HTML effects of

  • Interactive features (multi-level menus, scrolling text)

     网页的基本组成
     HTML:超文本标注语言,主要用来控制内容的结构的。
    
     CSS:层叠样式表,主要用来控制HTML标签的格式的。
    
     JavaScript:客户端的脚本程序,主要用来控制HTML标签的行为的。
    

Javascript code is embedded into the HTML code to the

<script type="text/javascript">
/*
	Javascript代码部分
*/
</script>

Javascript common input and output

1、Javascript中的注释
	HTML的注释:<!—注释内容-->
	CSS注释:/*  注释内容 */
	JS的单行注释://
	JS的多行注释:/*  多行注释 */
	
2、document.write('需要输出的内容')           /*输出到网页上*/

3、window.alert('需要输出的内容')               /*弹框输出*/

4、window.prompt(参数1,参数2)                   
	
	/*
	弹出一个框输入内容
	参数1是提示信息,参数2是输入框中的默认信息
	*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html-js-1</title>
		
		<script type="text/javascript">
			// 输入到网页界面
			document.write('<h1>如果努力有用的话,还要天才干什么?</h1>')
			
			// 弹出警告框(推荐使用第二种)
			alert('如果努力有用的话,还要天才干什么?')
			window.alert('如果努力有用的话,还要天才干什么?')
			
			//js中的数据变量(基本数据类型;var是系统关键字)
			var a = '你好,我是9527';
			document.write('<h2>'+a+'</h2>')
		</script>
		
	</head>
	<body>
	</body>
</html>

Javascript variable

变量的概念和其他语言中的大同小异,只不过Javascript中的变量声明使用的是关键字 var声明;

它实在内存中存在和运行的;

使用之前必须声明;
	var name;
	name = 'Mali';
	var name = 'Mali';
	
其命名规则和python/Java中的差不多:

	变量名只能包含a-z、A-Z、0-9、_符号
	变量名只能以字母或下划线开头
	变量名不能以数字开头
	变量名是区分大小写
	变量名不能是系统关键字
	多个单词的变量名(驼峰式/下划线)

变量中存储的都是各种各样的数据,数据是有类型的:

	基本数据类型:字符型、数值型、布尔型、未定义型、空型(null);
	复合数据类型:数组型、对象型、函数型。
	数值型有一个特殊的类型NaN(它不是一个数值)
	
		当其它数据类型转成数值型,转不过去,此时将返回NaN的值。
		NaN和谁都不相等,和它自己也不相等
	
	未定义类型
		当一个变量定义了,但未赋值,此时,该变量的类型是未定义型
		未定义型,只有一个值,就是undefined
	
	空型null(null代表一个空对象,或者是对象的一个占位符)
	
变量本身没有类型,是变量的值或数据有类型。
	
变量之间的运算,必须是同类型的;如果类型不同,要转成同类型,才能进行运算

Operators in Javascript

算术运算符:+、-、\*、/、%、++、--

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

逻辑运算符:&&、||、!
	逻辑运处算符的运算结果,一定是一个布尔值
	
字符串连接符:+

+的两种用法

	如果进行操作的是两个数字,则执行加法操作;
	如果其中一个是字符串,则执行的是拼接操作;

+=的两种用法:先加后赋值,其中的+和上述的用法一样
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html-js-1</title>
		
		<script type="text/javascript">
			
			//变量初始化
			var name = "Fake人";
			var sex  = "男";
			var age  = 18;
			var salary = 88888;
			var state  = "韩国";
			
			//使用字符串的拼接输出的结果
			var message = "";
			message += "<h2>" + name + "的基本信息"+"</h2>";
			message += "姓名:" + name;
			message += "<br />性别:" + sex;
			message += "<br />年龄:" + age;
			message += "<br />工资"  + salary;
			message += "<br />国籍"  + state;
			
			//将拼接好的信息打印到网页
			document.write(message)
		</script>
		
	</head>
	<body>
	</body>
</html>

Analyzing the condition Javascript (and other languages ​​similar, directly look at the code)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html-js-1</title>
		
		<script type="text/javascript">
			//页面中的输入框
			//输入一个年份判断今年是不是闰年
			var year = window.prompt('输入一个合法年份:')
			if (year % 4 == 0 && year % 100 != 0){
				window.alert('闰年')
			}else if (year % 400 == 0){
				window.alert('闰年')
			}else{
				window.alert('平年')
			}
		</script>
		
	</head>
	<body>
	</body>
</html>

Special operators in Javascript

1、new运算符和Java中的new效果类似,都是创建一个对象实例;
	var today = new Data();     //Data()是一个系统函数表示时间日期对象

2、delete运算符
	删除对象的属性或数组中的元素
	
3、typeof运算符
	判断一个变量的数据类型
	返回值(返回一个数据类型或者对象类型):
	
	"string","number","boolean","undefined","object","function"
	 
	 null、array、object

The branching and looping Javascript

switch分支语句(和Java中switch用法一样)
	switch(条件判断,是一个变量的不同取值){
		case 值1:
 			 代码1;
 			 break;
		case 值2:
 			 代码2;
  			break;
		default:
		如果以上条件都不满足,则默认执行的代码
}

while循环
	循环三要素:出是变量;循环条件;变量更新

for 循环

Roughly Usage Usage and most programming languages, do not explain, direct look at the code

Use of recycled printing and stitching 9 * 9 multiplication table

<!-- 实现9*9乘法表 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>9*9乘法表</title>
		<script type="text/javascript">
			var str = " ";
			str += "<table width='800px' rules='all' align='center' border='1'>" ;
			str += "<tr>";
			for(var i=1;i<=9;i++){
				for(var j=1;j<=i;j++){
				str += "<td>&nbsp;"+j+"&times;"+i+"="+j*i+"</td>";
				}
			str += "</tr>";
			}
			str += "</table>";
			document.write(str);
		</script>
	</head>
	<body>
	</body>
</html>

Javascript array of

创建方式
	直接创建 var arr_list = [0,1,2,3,4,5]
	使用new关键字和Array()来创建数组 var arr_list = new Array();             //创建一个空的数组
	
数组索引
	按照数组的下标索引,和python一样从0开始

数组的访问
	arr_list[1]        //数组名称[索引值]

数组对象属性 length (获得数组的长度)
数组的其他增删改查就不多做说明
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>匿名函数</title>
		<script type="text/javascript">
			// 匿名函数的使用定义
			var funt = function() {
			  document.write("该函数是匿名函数....");
			}
			funt();
			// 二维数组的定义使用:两种方法定义二维数组
			var arr_list1 = [
				[1,2,3,4],
				[10,20,3,0],
				[50]
			]
			var arr_list2 = new Array;
			arr_list2[0] = "Mali";
			arr_list2[1] = "M";
			document.write('<br /><br />第一个:'+arr_list1[1][2]+'&nbsp;第二个:'+arr_list2[1]);
			
			// 二维数组求平均值
			//length只能一层一层的统计个数,
			//它不能一起统计所有层数组的个数
			var arr_list3 = [
						  [3,14,99,83,38],
						  [20,21],
						  [30,31,43,32],
						  [40,41,18],
						  [66,88]
					  ];
			var sum = 0;
			var len = 0;
			//循环最外层数组的值,即行数
			for(var i=0;i<arr_list3.length;i++)
			{
				//循环数组的列(二维数组)
				for(var j=0;j<arr_list3[i].length;j++)
				{
					sum += arr_list3[i][j];
					len++;
				}
			}
			document.write("<br /><br />二维数组平均值:"+(sum/len).toFixed(2));
			
		</script>
	</head>
	<body>
	</body>
</html>

Published 63 original articles · won praise 1 · views 2039

Guess you like

Origin blog.csdn.net/qq_45061361/article/details/104362854