JavaScript基础学习

最新推荐文章于 2023-10-31 17:47:28 发布

真的凡_

最新推荐文章于 2023-10-31 17:47:28 发布

阅读量969

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_40997597/article/details/124616903

版权

JavaScript

一、简介

JS与Java没有任何关系

客户端（浏览器网页）脚本语言

二、作用

动态的改变页面中的内容和样式
在客户端做数据格式的校验
发送Ajax请求（连接Java代码所在的服务器）

三、JS代码的引入方式

和CSS类似
内联式
外部引入

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<!-- 内联式 -->
		<script type="text/javascript">
			JS代码
		</script>
		<!-- 外部引入 -->
		<script type="text/javascript" src="./js/test04.js"></script>
	</head>
	<body>
	
	</body>
</html>

四、变量的用法

1、控制台输出

console.log('HelloKitty');

在这里插入图片描述

2、定义变量

先定义后赋值
定义的同时直接赋值
不声明直接赋值

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript">
			//控制台输出
			//在js中""或者''都可以用来定义字符串
			//js代码是脚本语言 由浏览器运行 浏览器在加载当前html文件时会执行其中的js代码
			console.log('HelloKitty');
			console.log('123');
			console.log('456');

			//1.先声明变量再进行赋值
			var a;
			a = 3;
			//2.定义了一个变量a 赋值为2
			var b = 2;
			//3.不声明直接使用 省略了var关键字  该方式不建议使用
			c = 4;
			console.log(a);
			console.log(b);
			console.log(c);

			var a = 6;
			console.log(a);
		</script>
	</head>
	<body>

	</body>
</html>

3、变量的特点

JS是一门弱类型语言，没有编译的过程
安全性较低
语法的要求相对于强类型语言而言，没有那么严格
在定义变量时不需要指定数据类型，都是使用关键字var来进行定义
在JS中变量的类型是由数据来决定的
变量名可以重复，我们在开发过程中应该杜绝这种不严格的情况

五、变量的类型

typeof 变量名
查看变量的类型

1、常用类型

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript">
			// number 数值型
			var a = 1211.123;
			console.log(typeof a);
			// boolean 布尔型
			var b = true;
			console.log(typeof b);
			// string 字符串类型
			var c = 'HelloWorld';
			console.log(typeof c)
		</script>
	</head>
	<body>
	</body>
</html>

2、非正常类型

// undefined 未定义
var d;
console.log(typeof d);

3、数组类型

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript">
			// [] 表示定义数组
			// js的数组本身就是动态数组 在定义时不需要关心长度
			var array = [1,23,4,6];
			array[4] = 56;
			console.log(array);

			// 如果只有一个数值型的参数 则是在指定数组的长度
			// 如果有多个参数则是在指定数组中存储的数据
			var array1 = new Array(4,4,6,7);
			console.log(array1);

			//数组属于object类型
			console.log(typeof array);
		</script>
	</head>
	<body>

	</body>
</html>

4、对象类型

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript">
			// {} 申明对象
			// 先申明对象 后期给对象指定属性名以及属性值
			var obj = {
     };
			obj.name = "张三";
			obj.age = 23;
			obj.phone = "123456";
			console.log(obj);

			// 申明对象的同时指定属性
			var person = {
     
				name: "李四",
				age: 26,
				phone:"123456"
			};
			console.log(person);

			// 相当于 = {}
			var o = new Object();
		</script>
	</head>
	<body>

	</body>
</html>

5、日期类型

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript">
			//创建一个日期类型的变量
			//该变量会自动获取系统当前时间
			var date = new Date();
			console.log(date);
			// 获取当前年份
			console.log(date.getFullYear());
			// 获取当前月份 从0开始
			console.log(date.getMonth());
			// 获取日期
			console.log(date.getDate());
		</script>