JavaScript

1、初识JavaScript

在网页中:

html表示网页的结构
CSS表示网页的样式
JavaScript表示网页的行为

三大核心

(1)ECMAScript:javaSript的标准语法
(2)BOM(Browser Object Model):一整套操作浏览器的属性和方法
(3)DOM(Document Object Model):一整套操作文档流的属性和方法
->通过JS语法让页面发生变换,让文档变换

书写位置

行内式
(1) a标签(本身有行为)
-> 因为a标签,本身有动作行为出现,需要区分你是跳转还是执行JS代码
-> 如果不是跳转在href属性里写一个JavaScript声明:Js代码;
(2) 非a标签
内嵌式
->在html文件的任意标签内书写一个script标签,在此标签中书写JS代码
->推荐在head标签或者body标签的末尾
```
<script type = "text/javascript">
js代码
</script>
```

外链式

->**在script标签的src属性中引用JS文件,JS代码书写在JS文件中

->注意:使用外链式之后,再在script标签中书写JS代码没意义(哪怕只写了src属性,无法使用内嵌式)****

<script src = "js文件路径"> 
    
</script>

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<script type="text/javascript">
			alert('我是内嵌式js代码')
		</script>
	</head>
	<body>
		<!-- 行内式 -->
		<h1>alter()方法</h1>
		  <a href="javascript: alert('helloword!');">点击试试</a>
		   <a href="alert('hell!');">不加javascript再点击试试</a>
		   <div onclick="alert('hello')">
		   	div点击试试
		   </div> 
		   <!-- 内嵌式 -->
		   
		   <!-- 外联式 -->
		<!--   <script src="helloword.js"> -->
	</body>
</html>

输出语法

1.alert():

-> 以浏览器弹出层形式展示内容,堵塞后面的代码执行
-> 只要不是纯数字,单双引号无所谓

2.console():

->在浏览器控制台输出,方便调试,不影响页面展示,不会堵塞后面的代码执行

3.document.write()

=>直接在html页面显示
特殊: ->由于是直接输出到文档流,故可以解析标签

2、变量与数据类型

2.1定义变量

=>声明变量格式: var 变量名 (标识符规则和规范与java类似)
=>不使用var 关键字也可以声明一个变量(不推荐)

2.2数据类型

Number 数值

包括一切数字(浮点数,任意进制数如0x十六进制,0八进制)
NaN: Not a Number, 即是一个数值类型,但不是数字
科学计数法(如:2e5)

Undefined 空(未定义)

undefined

Null 空

null

String 字符串

