web前端基础知识08---javascript基础知识(1)

一、认识Javascript语言

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript的缩写为JS。
JS是web标准中的行为标准,是一门专门用来控制网页的脚本语言。

注意:javaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。Java(由 Sun 发明)是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。

二.如何使用JS


a.内联:将JS代码写在标签中
b.内部:写在script标签中,注意这个标签可以放到html文件的任何位置。一般放在body的最后面
c.外部: 写在一个js文件中(后缀是.js的文件),通过script标签的src属性来导入对应的js文件。导入的位置不是固定的,可以根据需求在合适的位置导入

<!DOCTYPE html>
 <html>
 <head>
 	<title>JS基础</title>

 	<!-- 2.内部 -->
 	<script type="text/javascript">
 		// 在这儿写js代码
 		// alert('你好吗')  //弹出一个提示框
 	</script>

 	<!-- 3.外部 -->
 	<!-- 通过script标签的src属性来导入对应的js文件 -->
 	<script type="text/javascript" src="03-运算符.js"></script>

 </head>
 <body>

 	<p id="p1">你好</p>
 	<p id="p2">hello</p>


 	<!-- 1.内联 -->
 	<!-- onclick属性后写js代码;onclick 属性由元素上的鼠标点击触发。
	注:onclick 属性不适用以下元素:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。 -->
 	<button onclick="document.getElementById('p1').innerHTML='Hello JS'">点我一下</button>

 	
 	<script type="text/javascript">
 		// 在这儿写js代码
 		// alert('你好吗')  //弹出一个提示框
 		document.write('hi');
 		document.getElementById('p2').innerHTML='我最棒';

 	</script>
 </body>

 </html>

三.Js的四种输出方式

JavaScript 没有任何打印或者输出的函数,可以通过不同的方式来输出数据

  • window.alert()====弹出对话框(其中前面的window可以省略)
  • console.log()====从浏览器控制台输出
  • innerHTML()====显示在指定的标签中
  • document.write()====写入到网页中

注意:

(1)document.getElementById()根据元素Id来获取指定元素,

如需从 JavaScript 访问某个 HTML 元素,可以使用 document.getElementById(id) 方法。

(2)浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。程序中调试是测试,查找及减少bug(错误)的过程。

<!DOCTYPE html>
<html>
<head>
	<title>js的四种输出</title>

</head>
<body>
	<p>你好吗</p>
	<p id="p1" style="background-color: red"></p>
	<script type="text/javascript">
		
	// 1.弹出对话框
	alert("对话框显示的内容");

	// 2.从浏览器控制台输出
	console.log('从控制台输出');

	// 3.写入到网页中
	document.write('aaa');
	document.write('<h1>我是标题</h1>');

	// 4.显示在指定的标签中(会将文本"我是内容"显示在红背景的p标签中)
	document.getElementById('p1').innerHTML = '我是内容';
</script>
</body>
</html>


 网页显示效果

四、Js的基本语法

1.语句

 (1)js语法上,一条语句结束可以写分号也可以不写分号;但是根据习惯需要在每条的语句的后面添加分号。 如果一行要写多条语句,那么每条语句之间必须写分号!

(2)js中没有缩进的规范,但是在实际开发的时候还是要按照python的要求去规划缩进

2.注释(js中只有这两种注释)

 a. 单行注释就是'//注释内容'

 b. 多行注释:'/*注释内容*/'  

3.标识符:用来给变量和函数命名的....

 a.由字母数字和下划线以及美元符号($)组成,并且数字不能开头(硬性要求)

 b.不能是关键字(硬性要求)

 c.下划线和$不开头

d.见名知义

4.字面量(具体的值)

 a.数字Number:12, 12.3, 12e2

 b.字符串String:'abc12' "231hj"(用单引号或者双引号括起来)

 c.数组Array:[1,2,3,4,'a','b'](相当于python中的列表)

 d.对象Object:{'a':1, 'c':32}(类似于python中的字典)

 e.布尔Boolean:true,false

  f.特殊值:null, undefined

五.变量Var

变量:用来存储数据


1.变量的声明:


格式: var 变量名; 或者 var 变量名 = 初值

说明:

var: 是js中声明变量的关键字


变量名: 标识符,驼峰式命名(除了第一个单词首字母小写,其他单词的首字母大写,例如:userName,peopleNumber)
初值: 字面量(表达式)

