js之基本语言

最新推荐文章于 2024-04-24 19:31:26 发布

初相识.

最新推荐文章于 2024-04-24 19:31:26 发布

阅读量3.7k

点赞数

本文链接：https://blog.csdn.net/qq_42737056/article/details/83013117

版权

一,三种存在位置

1,行间式:直接在body标签中οnlοad="设置的样式格式"

2,内联式,注意必须在设置的内容下面用script双标签包裹,一般放在body标签的底部

3外联式:js代码块出现在外部的js文件中,通过src属性进行链接

总结:三种存在方式不存在优先级,谁在下面就谁的属性起作用(前提是必须设置相同的属性时,当设置不同的属性就都起作用)

内联使用场景:某页面的特有逻辑,可以书写该该页面的script标签内
外联使用场景:适用于团队开发,js代码具有复用性
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>三种存在位置</title>
</head>



<body>
	
	<script type="text/javascript">
		body.style.backgroundColor='orange'
	</script>

	
	<script type="text/javascript" src="./js/01.js"></script>
</body>
</html>

二,解释器语言决定js作用

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>js位置</title>
	<!-- 出现在head底部:依赖型js库 -->
	<!-- <script>
		db.style.backgroundColor = "#0ff"
	</script> -->
	<script>
		var color = "cyan";
	</script>
</head>
<body id="bd">
	<!-- <script>
		bd.style.backgroundColor = '#0ff';
	</script> -->

	<!-- 需求1:操作div,让其字体颜色变为红色 => 功能(style.color) => 尽可能下移 -->
	<!-- 需求2:让div背景颜色变为提供的颜色 => 依赖(color变量) => 尽可能上移 -->
	<div id="div">123</div>
	<!-- 需要使用color变量这个资源 ,之前必须设置过color这个属性-->
	<script>
		div.style.backgroundColor = color;
	</script>
</body>
<!-- 位置③ -->
<!-- 出现在body标签底部：功能型JS脚本 -->
<script>
	bd.style.backgroundColor = '#0ff';
</script>

<!-- 完成需求1 -->
<script>
	div.style.color = 'red';
</script>

<!-- 外联出现位置同内联 -->
<!-- 拥有src的外联script标签,会自动屏蔽标签内部的代码块 -->
<script src="js/02.js">
	alert(123)
</script>
</html>

三,变量的定义

1,script标签内,代表js,采用的是js语法

2,简单规范,//单行注释

/*

多行注释

*/

3,语句以分号或者是换行结束

4,变量的定义:声明+初始化

ES5变量的定义:
注:ES5标准下无块级作用域,只有方法可以产生实际的局部作用域

无块级作用域的局部变量

var a = 10;

全局变量:
b=20
	// eg:验证
	// 方法的自调用,就会产生一个局部作用域
	(function () {
		var x = 10;
		y = 20;
	})()

	// alert(x) 报错,x只能在局部作用域中使用
	// alert(y); 正常使用
// 块级作用域
	{
		var n = 10; // 无视块级作用域
		m = 20;  // 全局变量,更无视块级作用域
	}
	// alert(n)  // 可以
	// alert(m)  // 可以
ES6变量的定义

有块级作用域的局部变量

let aa = 100;

有块级作用域的常量
const bb = 200;
        {
		let xx = 100;
		const yy = 200;
	}
	// alert(xx);  // 无法访问
	// alert(yy);  // 无法访问
	// 函数产生的局部作用域同该情况
// 命名规范:常量名全大写
	const MM = 1000;
// MM = 2000;  // 常量值不允许更改
变量名的命名规范:

1,可以由字母,数字,下划线,$组成,但是不能以数字开头(可以包含中文,采用驼峰命名法)

2,区分大小写

3,不能与关键字保留字重名\

四,三种弹出框

弹出框:一个弹出框只能弹出一条消息

确认框:弹出的窗口可以选择确定以及取消,获得返回值

输入框:弹出的窗口可以输入内容,获得的返回值可以是输入的内容或者是null

确认框和输入框都可以获得返回值
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>三种弹出框</title>
</head>
<body>
	<script>
		// 弹出框
		alert("普通弹出框", "呵呵");  // 呵呵被忽略了

		// 确认框
		var res = confirm("你是男的吗?");  // true | false
		alert(res);
		// 输入框
		var res = prompt("请输入你的小名!");  // 确定为输入值, 取消为null
		alert(res); 
	</script>
</body>
</html>

五,四种调试方式

一般用于程序出现错误群钊错误

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>四种调试方式</title>
</head>
<body>
	<script type="text/javascript">
		var a = 10;
		var b = 20;

		// 四种查看变量的值的方式
		// alert(a);//直接跳出一个窗口
		// alert(b);

		// console.log(a);//在后台看
		// console.log(b);

		document.write(a);//支架添加在文本中
		document.write(b);

		// 断点调试 检查中看sources
	</script>
</body>
</html>

六,数据类型