用单或者双引号或者反引号(`)包裹表示

模板字符串:

let name = "lili";  //模板字符串
let yourName = "你的名字:${name}" //使用${name}引用了name的内容;

常用方法:substring 截取字符串

//[) 含头不含尾
substring(1); //从第一个截取到最后一个;
substirng(1,3); //从第一个截取到第三个;

Boolean 布尔值

0 /0.0 / null / undefined / NaN 这些都视为fasle ,其他一律为真(true)

true 在计算机存储的时候是1
false 在计算机存储的时候是0

引用数据类型

Object

Function

typeof检测数据类型

关键字typeof(以String类型返回)

用法一: typeof 变量

var n2 = typeof n1 ;  //将n1的数据类型以字符串的形式返回给n2

用法二: typeof(),相较于用法一没有局限性

数据类型转换

Number类型

1. Number()

语法: Number(要转换的数据)
返回值: 转换好的数据,转换不了(如含有字符串),则返回NaN

2. parseInt() 取整,依次转换

语法:parseInt(转换的的数据)
特点: 一位一位的转换,每识别到一个数字就返回一个,直到遇到非数字(包括小数点)就不往下看了,第一位是非数字直接返回NaN

parseInt("2a5") ; // 返回 2
parseInt("123.456") //返回 123

3.parseFloat() 比parseFloat()多认识一个小数点

4. 非加法数学运算

String类型

1. Stirng()

语法: String(转换的数据)
特点: 任意的数据都能转

2. toString()

语法: 转换的数据.toString()
特点: Undefined和null不能转换

3. + 与java同样的字符串链接符

Boolean 类型

Boolean()

语法:Boolean(转换的数据)
特点: **只有这五个是false,分别是: 空字符串'' NaN,null , Undefined ,,0 **
其他全是true
注意!:即使[] =='' 的结果为true,Boolean([])的结果也还是true

3、运算符号

1.数学运算符

与java基本一致,比java多个幂运算符号
如:

2**10 //结果为1024 ,2的10次方
3**2 //结果为9.即3的2 次方

2.比较运算符号

与java不同或者新增的是:

== : 只比较值,不管数据类型
=== :既比较值又比较数据类型

console.log(1=='1');  //true
console.log(1==true);  //true
console.log(null==undefined);  //true
console.log(NaN==NaN); //false,因为NaN的值不确定
console.log(NaN===NaN);  //false

!===即三等于的的取反,值不一样就算true**
!==,即双等于的取反,数据类型和值都不一样才是true**

3.逻辑运算符号

与java一致

4.if语句

与java一致,注意:条件位置处，必须Boolean的值 / 表达式 / 变量，如果不是Boolean类型的话，JS会自动进行转换

例如这些 if（0 /0.0 / null / undefined / NaN）{ } 这些 if 都会认为是false。因为*0/0.0/null/undefined/NaN* 这些值转换为布尔值都是 false，除此以外一律为真。

5.switch语句

与java基本一致,只能判断===
其他语句也基本与java一致

4、函数

一种引用数据类型
对一段代码的封装

4.1 定义函数

声明式定义:

语法: function 函数名(){}

赋值式定义:

语法: var 函数名 = function(){}

4.2 函数调用

声明式定义函数和赋值式定义的调用的区别

声明式函数:可以在声明前后调用
赋值式函数: 只能在赋值后调用

4.3 函数参数

实参和形参不对应的情况也不会报错

形参多: 多的形参为undefined
实参多: 形参不接受

4.4 arguments(参数数组)

函数自带的变量
表示所有实参的集合(伪数组)

arguments的属性:

length表示参数的个数

1.预解析

是指在代码之前做的准备工作,类似C语言的预处理,JS代码的一种运行机制

1.1 var 声明变量

实际上在代码的执行时,会*预先解析var声明的变量

注: 用var声明的变量是全局变量,而在ES6标准后可使用 let 来声明局部变量

let 局部变量 ;

1.2 定义函数

声明式定义函数 :在预计解析时将函数准备好
(不建议多用,因为全局可用太乱了)
赋值式定义函数:预计解析时只是声明有这么一个变量

2.当预解析时函数与变量同名

2.1 预解析的最高级

与其他编程语言有所不同

只要有JS代码中可以预解析的内容,无论要解析的语句在会先进行解析(哪怕是return或者if语句判断为false)

console.log(num); //不会报错
if(false){
    var num = 100;  //(1) 代码最执行执行预解析,var num,if语句只判断是否赋值
}
console.log(num);

2.2 优先级

在JS中函数是一等公民,在预解析时只解析函数
如:

fn();   //(2)按代码顺序执行,打印
var fn;
fn = 100;  //将fn赋值为100
fn () ;  //报错!!因为此时fn已经不是一个函数
function fn (){    //(1)最先执行,将fn解析为一个函数,然后再解析var fn
  console.log("我是一个函数");
}

(建议:(1)变量尽量以名词命名,尽可能用到两三个单词;(2)函数名尽量以功能区分)

3. 作用域

用来限制变量的使用范围

3.1 全局作用域

全局可用,叫做window

3.2 局部作用域(也叫私有域)

函数体里面的作用域,只有该函数内可用

3.3 变量的三个机制

定义机制:只能在自己的作用域和子级作用域有效
使用机制: 越明确越优先,即先在自己的作用域找,找不到以次往f父作用域上找(全局也找到不到报错)
赋值机制:优先在自己作用域内查找,找不到就往父作用域上找还不到也不会报错 ,因为由于两种定义变量的方式存在(如定义变量可以 a = 10 这样定义) ,将会在全局作用域(windows)定义一个变量

3.4 作用域的预解析

全局下先预解析
局部的预解析只有在调用的时候才会预解析
(由于函数是单独进行预解析,因此是参数传递在前,预解析在后)

事件

常见的事件

click 点击事件

当用户点击了html元素得时候,会触发该事件

mouseover 鼠标覆盖事件

当鼠标移动到元素上面时

mouseout 鼠标离开事件

当鼠标从元素上离开时

focus 获得焦点事件

当获得焦点时触发

blur 失去焦点事件

失去焦点事件

load 加载事件

当元素被加载时触发, 如js中可用浏览器对象 window.onload

函数和元素结合:

函数还可以当作一个页面元素的事件处理函数
当页面的某个元素触发行为时,执行某个函数
语法:元素.onclick = 函数名或元素.onclick = function (){}

页面元素的简单操作

在一个页面里,标签的id名(只有id可以),可以直接当成一个变量来使用

这个元素就代表这个标签

<!DOCTYPE html>
<!-- 
    函数还可以当作一个页面元素的事件处理函数
    当页面的某个元素触发行为时,执行某个函数
页面元素的简单操作
    在一个页面里,标签的id名(只有id可以),可以直接当成一个变量来使用
    这个元素就代表这个标签 
	-->
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<body>
		<div id="box">
			点击试试
		</div>
		<input id="frist"/>
		+
		<input id="second" />
		<button id="but">=</button>
		<input id="res" disabled="disabled"/>
	</body>
	<script type="text/javascript">
		console.log(box);
		box.onclick = function(){
			console.log('我是一个事件处理函数');
		}
		but.onclick = function(){
			var resule;
			resule = (Number(frist.value)+Number(second.value)) ; //注意:从页面拿出来的都是字符串类型
			console.log(resule)
			res.value = resule;
		}
	</script>
</html>

6、引用数据类型详解

对象:承载一堆数据的盒子
函数:承载了一段代码的盒子

1 创建对象的方式

字面量创建

注: 成员以 key:value 的形式表示,并且多个成员用逗号隔开

var o1 = {  //创建对象 o1
    num:100,   //成员 num 的值为 100
    str:"字符串",  //成员 str 的值为 "字符串"
    function f1(){ console.log("我是对象o1的方法")}; //o1的一个方法
}

内置构造方法创建

var o = new Object();

区别:
(1)字面量创建可以直接在里面添加数据,数据以键值对key:value的形式出现,key表示数据名字,value表示值用(,)分隔

2.操作对象语法

增: 向对象添加成员

点语法格式:对象名.成员名 = 值
数组关联语法:对象名["成员名"] = 成员名] = 值

删:删除对象的成员

点语法格式:delete 对象名.成员名
数组关联语法:delete 对象名["成员名"]

改:修改对象的成员

点语法格式:对象名.成员名 = 值
数组关联语法:对象名["成员名"] = 成员名] = 值

查:获取对象的成员

点语法格式:对象名.成员名
数组关联语法:对象名["成员名"]
如果没有此成员,则为undefined

点语法和数组关联语法的区别

数组关联语法成员名可以使用变量和拼接字符串
点语法成员名不能使用变量和拼接字符串
注意:在控制台打印对象时*
->不展开时是当前的样子
->展开后是最终的样子
解决方案: (1)使用对象名.成员名直接获取 (2)使用console.table()的方式打印对象,就会得到当前的值

3. for in循环遍历对象的属性

类似java的增强for 即forearch

var o1 = { 
    num:100,
    str:"字符串",
    fn :function() { console.log("我是对象o1的方法")}
}
for(var key in o1){
    
// console.log(o1[key]);  //遍历value 
console.log(key);    //默认为string类型
}

4. in关键字:判断一个成员判断是否在对象里

语法: "成员名" in 对象名

内置对象:Date

new Date()
Sun Nov 21 2021 00:30:16 GMT+0800 (中国标准时间)

new Date().getFullYear()
2021
//获得月份,注意,月份从0算起
new Date().getMonth() 
10
//date代表日期
new Date().getDate()
21
//day代表星期几
new Date().getDay()
0
//获得时间戳, 全世界统一, 从1970年1月1日 00:00:00 开始到现在的毫秒数
new Date().getTime()
1637425919212
//获得本地时间
new Date().toLocaleString()
'2021/11/21 00:39:40'

7 . JSON

JSON 简介

早期,人们用xml传输

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

在javaScrip 一切皆为对象,任何js支持的类型,都可以用JSON来表示

JSON 格式

对象都用 {}
数组都用 []
都以键值对的形式表示, 即 key: value

JSON 与字符串之间的相互转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSON</title>
	</head>
	<body>
	</body> 
	
	<script type="text/javascript">
        //定义了一个对象
		var user = {
			name:'mm',
			sex : '女' ,
			age : 19, 
		} ; 
		//将对象转换成字符串
		var user_text = JSON.stringify(user) ;
		console.log(user) ; 
		console.log(user_text) ;
		// 将字符串转换成对象
		var user2_text = '{"name":"user2" ,"age":"20","sex":"男"}' ;  //注意!解析的字符串对象名也必须要用引号
		var user2 = JSON.parse(user2_text) ;
		console.log(user2) ;
		console.log(user2_text);
 	</script>
</html>

操作BOM对象(重点)

B: 浏览器 , BOM浏览器模型

浏览器(内核)介绍

IE
Chrome
FireFox
Safair

常用的BOM对象

window对象代表浏览器窗口

screen 代表屏幕尺寸

location 代表当前页面的URL信息

host: "www.baidu.com" 
href: "https://www.baidu.com/"  
portocol: "https"    //协议
reload:f reload()  //刷新页面
location.assign("www.jd.com")  //重定向

doucument 代表当前的页面,HTML,DOM文档树

document.title   //获取当前页面的标题
document.cookie

history

history.back //回退
history.forward //前进

操作DOM对象(重点)

网页就是一个Dom树形结构!

获得dom节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作dom对象</title>
	</head>
	<body>
		<div id="father">
			<h1>标题1</h1>
			<p id="p1">p1</p>
			<p class="p2">p2</p>
		</div>
		
	</body>
	<script type="text/javascript">
	//对应CSS的选择器
		var h1 = document.getElementsByTagName("h1");  //根据标签名
		var p1 = document.getElementById("p1");
		var p2 = document.getElementsByClassName("p2") ;
		var father = document.getElementById("father") ; 
		//获取所有子节点
		var childrens = father.children; 
	</script>
</html>

更新dom节点

<div id = "id1">

</div>
<script>
var id1 = document.getElementById("id1");  //首先获得节点 	
id1.innerText  = “文本内容” ; //  修改文本的值,会把之前的文本内容清除,不可解析html标签
id1.innerHTML = “文本内容” ; //  修改文本的值,与上面的唯一区别是可以解析html标签
</script>

remove 删除节点

由于指针不能指向自己,所以要删除一个节点,必须要先获得父节点,再通过父结点来删除

注意:删除结点是动态的(即当删除第一个子节点的时候,原来的第二个子节点就变成了现在的第一个子结点)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除结点</title>
	</head>
	<body>
		<div id="father1">
			<h6 id="ch1">子结点</h6>
			<h6 id="ch2">子结点</h6>
			<h6 id="ch3">子结点</h6>
			<h6 id="ch4">子结点</h6>
		</div>
			
		<!-- JS -->
		<script type="text/javascript">
			var f = document.getElementById("ch1").parentElement;
            // 以下操作是错误的,动态删除
			f.removeChild(f.children[0]) ; 
			f.removeChild(f.children[1]) ; 
			f.removeChild(f.children[2]) ; 
		</script>
	</body>
</html>

append 追加结点

在document结点后面添加结点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
			
		</style>
	</head>
	<body>
		<div id="father">
			<h4 id ="java">java</h4>
			<p id="se">javaSE</p>
			<p id="ee">JavaEE</p>
			<p id="me">javaME</p>
		</div>
		
		<!-- JS -->
		<script type="text/javascript">
			var new_p = document.createElement('p') ; //获得p标签结点
			new_p.id = 'new_p';  //设置属性值
			new_p.innerText = "hello java!";
			father.append(new_p);
			
			var body = document.getElementsByTagName("body") ;
			var style = document.createElement("style") ;
			//style.setAttribute("type","text/css") ;  //设置属性值,其中参数 key,vaule,也可以用下面的方式 
            style.type = 'text/css'   
			style.innerHTML = 'body{background-color:pink }' ;
			document.getElementsByTagName("head")[0].appendChild(style);
		</script>
	</body>
</html>

insert 插入结点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
			
		</style>
	</head>
	<body>
		<div id="father">
			<h4 id ="java">java</h4>
			<p id="se">javaSE</p>
			<p id="ee">JavaEE</p>
			<p id="me">javaME</p>
			<button type="button" onclick="apend_p">追加元素</button>
			<button type="button" onclick="apend_style">追加样式</button>
			<button type="button" onclick="insert_java">插入元素</button>
		</div>
		
		<!-- JS -->
		<script type="text/javascript">
		function apend_p(){// 追加p元素
			alert("nihao!") ;
			var new_p = document.createElement('p') ;
			new_p.id = 'new_p';
			new_p.innerText = "hello java!";
			father.append(new_p);
		}
		function apend_style(){
		//追击style元素
		var body = document.getElementsByTagName("body") ;
		var style = document.createElement("style") ;
		//style.setAttribute("type","text/css") ;  //设置属性值
		style.type = 'text/css'
		style.innerHTML = 'body{background-color:pink }' ;
		document.getElementsByTagName("head")[0].appendChild(style);	
		}
		
		function insert_java(){
		// 插入p元素
			var java = document.getElementById("java") ;
			var js = document.createElement("p") ;
			js.id = 'js' ;
			js.innerText = "javaScript" ;
			var father = document.getElementById("father") ;
			father.insertBefore(js,java) ;
						
		}	
		</script>
	</body>
</html>

当拿到结点document结点(id也能直接进行操作)后,我们可以进行一下操作

操作文本

id1.innerText = “文本内容” ; 修改文本的值,会把之前的文本内容清除,不可解析html标签

id1.innerHTML = “文本内容” ; 修改文本的值,与上面的唯一区别是可以解析html标签

操作CSS(更改样式)

p1.style.color = "red" ;  //修改颜色
p1.style.fontSize = 12em ; //修改字体大小

操作表单(验证表单)

注:可以通过添加 required 属性使文本框变为必填项,不填写就提交会有提示,表单里的input标签,一定要有name属性才能发送到后台

获得表单的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS操作表单</title>
	</head>
	<body>
		<form action="" method="post">
         <!-->可以通过添加 required 属性使文本框变为必填项,不填写就提交会有提示<-->
		用户名:	<input type="text" id="uid"  required/> <br> 
		密码:　<input type="password" id="pwd" name="pwd" required/>  <br>
			
	
	<input type="radio" name="sex" id="sex_m" value="男" />男
	<input type="radio" name="sex" id="sex_w" value="女" />女
	
	<br>
	<br>
	<br>     
	<input type="submit" value="确定"/>
		</form>
	</body>
	<script type="text/javascript">
		var uid = document.getElementById("uid") ;
		var pwd = document.getElementById("pwd") ;
		var sex_m = document.getElementById("sex_m");
		var sex_w = document.getElementById("sex_w") ;
		//可通过 uid.value 获得文本框的值,同理也可以通过这种方式修改值
        //单选框 可通过 sex_m.checked = true 则表示被选中,否则就是没选中来判断
	</script>
</html>

表单数据加密(md5)以及提交验证

表单中的onsubmit 属性:用于提交验证,如果事件函数返回true,则提交,反之不提交,注意还要写一个return,并且默认为true

此外,在提交表单时容易被人抓包发现表单的数据,,因此我们需要对表单数据进行加密

如下代码对表单进行了加密

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>提交表单</title>
	</head>
	<body>
		<!-- 引入md5.js 工具包 -->
		<script src="MD5_js/md5.js" type="text/javascript" charset="utf-8"></script>
<!-- onsubmit 属性:表单提交验证,如果事件函数返回true,则提交,反之不提交,注意还要写一个return,并且默认为true -->
		<form action="#" method="post" onsubmit="return ff2()">
			<p>
			用户名:	<input type="text" id="username" name="username" value="" />
			</p>
			<p>
			密码:	<input type="password"  id="pwd" name="password" />
			</p>
			<!-- 通过按钮绑定事件 -->
			<!-- <button type="button" onclick="ff()">提交</button> -->
			<input type="submit" value="提交" name="ok" />
		</form>
		<script type="text/javascript">
			function ff(){
				
				var uid = document.getElementById("username") ;
				var pwd = document.getElementById("pwd") ;				
				console.log(uid.value);
				console.log(pwd.value);	
			}
			function ff2(){
				alert("2")
				var uid = document.getElementById("username") ;
				var pwd = document.getElementById("pwd") ;
				//md5加密
				pwd.value = hex_md5(pwd.value) ;
				return true ;
			}
		</script>
		
	</body>
	
</html>

由于直接对密码框进行密文赋值,会导致密码框在提交的一瞬间变长,不能提升用户体验,所以我们可以采用一个隐藏密码框来进行赋值传输

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>提交表单</title>
	</head>
	<body>
		<!-- 引入md5.js 工具包 -->
		<script src="MD5_js/md5.js" type="text/javascript" charset="utf-8"></script>
		<!-- onsubmit 属性:表单提交验证,如果事件函数返回true,则提交,反之不提交 -->
		<form action="#" method="post" onsubmit="return ff2()">
			<p>
			用户名:	<input type="text" id="username" name="username" value="" />
			</p>
			<p>
			密码:	<input type="password"  id="input_pwd" name="input_pwd" />
			</p>
			<!-- 隐藏密码框 -->
			<div id ="hidden_pwd" >
				<input type="password" hidden="hidden"  id="pwd" name="password"/>
			</div>
			<!-- 通过按钮绑定事件 -->
			<!-- <button type="button" onclick="ff()">提交</button> -->
			<input type="submit" value="提交" name="ok" />
		</form>
		<script type="text/javascript">
			function ff(){
				
				var uid = document.getElementById("username") ;
				var pwd = document.getElementById("pwd") ;				
				console.log(uid.value);
				console.log(pwd.value);	
			}
			function ff2(){
				alert("2")
				var uid = document.getElementById("username") ;
				// 明文密码框
				var input_pwd = document.getElementById("input_pwd") ;
				// 获得隐藏密码框结点
				var pwd = document.getElementById("pwd") ;
				//md5加密
				pwd.value = hex_md5(input_pwd.value) ;
				input_pwd.value = " " ;
				return true ;
			}
		</script>
		
	</body>
	
</html>

__EOF__

本文作者：南城小友
本文链接：https://www.cnblogs.com/lqy-blogs/p/16161908.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！

posted @ 2022-04-18 20:06 南城小友阅读(78) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· jQuery

· JSON的转换,在Java和JavaScript

· JavaScript学习

· JavaScript

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

JavaScript

发表于 2022-04-18 20:06阅读：78评论：0推荐：0

大前端小岛专用

关注

跳至底部

昵称：南城小友
园龄： 3年10个月
粉丝： 5
关注： 4

+加关注

随笔分类 (50)

随笔档案 (34)

阅读排行榜

评论排行榜

1. Vue脚手架报错 Component name "Student" should always be multi-word vue/multi-word-component-names(13)

搁 浅

只要你不失去你的崇高,整个世界都会为你敞开 !

JavaScript

1、初识JavaScript

三大核心

书写位置

输出语法

1.alert():

2.console():

3.document.write()

2、变量与数据类型

2.1定义变量

2.2数据类型

Number 数值

Undefined 空(未定义)

Null 空

String 字符串

模板字符串:

常用方法:substring 截取字符串

Boolean 布尔值

引用数据类型

Object

Function

typeof检测数据类型

关键字typeof(以String类型返回)

数据类型转换

Number类型

1. Number()

2. parseInt() 取整,依次转换

3.parseFloat() 比parseFloat()多认识一个小数点

4. 非加法数学运算

String类型

1. Stirng()

2. toString()

3. + 与java同样的字符串链接符

Boolean 类型

Boolean()

3、运算符号

1.数学运算符

2.比较运算符号

3.逻辑运算符号

4.if语句

5.switch语句

4、函数

4.1 定义函数

声明式定义:

赋值式定义:

4.2 函数调用

声明式定义函数和赋值式定义的调用的区别

4.3 函数参数

实参和形参不对应的情况也不会报错

4.4 arguments(参数数组)

arguments的属性:

1.预解析

1.1 var 声明变量

1.2 定义函数

2.当预解析时函数与变量同名

2.1 预解析的最高级

2.2 优先级

3. 作用域

3.1 全局作用域

3.2 局部作用域(也叫私有域)

3.3 变量的三个机制

3.4 作用域的预解析

事件

常见的事件

函数和元素结合:

页面元素的简单操作

6、引用数据类型详解

1 创建对象的方式

2.操作对象语法

增: 向对象添加成员

删:删除对象的成员

改:修改对象的成员

查:获取对象的成员

点语法和数组关联语法的区别

3. for in循环遍历对象的属性

4. in关键字:判断一个成员判断是否在对象里

内置对象:Date

7 . JSON

搁浅