ECMAScritp与JavaScritp
- ECMAScript可以理解为JavaScript的一个标准
- JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言
注意：大部分浏览器还只停留在支持ES5代码上，但是目前ECMAScript已经更新到ES6了，这就导致开发环境与线上环境不一样，这个时候需要使用专业的打包工具进行转换
Javascript 使用方式与位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. scritp标签里面写javascript;type默认是javascript -->
<!-- <script type="text/javascript">-->
<!-- alert('hello javascript');-->
<!-- </script>-->
<!-- 3. 外部引入-->
<script src="../js/c.js"></script>
</head>
<body>
<!--2. 这里也可以写script 标签-->
<!--<script>-->
<!-- alert('hello javascript');-->
<!--</script>-->
</body>
</html>IDEA环境设置
Settings->Languages & Frameworks->JavaScript版本设置为ECMAScript 6
浏览器控制台基本使用
数据类型
number
<script>
// javaScript 严格区分大小写
//定义变量
var num=0;
var Num=1.1;
//js不区分小数和整数,用number声明,如果抛出未NAN,表示不是数字，Infinity表示是无穷大
console.log('数字相加'+(num+Num));//1.1
//number 数字类型, typeof() 可以判断数据类型
console.log('num类型:'+typeof(num) );//number
</script>字符串–（'${str}'）模板字符串
<script>
// ''与"" 都表示字符串
var str='cxe';
var str1="cxe";
console.log(typeof(str)+typeof(str1));
// 多行字符串编写,tab键上的`` 来包裹
var str3=`
hello
cxe
`;
console.log(str3);
// 模板字符串 tab键上的`` 来包裹${变量}
console.log(`${str}`);
// 字符串长度不可变
console.log(str.length);
//字符串长度不可变
str[0]='1';
console.log(str);//cxe
console.log(str.toUpperCase());//转大写，但是不改变str CXE
// str.toLowerCase() 转小写
console.log(str);//cxe
//查询， 如果str中存在，返回具体的索引位置，否则就返回-1
console.log(str.indexOf('c'));
//截取字符串 [)包头不包尾 但是不改变str
console.log(str.substr(0,2));
console.log(str);
</script>等于、绝对等于、NaN
<script>
// 布尔值与逻辑运算与java一致
let str=1;
let str2='1';
let str3='1';
let str4=NaN;
// == 等于 (类型不一样，值一样) 避免使用
// ===绝对等于 (类型一样，值一样)
console.log(str==str2);//true
console.log(str3==str);//true
console.log(str===str2);//false
console.log(str3===str);//false
console.log(typeof(str4));//undefined
console.log(str4==NaN);//false
console.log(str4===NaN);//false
// NAN只能通过 isNAN来判断，不能通过NAN===NAN,因为NAN与所有的数包括他本身都不相等
console.log(isNaN(str4));//true
</script>浮点数存在精度问题
<script>
let num1=1/3;
let num2=1-2/3;
console.log(num1===num2);//false
// 浮点数计算会出现精度问题
console.log(Math.abs(num1-num2)<0.0000001);
</script>null与undefined
- null的类型是一个对象，用来表示一个变量没有任何数值，而undefined是指变量没有定义任何值。
- undefined与null不同，它表示无值的意思，并且具有独一无二的类型，它区别任何对象、数组、数值、字符串和布尔型。alert(typeof(undefined))的返回值为undefined。
数组
<script>
// 可以包含任意的数据类型
let arr=[1,'1',null];
//长度
console.log(arr.length);//3
//从0开始,数组下标越界就是undefined
console.log(arr[3]);//undefined
// arr.length 长度,如果给arr.length赋值，数组大小就会发生变化
arr.length=5;
console.log(arr);//[1, '1', null, empty × 2]
console.log(arr.length);//5
// 如果赋值过小，就会丢失数据
arr.length=2;
console.log(arr);//[1, '1']
// slice() 是用于截取数组的[)
console.log(arr.slice(0,1));
console.log(arr);
//向尾部压入数据
arr.push('a');
console.log(arr);
//弹出尾部数据
arr.pop();
console.log(arr);
//向头部压入数据
arr.unshift('a');
console.log(arr);
//弹出头部数据
arr.shift();
console.log(arr);
//排序
arr.sort();
console.log(arr);
// 元素反转
arr.reverse();
console.log(arr);
//array.concat() 拼接 ，并没有修改数据，只是返回一个新数组
console.log(arr.concat(['a','b']));
console.log(arr);
//使用特定的字符串来打印拼接数组
console.log(arr.join('-'));
console.log(arr);
// 二维数组
let arr2=[['a','b'],['v']];
console.log(arr2);
console.log(arr2[0][1]);//b
</script>对象
<script>
// 对象
let person={
name:'cx',
age:12,
hobby:['study','eat']
}
console.log(person);
//取值
console.log(person.name);
console.log(person.hobby[1]);
// 动态删选属性 delete 对象.属性
delete person.hobby[1];//删除eat就不存在了,但空间存在
console.log(person);
delete person.age;//删除name就不存在了
console.log(person);
// 动态添加属性 person.hobby=['study','sleep']
person.hobby=['study','sleep'];
console.log(person);
//特别注意：此时从上往下，整个person里面都是hobby=['study','sleep']
// 判断属性值是否存在这个对象中 'study' in person
console.log('study' in person);//false
console.log('hobby' in person);//true
// 'toString' in person 返回true,继承
console.log('toString' in person);//true
// 那如果判断一个属性是否自身拥有，person.hasOwnProperty('toString') 返回是false
console.log(person.hasOwnProperty('toString')); //false
</script>严格检查模式
<script>
//放在第一行
//严格检查模式，预防javascript的随意性导致产生的一些问题
'use strict';
// 定义局部变量
let a;
</script>let 定义局部变量
循环
<script>
// if,while,for与java一致
let arr=[3,2,1];
for (let x of arr){
console.log(x);
}
console.log('-----------------');
// forEach循环
arr.forEach(function (value){
console.log(value);
})
console.log('-----------------');
//num is index
for (let num in arr){
if(arr.hasOwnProperty(num)){
console.log(num+':'+arr[num]);
}
}
// 不建议使用for in ,建议使用for of
</script>Map与Set \ iterator接口 (ES6新特性)
<script>
// ES6 新特性 Map
let map=new Map([['cxe',100],['cx',99]]);
// 通过key获取value
let let1 = map.get('cx');
console.log(let1);
// 新增 第一次出现是
map.set('xc',120);
console.log(map);
//修改 已近存在
map.set('xc',150);
console.log(map);
// 删除
map.delete('xc');
console.log(map);
// ES6 新特性Set 无序不重复集合
let set = new Set([1,2,4,5,'5',5]);//自动去掉一个5
console.log(set);
// 添加
set.add(1);//添加不进去
set.add('1');
console.log(set);
// 删除
set.delete(1);
console.log(set);
//是否包含某个元素
console.log(set.has(1));
//对实现； iterator接口的数据结构赋值
let [x,y]=set;
console.log({x,y});
let [first,...rest]=set;
console.log({first, rest});//first是第一个，rest是后面所有遍历的形成一个数组
</script>函数
<script>
console.log(abs(2));//ok
//1. 函数
function abs(x){
return x;
};
let abs2=function(x){
return x;
};
console.log(abs(1));//ok
console.log(abs2(3));//ok
console.log('---------------');
// 参数问题： javascript 可以传任意个参数
console.log(abs2(3,2,1));//ok,但后面的值无用
console.log('---------------');
// 2.传递多个参数 arguments,所有传递进来参数的是一个数组
function t2(x){
for (let i=0;i<arguments.length;i++){
console.log(arguments[i]);
};
console.log(x);;
};
t2(0,3,4,5);
console.log('---------------');
//ES6 新特性 rest
function t3(x,...rest){
return x+rest;
}
//rest是一个空数组
console.log(t3(1));
//rest是一个rest[2,3,4]
console.log(t3(1,2,3,4));
console.log('---------------');
//1.不传递参数，异常处理
function t1(x){
if(typeof x !== 'number'){
throw 'not is a number';
}else{
return x;
}
};
console.log(t1("x"));//not is a number
</script>作用域
- 规范：申明都放在第一行
局部变量
<script>
// 局部变量
// 1.函数体内的变量只在函数体内生效
// 2.内部函数可以访问外部函数的变量，反之不行
// 3.如果内外函数重名，函数会由内向外查找，内部变量会覆盖外部变量
function abs(x,y){
let a=2;
let b=3;
let z=function abs2(y){
let b=0;
return y+a+b;
};
console.log(a+z(2));
};
abs(1,2);//6
function abs32(){
let x='x';
console.log(x+y);
let y='y';
}
//结果：xundefine
//原因：js执行引擎，自动提升了y的声明，但是不会提升y的赋值
//等价：
// function abs32(){
// let x='x';
// let y;
// console.log(x+y);
// y='y';
</script>全局变量
<script>
// 全局变量
var x='x';
function abs32(){
console.log(x);
}
abs32();
alert(x);
//默认所有的全局变量都会自动绑定在window对象下
alert(window.x);
//alert 本身也是window的一个变量
window.alert();
//那么：
var old_alert=window.alert;
// 也能达到alert的效果
old_alert(1);
window.alert= function(){};
// 此时被重载了，不能实现之前的功能了
// 说明javascript 实际上只有一个全局作用域
window.alert();//不起作用了
</script>面对全局作用域只有一个的情况下，当多个项目需要用到变量时，都会绑定在window上，如果不同的js文件，使用了相同的全局变量，就会发生冲突？此时如何解决？
<script>
//定义一个唯一的全局变量
var app={};
//定义全局变量
app.name='cxe';
// 把自己代码全部放入自己定义的唯一空间名字中，降低全局变量命名冲突问题
console.log(app.name);
</script>局部作用域
<script>
function abs33(){
for(var i=0;i<2;i++){
console.log(i);
}
console.log(i); //这里还能使用
}
abs33();
// ES6引入let,解决局部作用域冲突问题
function abs34(){
for(let i=0;i<2;i++){
console.log(i);
}
console.log(i); //这里不能使用了
}
abs34();
</script>常量cast（ES6新特性）
<script>
const PI=3.1415926;
console.log(PI);
PI=2;//Assignment to constant variable.
</script>方法
<script>
function getAge(name){
var now=new Date().getFullYear();
return name+':'+(now-this.birth);
};
var per1={
name:'cx',
birth:1998,
age:getAge
};
var per2={
name:'cxe',
birth:1999,
age:getAge
};
//方法就是把函数放进对象里面，对象只有属性和方法
var per3={
name:'cxeq',
birth:2000,
age:function (name){
var now2=new Date().getFullYear();
return name+':'+(now2-this.birth);
}
};
//1. 调用方式
console.log(per1.age(per1.name));
console.log(per2.age(per2.name));
console.log(per3.age(per3.name));
console.log('-------------------------');
//2. 调用方式
console.log(getAge.apply(per1,[per1.name]));
</script>Date对象
<script>
var now=new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 1970 1.1
//时间戳转为时间
var date = new Date(1314115451415);
console.log(date);
var s = now.toLocaleString();//当前时间
console.log(s);
var toGMTString = now.toGMTString();
console.log(toGMTString);
</script>JSON
- JSON:是一种轻量级的数据交换格式
简洁和清晰的层次机构使得JSON成为理想的数据交换语言
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
- 对象都有{}
- 数组都用[]
- 所有都用键值对
<script>
var user={
name:'cx',
age:22,
sex:'男'
};
//对象转json
var jsonString = JSON.stringify(user);
console.log(jsonString);
//json转对象
var parse = JSON.parse(jsonString);
var parse2 = JSON.parse('{"name":"cx","age":22,"sex":"男"}');
console.log(parse);
console.log(parse2);
</script>继承
面向对象原型继承
<script>
var person={
name:'cx',
age:22,
sleep:function (){
console.log(this.name +' sleep') ;
}
}
var student={
name:'cxe',
age:21
}
//原型对象
student.__proto__ = person;
student.sleep();
person.sleep();
</script>Class (ES6新特性)
<script>
class Person{
name;
age;
constructor(name,age) {
this.name=name;
this.age=age;
}
sleep(){
console.log(this.name +' sleep') ;
};
}
let person = new Person('cx',22);
person.sleep();
</script>BOM
- bom 浏览器对象模型
- window 代表浏览器窗口；
- navigator 代表浏览器的信息；
- screen 代表屏幕尺寸；
- location 代表页面的url信息；
- document 当前文档；
- history 历史；
<script>
document.title='cxe';//网页标题
//获取cookie
var cookie = document.cookie;
//为了避免这种情况，服务器端设置cookie : httpOnly
//history 浏览器历史记录
history.back();//后退
history.forward();//前进
//localtion 获取页面的url信息
var host = location.host;
var href = location.href;
var protocol = location.protocol;
location.reload();//刷新网页
location.assign('www.baidu.com');//设置新的地址
//Navigator 封装了浏览器的信息
var appName = navigator.appName;
var appVersion = navigator.appVersion;
var userAgent = navigator.userAgent;
var platform = navigator.platform;
//大多数时候，并不会使用 navigator对象，因为会被人为修改,所以不建议使用这些属性来判断和编写代码;
//screen 代表屏幕尺寸
var width = screen.width;
var height = screen.height;
//window
window.alert('ok');
var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight;
var outerHeight = window.outerHeight;
var outerWidth = window.outerWidth;
</script>DOM
<body>
<p id="t1">cc</p>
<form action="https://www.baidu.com" method="post" id="forms">
<div>
账号：<input type="text" name="name" id="name" class="name"/>
</div>
<div>
密码：<input type="password" name="password" id="password" class="password"/>
</div>
<div>
<input type="submit" name="btn1"/>
<input type="reset" name="btn2"/>
</div>
</form>
<p id="t">cx</p>
<script>
//创建一个新的节点
var htmlParagraphElement = document.createElement('p');
htmlParagraphElement.id='t3';
htmlParagraphElement.innerText='cxc';
//设置属性
htmlParagraphElement.setAttribute('name','add2');
//通过类选择器
var text1 = document.getElementsByClassName('name');//获得的是一个数组
//var pass2 = document.getElementsByClassName('password');
//通过id选择器
//var text1 = document.getElementById('name');
var pass2 = document.getElementById('password');
//通过标签选择器
var elementsByTagName = document.getElementsByTagName('input');
var elementById = document.getElementById('t1');
var elementById2 = document.getElementById('t');
//追加 注意：如果是页面本身有的元素append到另一个页面元素，那么原元素就会消失
elementById2.append(elementById);
//追加 如果不是页面本身有的元素append到另一个页面元素
//是在parendNode节点中 todo 最后一个子节点 后插入新Node
elementById2.append(htmlParagraphElement);
//操作文本
//elementById.innerText='cxe';//修改文本的值
//elementById.innerHTML='<strong>测试</strong>';//解析HTML文本语言
//操作js
var elementById1 = document.getElementById('forms');
//console.log(elementById1);
var parentElement = elementById1.parentElement;
console.log(parentElement);//body标签
parentElement.style.background='red';
//删除节点 ： 需要先获取其父亲节点，再通过父亲节点删除自己
parentElement.removeChild(elementById2);
// 注意： 删除是一个动态的过程
parentElement.removeChild(parentElement.children[0]);
parentElement.removeChild(parentElement.children[1]);//parameter 1 is not of type 'Node'.
//因为删除上一个，下一个就是0
//value 与 valueOf
var object = elementById1.valueOf();//对象的方法
var val = elementById2.value;//对象的属性
</script>
</body>md加密
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
font-weight: bold;
}
</style>
<!-- 如果浏览器console窗口出现警告-->
<!-- 按F12，点击小齿轮(settings)->Preferences->Sources->Enable JavaScript source maps,去掉勾选即可-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<p id="t1">cc</p>
<!--
onsubmit 绑定一个提交检测函数 true false
将这个结果返回给表单，使用onsubmit接受
-->
<form action="" method="post" id="forms" onsubmit=" return click2()">
<div>
账号：<input type="text" name="name" id="name" class="name"/>
</div>
<div>
密码：<input type="password" name="password" id="password" class="password"/>
<input type="hidden" name="password" id="md5-password" class="password"/>
</div>
<div>
<span>性别:</span>
<input type="radio" name="sex" id="boy" value="man"/>
<input type="radio" name="sex" id="girl" value="woman"/>
</div>
<div>
<input type="submit" name="btn1"/>
<input type="reset" name="btn2"/>
</div>
</form>
<p id="t">cx</p>
<script>
//创建一个新的节点
var htmlParagraphElement = document.createElement('p');
htmlParagraphElement.id='t3';
htmlParagraphElement.innerText='cxc';
//设置属性
htmlParagraphElement.setAttribute('name','add2');
//通过类选择器
var text1 = document.getElementsByClassName('name');//获得的是一个数组
//var pass2 = document.getElementsByClassName('password');
//通过id选择器
//var text1 = document.getElementById('name');
var pass2 = document.getElementById('password');
//通过标签选择器
var elementsByTagName = document.getElementsByTagName('input');
var elementById = document.getElementById('t1');
var elementById2 = document.getElementById('t');
//追加 注意：如果是页面本身有的元素append到另一个页面元素，那么原元素就会消失
elementById2.append(elementById);
//追加 如果不是页面本身有的元素append到另一个页面元素
//是在parendNode节点中 todo 最后一个子节点 后插入新Node
elementById2.append(htmlParagraphElement);
//操作文本
//elementById.innerText='cxe';//修改文本的值
//elementById.innerHTML='<strong>测试</strong>';//解析HTML文本语言
//操作js
var elementById1 = document.getElementById('forms');
//console.log(elementById1);
var parentElement = elementById1.parentElement;
console.log(parentElement);//body标签
//parentElement.style.background='red';
//删除节点 ： 需要先获取其父亲节点，再通过父亲节点删除自己
parentElement.removeChild(elementById2);
// 注意： 删除是一个动态的过程
//parentElement.removeChild(parentElement.children[0]);
//parentElement.removeChild(parentElement.children[1]);//parameter 1 is not of type 'Node'.
//因为删除上一个，下一个就是0
//value 与 valueOf
var object = elementById1.valueOf();//对象的方法
var val = elementById2.value;//对象的属性
function click2(){
alert(1);
//获取单选框的值
var elementById3 = document.getElementById('boy');
var elementById4 = document.getElementById('girl');
var elementById5 = document.getElementById('md5-password');
//1. 进行md5加密 这种直接修改原本文本值，会导致在提交的一瞬间，页面密码长度突变
//pass2.value=md5(pass2.value);
//2.
elementById5.value=md5(pass2.value);
if (elementById3.checked){
console.log(elementById3.value);
}else if(elementById4.checked){
console.log(elementById4.value);
};
alert(1);
return true;
}
</script>
</body>
</html>JQuery
记住一个公式： $(selector).action()
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
