JavaScript入门1

JavaScript

概述

JS是弱类型定义语言,Java是强类型定义语言

强类型定义语言:

强制数据类型定义的语言。也就是说,一旦一个变量被指定了某个数据类型,如果不经过强制转换,那么它就永远是这个数据类型了。举个例子:如果你定义了一个整型变量a,那么程序根本不可能将a当作字符串类型处理。强类型定义语言是类型安全的语言。

弱类型定义语言:

数据类型可以被忽略的语言。它与强类型定义语言相反,一个变量可以赋不同数据类型的值

JS的特点:

  1. 交互性(它可以做的就是信息的动态交互)
  2. 安全性(不允许直接访问本地硬盘)
  3. 跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关)

引入JS方式

在html内直接写代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	<!-- js代码建议放在文档的最后 -->
	<!-- 使用<script>标签引入js -->
	<!-- 页面加载至此处,代码就会执行 -->
	<script type="text/javascript">
		// 在此处写js代码
		// 输出语句,输出到开发者工具的控制台
		console.log("js日志...")
	</script>
	</body>
</html>
html与js分离

我们可以单独的将js代码写在一个文件中,然后在html页面内引入js文件即可。

在这里插入图片描述

定义变量

由于js是弱类型语言,因此不用像java一样考虑数据的数据类型。直接使用关键字var即可。

语法格式:

var 变量名 =;var 变量名;    //该变量输出为undefined

案例:

var a = 1;
console.log(a);    // 1
var b;
console.log(b)     //undefined

变量的数据类型

  • 数值类型:number(int 、short 、double、float、long)
  • 字符串类型:string (字符串、字符都可以)
  • 布尔类型:boolean
  • 未定义:undefined
  • 对象类型:Object
  • 函数类型:function

案例:

			// 声明变量
			// var 变量名 = 值;
			var a = 1;
			var b = "我爱js";
			var c = 1.1;
			var d = false;
			var e = new Date();
			
			console.log(a);
			console.log(b);
			console.log(c);
			console.log(d);
			console.log(e);
			
			// 打印类型,typeof(参数),该方法会将类型返回
			console.log("-----------------");
			console.log(typeof(a)) // number
			console.log(typeof(c)) // number
			console.log(typeof(b)) // string
			console.log(typeof(d)) // Boolean
			console.log(typeof(e)) // object类型,不是基本类型,是引用类型
			console.log(typeof(h)) // 未定义
js变量中的三个特殊值
  • undefined :未定义 (在JavaScript中所有的变量未赋值时,都是undefined)
  • null: 空值
  • NaN:全称:Not a Number。非数字,非数值。(如数值型变量a与字符串类型b相乘,在JS语法上没有错误,但结果是NaN。)

字符串类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
            var ch = 'e';
			var str = "JavaScript";
			
            //js中的字符串方法与java中的字符串方法基本一致
            
			console.log(str.length);   //获取字符串长度
			console.log(str.charAt(3));   //通过下标找指定字符
			console.log(str.indexOf('p'));  //通过字符找下标
			console.log(str.substring(4));  //截取
			console.logstr.substring(4,6);  //截取
			console.log(str.split("-"));    // 按照指定字符拆分,返回的是数组
			
		</script>
	</head>
	<body>
	</body>
</html>

数组类型

		<script type="text/javascript">
			/*
				长度不固定,类型不固定
			*/
			var arr1 = []; // 空数组
			arr1[0] = 1; // 给值
			
			var arr2 = [1,"二",false,new Date];
			
			var arr3 = new Array(3); // 指定长度创建数组,但是长度没有限制
			arr3[0] = 0;
			arr3[1] = 1;
			arr3[2] = 2;
			arr3[3] = 3;
			console.log(arr3);
            
            //当
			
			/**
			 * 使用数组:
			 */
			// 取值
			console.log(arr3[0])
			// 赋值
			arr3[0] = 10;
			console.log(arr3[0])
			console.log("--------");
			// 方法
			// length:数组长度
			// join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
			// pop():返回并删除最后元素
			// push():向数组的末尾添加一个或更多元素,并返回新的长度
			// reverse();反转数组
			// sort();排序
			
			var arr4 = [1,2,3,4,5];
			console.log(arr4.length);
			console.log(arr4.join("-")); // 与字符串方法split相反
			console.log(arr4.pop());
			console.log(arr4);
			console.log(arr4.push(6));
			console.log(arr4);
			console.log(arr4.reverse());
			console.log(arr4.sort()); // 只会升序排序
		</script>

