在网页中添加新的HTML,修改网页已有内容和网页的样式
记住客户端的数据
.......
hello word(script标签)
<body>
<script type="text/javascript">
alert("hello word")
</script>
</body>
<!--html--><script src="./入门.js"></script>
<!--html--->
alert("hello word");
<!--js--->
数据类型:
1.number
- 整数 123
- 小数 123.1
- 科学计数法 1.23e3
- 负数 -33
- NaN not a number
- Infinity 表示是无限大
2.字符串类型 （单引号或双引号）
- 'abc' "abc"
转义字符\
多行字符的编写 反引号包裹
<script>
var msg=
'你好
hello
世界
word
'
</script>模板字符${}
let name="xiaomiing";
let age=7;
let msg='你好,我叫${name},今年${age}岁.'
字符串长度 str.length
字符串的可变性 JS中字符串是不可变的!
通过下标获取字符串中的元素
大小写如何让转换
- 转大写 toUpperCase()
- 转小写 toLowerCase()
方法!不是属性
获取下标 indexOf('')
截取字符串 substring
substring(x,y)截取时包含x,不包含y
3.布尔值
- true false
4.&&
||
|
5.=符号
=不是等于!赋值
==等于,类型不一样,值是一样的,结果也为true
1=='1'
===等于,类型同,执意要,结果才为true
NaN===NaN
浮点数精度问题
6.null和underfined
空
未定义
7.数组（可以包含任意的数据类型）
var arr=[1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello',null,true);通过下标来取值和赋值
数组长度 arr.length
假设给arr.length赋值，数组的长度大小就会发生变化，调用未赋值的元素结果为undefined，但是如果赋值过小，就会造成元素丢失
通过元素来获得下标索引 indexof（）
截取数组slice（），与字符串中substring是相似的，返回一个新的数组
尾部操作 push（）压入元素 到尾 部pop（）弹出尾部的一个元素
头部操作 unshift（）压入元素到头部shift（）弹出头部的一个元素
排序 sort（）
元素反转 reverse（）
拼接 concat（）并不会修改数组，只是会返回一个新的数组
连接符 join 打印拼接数组，使用特定的字符串
多维数组
<script>
var arr =[[1,2],[3,4],["5","6"]];
</script>8.对象{} (由若干个键值对组成的)
var person={
name:"xaioming",
age:3,
tags:['js','java','web']
}定义对象
var 对象名={
属性名：属性值，
属性名：属性值，
属性名：属性值
}
在js中，{.....}来表示一个对象，用键值对描述属性，多个属性之间使用逗号隔开，最后一个属性不加逗号！
对象属性的赋值 person.name="xiaohong "
使用一个不存在的对象属性，不会报错，返回underfined
动态的删减属性 delete person.phone
动态的添加 直接给新的属性添加值即可 person.say="haha"
判断属性是否在对象中 in ‘age’ in person
判断是否是这个对象自身拥有的属性 has OwnProperty person.hasOwnProperty('age')
JS中所有的键都是字符串，值都是任意对象
分支和循环
if判断
if（score>=60）{
alert("过了")；
}else if（score<60&&score>0）{
alert("挂科")；
}else{
alert（"重修"）；
}
while 避免死循环
while（i<100）{
i=i+1;
console.log(i);
}
do{
i=i+1;
console.log(i);
}while(i<100)区别：do-while一定会执行一次，while是先判断，又可能会不执行。
for 循环
for（let i=0；i<100;i++）{
console.log(i);
}forEach循环（5.1引入的特性）通过函数
var arr=[1,12,3,23,4]
arr.forEach(function(value)){
console.log(value);
}
for in循环 注意：index是索引而不是数组中的具体元素
for(var index in object){}
var arr=[1,12,3,23,4]
for(var num in arr){
console.log(arr[num]);
}
map和set ES6的新特性
（1）map
var map=new Map（['tom',100],['jack',90],['peter',80]）
var name1=map.get('tom');//通过key来获得value
map.set('devid',60)//新增或修改
map.delete('tom')//删除（2）set（无序不重复的集合）
添加set.add()
删除set.delete()
是否包含某个元素set.has()
iteratord迭代器
for in只能用来下标遍历
for of
var arr=[3,4,5];
for (let x of arr){
console.log(x);
}
3.函数
定义和参数的获取
以创建绝对值函数为例
定义函数
方式一
function abs（x）{
if（x>=0）
return x;
}else{
return -x;
}
}方式二
var abs=function（x） {
if（x>=0）
return x;
}else{
return -x;
}
}function（x）{....}这是一个匿名函数，但是它可以把结果赋值给abs，通过abs就可以调用函数
fab（10）
fab（-10）
参数问题：JS可以传人一个参数，也可以不传递参数
参数进来是否存在问题，又如何解决？
假设不存在参数的时候如何规避？
function abs（x） {
//手动抛出异常来进行判断
if（typeof x！==‘number’）{
throw ‘Not a number’；
}
if（x>=0）{
return x;
}else{
return -x;
}
}arguments
是JS免费送的关键字。能获取传递进来的所有参数，是一个类组数
function abs（x） {
console.log("x=>"+x);
foe(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
if（x>=0）{
return x;
}else{
return -x;
}
}
问题：arguments包含了所有的参数，但是有时候对多余的参数进行附加操作，需要排除已有的参数
rest：es6引入的新特性，获取已经定义的参数之外的所有参数
以前
if (arguments>2){//定义了两个参数
for(var i=2;i<arguments.length;i++){}
}现在
function(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
必须写在最后面 必须加..标识
变量的作用域
在JS中，var定义变量实际是又作用域的
| 假设在函数体中声明变量，在函数体外不可使用
（团包可以实现）
function f(x){
var x=1;
}
x=x+1;//Uncaught ReferenceError： x is not defined|| 如果两个函数有相同的变量名,只有在函数内部，就不会冲突
function f(x){
var x=1;
}
function f2（x）{
var x='A';
}
||| 内部函数可以访问外部函数，反正，外部函数不可以访问内部函数
|V 假设内部函数变量和外部函数变量重名;
JS 中函数查找是从自身函数开始，由“内”向“外”查找，假设外部存在同名的变量，屏蔽外部函数的变量，外部函数不可以访问内部函数
提升变量的作用域
function f(){
var x="x"+y;
console.log(x);//x undefined
var y="y";
}
js执行引擎，自动提升y的声明，但不会提升y的赋值
本质：
function f(){
var y；
var x="x"+y;
console.log(x);//x undefined
y="y";
}规范：所有变量的定义都放在函数头部
全局变量
全局对象window
var x="xxx"
window.alert(window.x);
默认所有的全局变量，都会自动绑定在window对象下
alert（）自身（函数本身）也是一个window下的变量
var old_alert=window.alert();
window.alert=function(){
}
window.alert(123);
//恢复
window。alert=old_alert;
window.alert(456);
JS实际上只有一个全局作用域，任何变量（函数也可以视为变量）,假设没有在函数作用范围内找到，它就会向外宣战，如果在全局作用域没有找到，就会报错ReferenceError
规范：全局变量都会绑定window上，如果不同的js文件，使用相同的全局变量，会产生冲突
减少冲突：
//唯一全局变量
var pen={}
pen.name="xiaoh";
pen.add=function(a,b){
return a+b;
}
把代码全部放在定义的唯一空间名，降低全局命名冲突问题
jQuery库把所定义的全部放到jQuery中，并用简化符$（）
let和const
局部作用域let
function aa（）{
for(var i=0;i<100;i++){
console.log(i);
}
console.log(i+1)//101
}
问题：i出了for循环只会还可以使用
ES6中let关键字，解决局部作用域的冲突问题
function aa（）{
for(let i=0;i<100;i++){
console.log(i);
}
console.log(i+1)//Uncaught ReferenceError：i is not defined
}
常量 const
在ES6之前，怎么定义厂里 代谢儿子们
var PI=‘3.14’//但是值其实是可以修改的
const PI=‘3.14’
PI=‘123’//Uncaught ReferenceError：i is not defined方法的定义和获取
函数放在对象里面 对象：方法、属性
var xiao={
name:"xiaohong";
birth:2001，
age:function(){
var now=new Date().getFullYear();
return now-this.birth;
}
}调用方法：
一定要带（）
this代表什么？
var xiao={
name:"xiaohong";
birth:2001，
age:function(){
}
function getAge（）{
var now=new Date().getFullYear();
return now-this.birth;
}
getAge（）//NaN，单独调用，使用的是window作为对象，没有birth属性
apply 可以控制this的指向的
getAge.app;y(ming.[])//this指向了ming。参数是空的
内部对象
标准对象：number、string、boolean、object、function、undefined
null不是对象
1）Date日期对象
基本使用：
var now=new Date（）；
now.getFullYear();//年
now.getMonth();//月 用0~11来表示
now.getDate();//日
now.getDay（）；//星期
now.getHours（）;//时
//.....now.getTimes();//时间戳，全世界第一，从1970.1.1 00：00：00到现在此刻的毫秒数
console.log(new Date(now.getTime)())；//时间戳转化为时间
now=new Date(now.getTime())
now.toLocaleString();//本地时间 “.....”
now.toGMTString()；//标准时间2）JSON对象
json？ 轻量级的数据交换格式
早期、习惯数据传输使用xml文件
简洁清晰的层次结构
提供网络传输效率
在js中，玩玩皆对象，任何JS类型都可以用JSON来表示
格式：对象{} 数组【】 键值对：key：value
JSON字符串和JS对象的转换
var user={
name:"xiaoen",
age:3,
sex:'男'
}
var jsonUser=JSON.stringify(user);//对象转换为JSON字符串
var user={
name:"xiaoen",
age:3,
sex:'男'
}
var jsonUser=JSON.stringify(user);//对象转换为JSON字符串
var obj=JSON.parse('{"name":"xaioen","age":3,"sex":男}')；//json字符串转化为对象
它时一种数据传输格式，会用Java去生成它并解释它，前端只要 去读它就可以了，因为它要在后端生成，通过后端给前端传一个JSON，前端单独写它没有什么意义
Ajax：
元素的js 异步请求
jQuery封装好的 $(“name”).ajax("")
axias请求
面向对象编程
类：模板 对象：具体实例
var student={
name:"xues",
age:7,
run:function(){
console.log(this.name+"run")；
}
}；
var xiaom={
name:"xiaom"
};
xiaom._proto_student;
class 继承
//父类
class student{
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
//子类 小学生类继承父类学生类
class xiaostudent extends student{
constructor(name,grade){
super(name);//实现父类的名字
this.grade=grade;
}
myGrade(){
alert('我是一个小学生')
}
}操作BOM对象
1）咯哦iu篮球 BOM：浏览器对象模型
JS与浏览器的关系：JS的但是就是伪类让它在浏览器运行
常见的浏览器：ie 6~11 Chrome Safari FireFox
第三方浏览器
2）window 代表浏览器的窗口
弹窗 window.alert
内部高度 window.innerHeight
内部高度 window.innerWidth
外部高度 window.outerHeight
外部高度 window.outerWidth
3） navigator 封装了浏览器的信息
应用名 navigator.appName
浏览器版本 navigator.appVersion
用户信息 navigator.userAgent
系统版本 navigator.platform
不建议使用，因为会被人为修改
4）screen 代表屏幕尺寸
屏幕宽度 screen.width
屏幕高度 screen.height
5)location 代表当前页面的URL信息 百度
主机 host www.baidu.com
当前指向的位置 href https：//www.baidu.com 用来跳转网页
协议 protocol https
重新加载 reload：f reload() 刷新网页
设置新的地址 location.assign()
6)document 代表当前页面 DOM树
页面标题 document.title
能获去文档树结点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE<dd>
</dl>
<script>
var dl=document.getElementById('app')
</script>获取cookie document.cookie
劫持 cookie原理
服务器端可以设置cookie：httpOnly，来保证安全性
7）history代表浏览器的历史纪录
前进 history.forward()
后退 history.back()
7.操作DOM对象
浏览器网页就是DOM树形结构
更新、遍历、删除、添加
要操作首先要获得
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
