• Javascript核心技术的基础语法

    Javascript核心技术的基础语法

    一、什么是javascript

    Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。
    特点：
    交互性（表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等）
    安全性（不可以直接访问本地硬盘）
    跨平台性（由浏览器解析执行，和平台无关）

    二、Javascript vs Java

    JavaScript只需浏览器解析就可以执行，而java需要先编译成字节码文件，然后通过JVM来执行。
    JavaScript 是一种弱类型语言，java是强类型语言。

    一个完整 JavaScript实现由以下3个部分组成

    1.核心技术：ECMAscript

    2.文档对象模型：DOM

    3.浏览器对象模型：BOM

    三、javascript版的HelloWorld

    HTML 中的脚本必须位于 标签之间。

    脚本可被放置在 HTML 页面的 和 部分中

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script type="text/javascript">
			
			//弹框
			//alert("HelloWorld...1");
			
			//控制台
			console.log("HelloWorld...1");
		script>
	head>
	<body>
		
		<script type="text/javascript">
			
			//弹框
			//alert("HelloWorld...2");
			
			//控制台
			console.log("HelloWorld...2");
		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    四、定义变量

    弱类型 对比Java定义变量的区别

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>.
		
		<script type="text/javascript">
			
			var v = "abc";//v1 -- string类型
			console.log(v);
			
			v = 123;
			console.log(v);//v1 -- number类型
		script>
	body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    五、基本数据类型

    1.JavaScript 数字

    JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

    var x1=34.00; //使用小数点来写

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

    2.JavaScript 字符串

    字符串是存储字符（比如 “Bill Gates”）的变量。

    字符串可以是引号中的任意文本。您可以使用单引号或双引号

    var carname=“Bill Gates”;

    var carname=‘Bill Gates’;

    单引号和双引号支持互相包含

    3.JavaScript 布尔

    布尔（逻辑）只能有两个值：true 或 false。

    var x=true

    var y=false

    4.undefined无定义

    访问一个不存在的变量或使用已声明但未赋值的变量，都会得到一个值undefined，undefined类型的值只有一个undefined

    5.Null空

    被赋予null值的变量通常认为已经定义了，只是不代表任何东西。

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		
		<script type="text/javascript">
			
			// number类型
			var v1 = 123;
			console.log(v1);
			var v2 = 123.123;
			console.log(v2);
			
			//string类型
			var v3 = 'abc';
			console.log(v3);
			var v4 = "abc";
			console.log(v4);
			
			//boolean类型
			var v5 = true;
			console.log(v5);
			var v6 = false;
			console.log(v6);
			
			//undefined类型
			var v7 ;
			console.log(v7);
			var v8 = undefined;
			console.log(v8);
			
			//null类型
			var v9 = null;
			console.log(v9);
			
		script>
	body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    六、基本数据类型的特殊点

    数字类型
    各种数字的结果都是number
    typeof 123

    Infinity
    用来代表超过了javascript处理范围的数值。
    1e308

    两个正无穷大相加会是一个什么结果？
    正负相加—NaN

    字符串
    字符串转换问题，字符串和数字类型进行数学运算的时候，除了加法运算以外，其他都会转换为数字类型

    布尔类型
    做逻辑的判断
    在javascript中，除了以下值，其他都是true
    空字符串“”
    null
    undefined
    0
    NaN
    false

    注意：NaN == NaN吗？如何正确判断是否为NaN
    比较运算符：
    == vs ===
    通过typeof对比undefined和null的区别

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		
		<script type="text/javascript">
			
			// number类型的特殊点
			//Infinity -- 无穷大
			console.log(Infinity + (-Infinity));//NaN - Not a Number
			
			//string类型的特殊点
			//两个字符串除了+是拼接，其余的都是做运算
		     var str1 = "10";
		     var str2 = "5";
		     console.log(str1 + str2);//105
		     console.log(str1 - str2);//5
		     console.log(str1 * str2);//50
		     console.log(str1 / str2);//2
		     console.log(str1 % str2);//0
		
			//boolean类型的特殊点
			//0、""、undefined、null都认为是false	
			
			if (null) {
				console.log("ture");
			} else{
				
				console.log("false");
			}
			
			//typeof -- 获取变量所属类型
			console.log(typeof 123);//number
			console.log(typeof "123");//string
			console.log(typeof true);//boolean
			
			//undefined vs null
			var v1 = undefined;
			var v2 = null;//js认为v2是一个对象
			console.log(typeof v1);//undefined
			console.log(typeof v2);//object
			
			//== vs ===
			//== 判断值
			//=== 既判断值还判断类型
			var v3 = 123;
			var v4 = "123";
			console.log(v3 == v4);//true
			console.log(v3 === v4);//false
		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    七、数组

    创建一个数组

    var arr = [1,2,3];

    更新数组的元素

    添加数组的元素

    删除数组的元素（delete arr[1],注意，此处只是将该元素留空，数组的长度并不会发生变化）

    数组的数组

    var a = [[1,2,3],[4,5,6]];

    关注与Java不同的特性即可

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		
		<script type="text/javascript">
			
			var arr = ["曹操","于禁 ","夏侯惇"];
			
			//设置指定下标上的元素
			arr[2] = "曹丕";
			
			//添加元素
			arr[3] = "曹植";
			arr[4] = "吕布";
			arr[10] = "貂蝉";
			
			//删除元素
			delete arr[4];
			
			//循环数组 -- for循环
			for(var i = 0;i<arr.length;i++){
				console.log(arr[i]);//获取指定下标上的元素
			}
			
			console.log("------------")
			
			//循环数组 -- for-in
			//注意：遍历有效下标
			for(var index in arr){
				console.log(arr[index]);
			}
			
			
		script>
		
		
	body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    八、流程控制语句

    If else
    For
    For-in(遍历数组时，跟Java是否一样)
    While
    Do while
    break 语句用于跳出循环。
    continue 用于跳过循环中的一个迭代

    1.求1-100之间的偶数之和

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<script type="text/javascript">
			var sum = 0;
			for(var i = 1;i<=100;i++){
				if(i%2==0){
					sum += i;
				}
			}
			console.log(sum);
			
		script>
	body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    2.我的梦想:第一个月存3000，每年递增1000，问多少个月后可以存到20万元

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<script type="text/javascript">
			var allMoney = 0;
			var money = 3000;
			var month = 0;
			while(allMoney<200000){
				allMoney+=money;
				month++;
				if(month % 12 == 0){
					money += 1000;
				}
			}
			
			console.log(month);
		script>
	body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    		//3.打印图形
    	//	*
		//	**
		//	***
		//	****
		//	*****

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<script type="text/javascript">
			
			for(var i =0;i<5;i++){
				for(var j=0;j<=i;j++){
					document.write("*");
				}
				document.write("
    "    );
			}
		
//			document.write("
    第一个write"); 
//			document.writeln("第一个writln"); 
//			document.write("第二个write"); 
//			document.writeln("第二个writln
    ");    
			
		    script>
	body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    九、函数

    JavaScript 函数语法
    1.函数就是包裹在花括号中的代码块，前面使用了关键词 function：
    function functionname(){
    这里是要执行的代码
    }
    当调用该函数时，会执行函数内的代码。

    2.调用带参数的函数
    在调用函数时，您可以向其传递值，这些值被称为参数。
    这些参数可以在函数中使用。
    您可以发送任意多的参数，由逗号 (,) 分隔：
    myFunction(argument1,argument2)
    当您声明函数时，请把参数作为变量来声明：
    function myFunction(var1,var2){
    这里是要执行的代码
    }

    3.带有返回值的函数
    有时，我们会希望函数将值返回调用它的地方。
    通过使用 return 语句就可以实现。
    在使用 return 语句时，函数会停止执行，并返回指定的值。
    语法
    function myFunction(){
    var x=5;
    return x;
    }
    上面的函数会返回值 5。

    4.案例：
    我们以实现一个求和函数为例来讲解基本的应用
    掌握javascript函数传参的特性
    掌握javascript的重载问题
    实现重载 arguments

    函数也是数据
    函数也是一种数据，我们可以把函数赋值给一个变量
    var add = function(a,b,c){
    return a+b+c;
    }

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<script type="text/javascript">
			/**
			 * 函数：相当于Java中的方法
			 */
			
			//无参数无返回值的方法
//			function fun01(){
//				alert("无参数无返回值的方法");
//			}
//			fun01();
			
			//带参数的方法
//			function fun02(a,b){
//				var result = a+b;
//				alert("带参数的方法 " + result);
//			}
//			fun02(10,20);
			
			
			//带返回值的方法
//			function fun03(a,b){
//				return a+b;
//			}
//			var sum = fun03(10,20);
//			sum = fun03(sum,30);
//			alert(sum);

			//JS中重载
			//注意：JS中没有重载
			function add(a,b){
				return a+b;
			}
			function add(a,b,c){
				return a+b+c;
			}
			
			var sum = add(10,20);
			alert(sum);
		script>
	body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    十、系统提供的预定义函数

    parseInt()：试图将其收到的任何输入值转换成整数类型，转换失败则返回NaN
    parseFloat()：同上类似
    isNaN(xxx)：判断是否为非数字
    isFinite(xxxx)：判断输入的是否是一个既非Infinity也非NaN的数字
    eval()：会将其输入的字符串当作javascript代码来执行

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<script type="text/javascript">
			
			//将字符串转型成整数
			var num1 = parseInt("1000.123");
			console.log(num1);
			
			//将字符串转换为小数
			var num2 = parseFloat("1000.123");
			console.log(num2);
			
			//判断字符串是否是非数字
			console.log(isNaN("abc"));//true
			
			//判断字符串是否是数字
			console.log(isFinite("123"));//true
			
			//将字符串认为是一段JS代码去运行
			eval("alert('用良心做教育');");

		script>
	body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
  • 相关阅读:
    MySQL explain结果Extra中"Using Index"与"Using where; Using index"区别探究
    Linux 文件IO
    调用MapReuce对文件中各单词出现次数统计
    redis的bitmap（面试题，待补充）
    Unity 如何把UGUI做到极致的优化
    【C++】C++ 引用详解 ⑩ ( 常量引用案例 )
    GO请求参数规则校验（自定义校验规则、规则中文化）
    若依 ruoyi 路径 地址 # 井号去除
    制作覆盖手绘图的导游地图，非常简单，你也可以
    data source连接clickhouse失败后数据源问题
  • 原文地址：https://blog.csdn.net/GL280599ZL/article/details/127838009