前端——JavaScript(一)

JavaScript

简称js,是一种脚本语言,是不需要进行编译的,
主要是用于web的开发,可以给网页添加各种各样的动态效果

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

js的组成是有三部分组成
基本的语法
文档对象模型(DOM)
浏览器对象模型(BOM)

特点
1.js是面对对象的,可以创建对象和使用对象。
2.js是不需要编译就能执行的
3.js只要有浏览器支持就可以运行
4.js对数据类型是不需要任何要求的,采用的方式是弱类型。

JavaScript引入方式

Js注释
	单行注释 //
	多行注释 /*  */
在HTML文件中js语言有两种引入方式
方式一:当前HTML
<script	type="text/javascript">
	//<script>可以出现在HTML页面的任何位置
	//整个HTML页面是自上而下一次执行
	//alert方法具有阻塞作用,用户点击确定后,alert才结束
	alert("Hello World!"); //页面弹出框
	第一种引入方式
</script>

方式二:引入外部js文件
<script type="text/javascript" src="01.js">/* 此处不写代码*/</script>
//以script标签作为引入时,标签内部不在写任何js代码
//01.js:
alert("Hello World!");

<html >
	<head>		
		<title>在HTML中嵌入JS的第二种方式</title>		
		<meta content="text/html;charset=utf-8"/>	
	 </head>
	<body>
		<script type="text/javascript" src="01.js"></script>
	</body>
</html>
css与js的执行时机
	js加载后立即执行
	js执行时会阻塞页面后续的内容
	原因:因为浏览器的展示需要一个稳定的dom树结构,
	而js中的代码有可能改变dom树的结构
	所以可以将script标签放到body闭合标签之前,
	这样能确保脚本执行前页面已经完成了DOM树的渲染;

	css 和 html 是并行加载的,
	过程中如果遇到css 或者 img,则会向浏览器返回一个请求,
	待资源返回后,将其添加到dom的相应位置中

JavaScript数据类型

变量名可以是_,数字,字母,$组成,不能数字开头
变量名区分大小写
变量的定义:
	var 变量名 = 变量值;
数据类型:
	获取变量类型 typeof 变量名
	打印变量类型	
	打开浏览器——>F12——>控制台(console)
	console.log(typeof 变量名)
JS的数据类型有5种
	4种原始类型:Undefined,Boolean,Number,String
	1种引用类型:Object
	
	undefined类型		变量已定义未赋值	var i;
						var i = undefined 清空对象
	
	number类型			不区分整数与浮动数
								NaN类型			不是一个数字(类型为number)
								1				(类型为number)
								-1.5 			(类型为number)
								数值类型 + undefined 运算后结果为NaN
					常用方法parseInt("123456") 返回123456  将字符串转为数字
			     			 parseInt("abc") 返回NaN
					常用方法parseFloat("1.23456") 返回1.23456 将字符串转为浮点数
					
	String类型		字符串类型
							length属性	返回字符串长度
							trim()		返回删除前后空格的字符串,不改变原字符串	
							任何类型与字符串相加结果都是字符串
							
	boolean类型		true/false 小写	
					以下元素等价于false
					空字符串/0/null/undefined/NaN
	
	object类型	
					var arr = [1,2,3,4] 或者 var arr = new Array(1,2,3);
						数组以下标取值	arr[0]
						length属性	获取数组元素个数
						push()	尾部追加数据		
						pop()	尾部获取元素
						reverse()	元素顺序反转
						join()		将数组元素转为字符串
						concat()	连接数组
						sort()		排序
						遍历数组元素
						for(var i = 0; i < arr.length; i++){
							console.log(i);
						}
				
					null表示变量的值为空,是object类型
					
					var dict = {name : "zs" , age : "23"}
					js中键(属性)默认可以不用加引号,
					而且会自动将单引号转为双引号
					取值方式一: 对象[变量]	
					取值方式二: 对象.属性		dict.name
					遍历
					for(var i  in p ){i是p对象的key
						console.log(p[i])
					}
自定义类型:
function person(name,age,job){
		this.name=name;
		this.age=age;
		this.job=job;
		this.study=function(){
			console.log(123);
		}
}
创建对象
var bill=new person("张三","23","程序猿 ");
调用属性
bill.name
调用方法
bill.study()

prototype属性可以动态给对象添加扩展方法与属性
person.prototype.sex=null; 动态的为person类型添加一个sex属性
bill.sex="男"; 为对象的属性赋值
console.log(bill);在浏览器控制台输出这个对象的值

JavaScript运算符

算术运算符+ - * / ++ -- % 
比较运算符 > >= < <= != == === !==
= 赋值
== 判断值是否相等
=== 判断值是否相等同时类型是否一致

逻辑运算符 && || ! 
赋值运算符	= += -= *= /=

JavaScript流程控制

if(条件判断){
	
	}else if(条件判断){
	
	} else{
	
	}
	所有分支语句仅且只有一个可以执行
	esle if(){}可以有多个
	else只能有一个
	
	switch(匹配参数){
		case 匹配值1 :
			break;
		case 匹配值2 :
			break;
		case 匹配值3 :
			break;
		default :
			都不匹配执行此处
			break;
	}
	case 匹配值可以有多个;仅且执行一条分支语句
	case中没有break会发生case穿透
	default只能有一个,其他皆不满足,执行此处
	执行完成后break结束当前switch语句

JavaScript循环语句

for循环:只有具体的循环次数时用for循环
for(var i = 0; i < 10 ; i++){
			console.log(i);
		} 
	
while循环:不知道具体循环次数用while循环
var i = 0
	while(i < 10){
		console.log(i);
		i++;
	}
	
三元运算符:boolean条件 ? 真值 : 假值
var i = a > b ? a : b  

其它

null与undefined
	null表示变量的值为空
	undefined表示变量已定义但是未赋值
null == undefined 返回true,只是值相等
null === undefined 返回false;null是object类型,undefined是undefined类型

isNaN(变量) 判断变量是否为非数字,非数字返回true;否则返回false
console.log(10/0) 打印10除以0的值,结果为Infinity,表示无穷大
将字符串装换为数字——parseInt(str) 自动取整
var a = “100”;
a = parseInt(a);
parseFloat();将字符串转换为数字,保留小数
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值