javaScript语言中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组做扩容操作。而没有赋值的下标元素,值为undefined。

<script type="text/javascript">
        var arr = [];
        alert(arr.length);    //长度为0

        arr[0] = 12;
        alert(arr[0]);   //12
        
        arr[2] = 'abc';
        alert(arr[2]);   //abc
        alert(arr.length);    //长度为3
		alert(arr[1]);     //undefined

</script>

引用类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			// 声明一个引用对象
			var user = {
				id:1,
				name:"狗蛋",
				age:18,
				sex:false,
				address:{
					contry:"中国",
					province:"河南",
					city:"郑州"},
				};
			// 其实这就是JSON,后续学过框架,学过前后端分离开发,学过RESTFul之后
			// JSON会用的很多。
			
			// 获得属性
			console.log(user.name+"---"+user.age)
			
			// 更改属性
			user.name = "杉杉";
			
			console.log(user.name+"---"+user.age)
			
			
		</script>
	</body>
</html>

日期类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var data = new Date(); //获取当前时间
			
			console.log(data);      //Wed Aug 24 2022 19:11:41 GMT+0800 (中国标准时间)
			console.log(data.getFullYear());  //获取年份      //2022年
			console.log(data.getDate());      //获取一个月中的第几天		//24号
			console.log(data.getDay());		  //获取一周中的第几天        //周3
			console.log(data.getMonth()+1);   //获取月份,从0-11月份       //8月
			console.log(data.getTime());      //获取毫秒值				//1661339553735
			console.log(data.toLocaleString()); //按照本地格式打印时间		//2022/8/24 19:12:41
		</script>
	</head>
	<body>
	</body>
</html>

运算符

运算符包括了算数运算符、逻辑运算符、关系运算符、三目运算符。

算数运算符:加(+)、减(-)、乘(*)、除(/)。

逻辑运算符:与(&&)、或(||)、非(!)

​ 在JavaScript语言中,所有的变量,都可以做为一个 boolean类型的变量去使用。其中0 、null、 undefined、""(空串,不能有空格)都认为是 false;

测试:

<script type="text/javascript">
        var a = null;
        if (null){
            alert("null为true");
        }else {
            alert("null为false");
        }
</script>
//结果()
null为false;

关系运算符:大于(>)、小于(<)、大于等于(>=)、小于等于(<=)、不等于(!=)、全等(== / ===)

​ 在js中的关系运算符中,全等有两种。1、 == 只是简单的判断值是否相等。2、=== 除了做字面上的数值比较外,还要比较两个变量的数据类型

<script type="text/javascript">
	var a= 12;
	var b= '12';
	alert (a == b);   //true
	alert (a === b);  //false
</script>

三目运算符

语法格式:条件成立取值1,不成立取值2.

判断条件? 值1:值2;
<script>
			var i = 1;
			var j = 2;
			console.log(i < j ? "i":"j");
</script>

分支

js中的分支和java中的分支一样。

if

if…else

if…slse…else…

switch…case

循环

while

do…while

for

		<script type="text/javascript">
			var i = 1;
			while(i < 11){
				console.log(i);
				i++;
			}
			console.log("--------");
			var j = 1;
			do{
				console.log(j);
				j++;
			}while(j < 11);
			console.log("--------");
			for(var k = 1;k < 11;k++) {
				console.log(k)
			}
		</script>

函数

函数,就是类似Java中的方法,可以完成某些功能。

<script type="text/javascript">
    //方式一:
    //无参函数
       function f() {
            alert("无参函数被调用了");
       }
       f();

	//有参函数
       function f1(a,b) {
            alert("有参函数被调用了;a = " + a + ", b = " + b);
       }
       f1(1,'abc');

	//带返回值函数
       function sum(num1,num2) {
            var result = num1 + num2;
            return result;
       }
       alert(sum(12, 23));

	//方式二:
	var 函数名 = function(形参列表){
        函数体;
    }
	
</script>

注意

在Java中可以重载,但是在JS中函数的加载会直接覆盖掉上一次的定义。

<script type="text/javascript">
       function f() {
            alert("无参函数被调用了");
       }
       function f(a,b) {
            alert("无参函数被覆盖掉了; 且a = " + a +", b = "+b);
       }
       f(12,13);
</script>
//结果
无参函数被覆盖掉了; 且a = 12, b = 13
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值