一,值类型,

1,number数字类型

typeof()查看类型,可以省略()

2,string字符创类型

3,布尔类型 true|false

4,undefined:未定义类型

二,应用类型

5,function:函数类型

6,object:对象类型

判断:instanceof

三,特殊的object

7,null:空对象

8,Array:数组对象

9:Date:时间对象

10:RegExp:正则对象

<head>
	<meta charset="UTF-8">
	<title>数据类型</title>
</head>
<body>
	数据类型
</body>
<script type="text/javascript">
	// 一. 值类型
	// 1.number:数字类型
	var a = 10;
	// typeof()查看类型,可以省略()
	console.log(a, typeof a);
	// 判断
	console.log(typeof a == 'number');

	a = 3.14;
	console.log(a, typeof a);

	a = 314e2
	console.log(a, typeof a);


	// 2.string:字符串类型
	var a = '字符串';
	console.log(a, typeof a);

	a = "字符串";
	console.log(a, typeof a);

	// ES6会检测变量的重复定义,报错
	// let x = 10;
	// let x = '10';

	// 3.boolean:布尔类型 true|false
	a = true;
	console.log(a, typeof a);

	// 4.undefined:未定义类型
	var b;
	console.log(b, typeof b);
	var c = undefined;
	console.log(c, typeof c);

	// 二.引用类型
	// 5.function:函数类型
	var m = function () {};
	console.log(m, typeof m);

	// 6.object:对象类型
	var obj = {};
	console.log(obj, typeof obj);

	obj = new Object();
	console.log(obj, typeof obj);
	// 判断
	// instanceof:对象类型判断
	console.log(obj instanceof Object);

	// 三.特殊的Object
	// Number() String() Boolean() Math
	// 7.null:空对象
	var o = null;
	console.log(o, typeof o);
	// 判断
	console.log(o == null);

	// 8.Array:数组对象
	o = new Array(1, 2, 3, 4, 5);
	console.log(o, typeof o);
	console.log(o instanceof Object);
	// 判断
	console.log(o instanceof Array);

	// 9.Date:时间对象
	o = new Date();
	console.log(o, typeof o);

	// 10.RegExp:正则对象
	o = new RegExp();
	console.log(o, typeof o);

</script>
</html>

七,类型转换

一,显性转化

1,num与bool转换成字符串

var c = String(a);
c = String(b);
或者
c = a.toString();
c = b.toString();

2,bool与str装换成num

var aa = true;
var bb = '10';
var cc = Number(aa);
cc = Number(bb);
或者:
cc = + aa;
cc = + bb;
或把字符串转成整形或者浮点型:
浮点型时:只识别第一个小数点
整数型时:只识别第一个小数点之前的整数,如果没有小数点或者是小数点之前的字符串存在文本,则不识别,直接输出NaN
cc = parseFloat('3.14.15.16abc');
cc = parseInt('10.35abc');
isNaN:判断是否可以转成数字型
var res = parseInt("abc10def");
console.log(res, isNaN(res))

二,隐性转化


5 + null  // 5
"5" + null  // "5null"
"5" + 1  // "51" 字符串的拼接
"5" - 1  // 4 自动转成数字型进行减
console.log("5" - 1);
	
"" + ? // "?"

八,运算符

1,算数运算符(只存在number类型运算)

加减乘除自增自减
1.++/--在前在后,自身值一定改变, a++/++a => a = a + 1
2.++/--在前先自运算,再他运算
1.++/--在后先他运算,再自运算
2,赋值运算符

= += -= *= /= %=

3,比较运算符

== === != !== > < <= >=
console.log('5' == 5);   // true, 值相等即可
console.log('5' === 5);  // false, 值与类型均要相等
console.log('5' != 5);  // fasle
console.log('5' !== 5);  // true
4,逻辑运算符(运算结果为true|false)

&& 与
真,真 => 真
真,假 => 假
假,真 => 假  短路
假,假 => 假  短路
&&运算,有假即假,所有前面为假,后面没必要被执行,所以被短路
||或
真,真 => 真  短路
真,假 => 真  短路
假,真 => 真
假,假 => 假
||运算,有真即真,所有前面为真,后面没必要被执行,所以被短路
!非

真则假,假则真,负负得正

三目运算符(三元运算符)

结果 = 条件表达式 ? 结果1 : 结果2;

结果不一样要与表达式有关系,但表达式为真则结果为结果1,反之为结果2,

初相识.

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js之基本语言

一,三种存在位置 1,行间式:直接在body标签中onload="设置的样式格式"2,内联式,注意必须在设置的内容下面用script双标签包裹,一般放在body标签的底部3外联式:js代码块出现在外部的js文件中,通过src属性进行链接总结:三种存在方式不存在优先级,谁在下面就谁的属性起作用(前提是必须设置相同的属性时,当设置不同的属性就都起作用)内联使用场景:某页面的特有逻...
复制链接

扫一扫