初识javaScript(慕课网学习笔记)

js输出

  • window.alert() 警告框
  • document.write() 写到HTML文档中
  • innerHTML 写到HTML元素
  • console.log() 写到浏览器的控制台
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js输出</title>
</head>
<body>
	<p id="one"></p>
	<script type="text/javascript">
		/**
		 1. window.alert()  警告框
		 2. document.write()  写到HTML文档中
		 3. innerHTML  写到HTML元素
		 4. console.log()  写到浏览器的控制台
		**/
		// 弹出一个警告框 window可以省略
		window.alert("helloword");
		// 写到网页中
		document.write('helloword');
		// 写到元素之中,这里例子是写到p中
		document.getElementById('one').innerHTML = 'iiiiii';
		// 输出到f12->console
		console.log('123');
	</script>
</body>
</html>

js语句与注释

  • 分号
  • javaScript 代码
  • javaScript 语句标识符
  • 代码块
  • 单行和多行注释
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js语句与注释</title>
</head>
<body>
	<script type="text/javascript">
		/**
		 - 分号
		 - javaScript  代码
		 - javaScript  语句标识符 var if for
		 - 代码块
		 - 单行和多行注释
		**/
		var a=1
		// 代码块
		function b(){
			var c=1;
			var d=2;
		}
		//单行注释
		/*
		多行注释
		*/
	</script>
</body>
</html>

js数据类型

  • 字符串(String)
  • 数字(Number)
  • 布尔(Boolean)
  • 数组(Array)
  • 对象(Object)
  • 空(Null)
  • 未定义(Undefined)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js数据类型</title>
</head>
<body>
	<script type="text/javascript">
		/**
		 * 字符串 (String)
		 * 数字 (Number)
		 * 布尔 (Boolean)
		 * 数组 (Array)
		 * 对象 (Object)
		 * 空 (Null)
		 * 未定义 (Undefined)
		 */
		

		// var可以声明各种类型
		var x;               // x 为 undefined
		var y = 5;           // y 为数字
		var z = "John";      // z 为字符串

		// 字符串
		var carname="Volvo XC60";
		var carname='Volvo XC60';

		// 数字
		var x1=34.00;      //使用小数点来写
		var x2=34;         //不使用小数点来写

		// 布尔
		var x=true;
		var y=false;

		// 数组
		var cars=new Array();
		cars[0]="hello";
		cars[1]="word";

		var cars=new Array("Saab","Volvo","BMW");

		var cars=["Saab","Volvo","BMW"];

		// JavaScript 对象   键值对
		var person={
			firstname:"hello", 
			lastname:"word", 
			id:5566
		};
		// 相应的取值方式
		console.log(person.firstname)
		console.log(person["firstname"])

		// Undefined 和 Null
		// Undefined 这个值表示变量不含有值。
		// 可以通过将变量的值设置为 null 来清空变量
		var persons;
		var car="Volvo";
		car=null
	</script>
</body>
</html>

js变量

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)

js函数

  • 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
  • function a( 参数 ){} 声明会前置
  • var a = function( 参数 ){} 匿名函数
  • 函数中的 return
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js函数</title>
</head>
<body>
	<script type="text/javascript">

		/**
		 *  函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
			function  a( 参数 ){}   声明会前置
			var  a  =  function( 参数 ){}  匿名函数
			函数中的 return
		 */
		
		function a(){
			//输出到控制台
			console.log(1111);
			console.log(2222);
			console.log(3333);
			console.log(4444);
			console.log(5555);
			console.log(6666);
		}
		//重复使用
		a();
		a();
		a();
		a();

		b('hello', 'world');
		//函数声明会被自动前置,即上面调用b函数是可以的
		function b(cs1, cs2){
			console.log(cs1, cs2);
		}
		//匿名函数
		var c = function(cs1, cs2, cs3){
			console.log(cs1, cs2, cs3);
		}

		c(1,2,3);
		//return 返回相应的值
		function d(){
			return "this is return function";
		}

		var d1 = d();
		console.log('this is a d1: ',  d1);
	</script>
</body>
</html>

运算符

  • 赋值运算符 = += -= 等
  • 算术运算符 + - * / 等
  • 字符串的 + 运算符
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js运算符</title>
</head>
<body>
	<script type="text/javascript">
		/**
		 *  赋值运算符  =   +=   -= 等
			算术运算符  +  -   *   / 等
			字符串的 + 运算符 
		 *
		 *
		 * 
		 */

		var a = 1;  //赋值
		a += 3;   // a = a + 3;
		console.log(a);   //4

		var b = 2; 
		b = b * 3; 
		console.log(b); //6


		var c = 'hello';
		var d = 'world';
		var e = c + d;
		console.log(e);  //helloword
	</script>
</body>
</html>

js比较与逻辑运算符

  • < 小于
  • > 大于
  • **== 等于 1 == ‘1’ **
  • === 绝对等于(值和类型均相等)
  • != 不等于
  • && and
  • || or
    注意5=='5’返回值为True,5==='5’返回值为false

条件语句及switch语句(和java一样不讲)

if、else、switch、case、break、default

js中for循环与while循环

  • for 循环代码块一定的次数
  • for/in循环遍历对象
  • while指定条件为true时循环指定的代码块
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js中for循环与while循环</title>
</head>
<body>
	<script type="text/javascript">
		/**
		 *
		 *  for - 循环代码块一定的次数
			for/in - 循环遍历对象
			while - 当指定的条件为 true 时循环指定的代码块
		 */
		
		for( var i = 0; i < 10 ; i++ ){
			console.log('i:'+ i);
		}

		var person = {
			name : 'json',
			age : 25,
			sg: 170
		}

		for( key in person ){
			console.log(person[key])
		}

		var count = 1;
		while( count < 10 ){
			count++ ;
			console.log('执行while循环');
		}
	</script>
</body>
</html>

js中break和continue语句

  • break语句可以跳出循环
  • continue语句跳出本次循环,继续执行

猜你喜欢

转载自blog.csdn.net/qq_38723677/article/details/83472402