注意:

(1)js是动态语言,声明变量的时候不用声明变量的类型。同一个变量可以存储不同类型的值

var aa = 10;
aa = 'hello';
console.log(aa);


(2)声明变量:就是在内存中开辟空间存储数据;

(3)变量赋值的时候数字、字符串和布尔数据存的是值。数组和对象存的是地址

(4)声明的时候可以给变量赋值,也可以不赋值

2.声明一个变量a,不赋值默认值是undefined

var a;
console.log(a);

3.一个变量重复声明,并且没有赋初值的话,变量的值是之前的值,不是undefined

var aa = 10;
aa = 'hello';
console.log(aa);

// 一个变量重复声明,并且没有赋初值的话,若前面有值,变量的值是之前的值,不是undefined!
var aa;
console.log(aa);

4. 可以同时声明多个变量

var num1, num2 = true, num3;
console.log(num);

var arr = [1, 2, 3, 4]
console.log(arr)

六.基本数据类型


1.typeof 表达式; 查看表达式结果的数据类型


2.JS中的基本数据类型

有: Number(数字)、String(字符串)、Boolean(布尔)、Array(数组)、Object(对象)、null(清空变量的内容)、undefined(定义的变量没有赋值)

(1)Number:

       a.包含所有的数字(整数、浮点数、科学计数, NaN->不合法的数字) -- 数字类型只有一种,值类型

       b.Number() --> 可将括号中的数据转换成Number类型。
       将字符串转换成数字的时候,只有去掉字符串的引号后剩下的部分是一个数字的字符串才能转换成合法数字,否则结果是NaN
       布尔true会转换成1,false转换成0

(2)字符串(string)

a.可以使用单引号或者双引号引起来的字符集,就是字符串数据:'abc',"12gh"....
b.JS中也可以使用转义字符来表示有特殊功能和特殊意义的字符: \\ ,\' ,\" , \t ,\n等
c.JS字符也是Unicode字符
d.通过下标获取某个字符:下标范围是0~字符串长度-1.
注意:js中下标不能是负数;也不可以切片

e.通过 new String()去创建一个Object类型的字符串。 

【例】】通过下标获取字符
console.log(str4[0]);

 获取字符串的长度
console.log(str4.length);

 创建一个对象类型的字符串123abc
var str5 = new String('123abc');

(3)数组(Array)

Array: 数组类型就是python中的列表
1.存数组数据存的是地址
2.数组的元素可以是任何类型的数据,可以通过下标去获取对应的元素
3.下标的范围:0~长度-1
4.通过length可以获取数组元素的个数

【其他操作】

添加元素push:在数组的最后添加一个或者多个元素,返回最新的数组的长度

删除元素pop:将数组中的最后一个元素删除,并且返回被删除的元素

切片slice(起始下标,结束下标):从数组的起始下标开始,到结束下标前的所有元素,作为一个新的数组的元素并且返回

删除制定下标 的元素(下标,个数);从指定下标开始删除指定个数元素

 splice(下标,0,元素1,元素2,元素3...):在指定的下标前插入指定的一个或者多个元素

unshift: 在数组的开头添加一个或者多个元素

直接修改元素===例如;

a2[0] = 100;
console.log(a2);

(4)object对象

Object: 对象类型就是python中的字典
 变量存储对象,存的是对象的地址, 存的时候以键值对的形式去存储数据,这个键可以看成对象的属性

创建一个变量,存的是一个对象的地址
var obj1 = {'a':1, 'b':2, 'c':'abc'};

取值: 通过key去取值
console.log(obj1['a']);


取值:通过点语法获取属性的值
console.log(obj1.c);


/修改
obj1['a'] = 100;
obj1.c = '你好';
console.log(obj1);


增加: 给不存在的key或者属性去赋值
obj1['d'] = 1001;
console.log(obj1);
obj1.e = 'aaaa';
console.log(obj1);

 删除指定的键值对/属性
delete obj1.b;
delete obj1['a'];
console.log(obj1);
声明对象的时候,属性名可以不用加引号
var obj2 = {name:'yuting', age:18, sex:'女'};
console.log(obj2['name']);
console.log(obj2.name);

猜你喜欢

转载自blog.csdn.net/ZZQHELLO2018/article/details/81142264
今日推荐