JavaScript知识点（下）-阿里云开发者社区

四.函数

1.定义函数

绝对值函数

定义方式一

function abs(x){
    if(x>=0){
        return x;
    }else{
         return -x;
      }
}

一旦执行到return代表函数结束,返回结果！

如果没有执行return，函数执行完也会返回结果,结果为undefined

定义方式二

var abs = function(x){
    if(x>=0){
          return x;
      }else{
          return -x;
      }
}
//function(x){......}  匿名函数，可以把结果赋值给abs通过abs可以调用函数

2.调用函数

js可以传递任意个参数，也可以不传递参数

规避不参在参数问题

//手动抛出异常
var abs = function(x){
    if(typeof x!== 'number'){
        throw 'Not a Number'
    }
    if(x>=0){
          return x;
     }else{
          return -x;
     }
}

arguments

arguments是JS免费赠送的关键字；代表传递的所有参数是一个数组

var abs = function(x){
    console.log("x=>"+x)
    for(var i=0;i<arguments.length.i++){
        console.log(arguments[i]);
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

问题：arguments包含所有参数，不能排除已有参数

rest

ES6引入的新特性,获取除了已经定义的参数之外的所有参数

function text(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}
//rest参数只能写在最后面，必须用...标识

3.变量作用域

在JS中，var定义变量实际是有作用域的。

假设在函数体声明，则在函数体外不可以使用（非实现的话，可以研究一下闭包）

function add(){
   var x=1;
   x=x+1; 
}
x=x+2;  //Uncaught ReferenceError: x is not defined

如果两个函数是用来相同的函数名，只要是在函数内部，就不冲突

function add(){
   var x=1;
   x=x+1; 
}
function add1(){
   var x=1;
   x=x+1; 
}

内部函数可以访问外部函数的成员，反之不行

function add(){
    var x=1;
    fuction add1(){
        var y=x+1;  //2
    }
    var z=y+1;    //Uncaught ReferenceError: y is not defined
}

养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护

全局函数

x=1;
function f(){
    console.log(x);
}
f();
console.log(x);

全局对象window

var x='xxx';
alert(x);
alert(window.x);
//alert()这个函数本身也是一个window变量

规范

由于我们所有的变量都会绑定到我们的window上,如果不同的JS文件，使用了相同的全局变量，如何能够减少冲突

//唯一全局变量
var ChenStudy = {};
ChenStudy.name='chen';
ChenStudy.add = function(a,b){
    return a+b;
}

把自己的代码放入自己定义的空间名字中，降低全局命名冲突问题

jQuery

局部作用域 let

function abc(){
    for(var i=0;i<100;i++){
        console.log(i)
    }
    console.log(i+1);  //问题：i出了作用域还能够使用
}

ES6 let关键字，解决了局部作用域冲突问题

function abc(){
    for(let i=0;i<100;i++){
        console.log(i)
    }
    console.log(i+1);  //Unacught ReferenceError: i is not defined
}

建议使用let定义局部作用域

常量 const

const PI = '3.14';
console.log(PI);
//PI = '123';

4.方法

定义方法

对象：属性和方法

var fangfa = {
    name: 'chenstudy',
    birth: 2000,
    //方法
    age:function(){
    var now = new Date().getFullYear();
    return now-this.birth;
    }
}
//属性
chenstudy.name
//方法，一定要带()
chenstudy.age()

this默认指向调用它的那个对象

apply

在js中可以控制this指向

function  getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
    }
var fangfa = {
    name: 'chenstudy',
    birth: 2000,
    age: getAge
    };
    getAge.apply(fangfa,[]);

五.内部对象

标准对象

number,string,boolean,object,function,undefined

1.Date

基本使用

var now = new Date();  //Sun May 09 2021 17:09:00 GMT+0800 (中国标准时间)
now.getFullYear();  //年
now.getMonth();  //月  0—11
now.getDate();  //日
now.getDay();  //星期
now.getHours();  //时
now.getMinutes();  //分
now.getSeconds();  //秒
now.getTime();   //时间戳  全世界统一  从  1970-1-1 00：00：00  毫秒数
console.log(new Date(1620551340587))  //事件戳转事件

转换

now.toLocaleString()  //调用的是一个方法，不是一个属性
now.toGMTString()

2.JSON

json是什么

早期，所有数据传输习惯使用XML文件！

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JS中一切皆对象，任何js支持的类型都可以用JSON表示

对象用{}

数组用[]

键值对用key:value

JS对象和JSON字符串的转换

var user={
    name:"chenstudy",
    age:18,
    sex:"男"
}
var jsonUSer = JSON.stringify(user);//JS->JSON
var obj = JSON.parse('{"name":"chenstudy","age":18,"sex":"男"}')

JSON和JS对象的区别

var obj={name:"chenstudy",age:18,sex:"男"};
var json='{"name":"chenstudy","age":18,"sex":"男"}'

3.Ajax

原生js写法 xhr异步请求

jQuey封装好的方法

axios请求

六.面向对象编程

1.对象和类

类：模板

对象：具体的实例

原型

var Student ={
    name="xiaoming",
    study:function(){
        console.log(this.name+"study")
    }
};
var chen = {
    name:"chen"
};
//原型
chen._proto_=Bird;

class继承

class关键字，在ES6引入的

class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert('hello');
    }
}
var chen = new student("chen");
chen.hello;

继承(本质：原型)

class midStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade =grade;
    }
    mygrade(){
        alert("hello,midStudent");
    }
}

原型链

七.操作BOM对象(重点)

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
879
window.innerWidth
167
window.outerHeight
878
window.outerWidth
683

Navigator

Navigator封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36"
navigator.platform
"Win32"

大多数情况,我们不会使用navigator对象

不建议使用这些属性

scree

代表屏幕尺寸

screen.width
1549 px
screen.height
872 px

location

location代表当前页面的URL信息

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()  //刷新网页
location.assign('https://i.cnblogs.com/posts/edit;postId=14736906')  //设置新的地址

document

document代表当前的页面，HTML DOM文档树

document.title
"百度一下，你就知道"
document.title="chenstudy"
"chenstudy"

获取具体的文档数节点

<dl id="ip">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
    var dl =document.getElementById('ip')
</script>

获取cookie

document.cookie
"BIDUPSID=8FFC189A44E65B4082968A90334BA305; PSTM=1610976142; BAIDUID=8FFC189A44E65B40E0850

截取cookie:恶意人员获取你的cookie上传到它的服务器

服务器端可以设置cookie为httpOnly

history

history:浏览器的历史记录

history.back()  //后退
history.forward  //前进

八.操作DOM对象(重点)

核心

DOM树形结构就是浏览器的网页

更新：更新DOM节点

删除：删除一个DOM节点

遍历DOM节点：得到DOM节点

要操作DOM节点，就必须先获得这个DOM节点

获取节点

//原生代码,之后使用jQuery
<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementsById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementsById('father');
    //father.children;
    //father.firstChild;
    //father.lastChild;
</script>

更新节点

<div id="id1">
</div>
<script>
var id1= document.getElementById('id1');
</script>

操作文本

id1.innerText='456'//修改文本的值
id1.innerHTML='<strong>123<strong>';

操作css

id1.style.color = 'red';
id1.style.fontSize='18px';
id.style.margin = '10px';

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
//删除p1节点
<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removechild(self)
</script>

注意：删除节点是一个动态的过程，children时刻在变化！

father.removechild(father.children[0])
father.removechild(father.children[1])    //这里的children[1]是开始的children[2]

插入节点

节点不存在元素时，可以通过innerHTML增加一个元素

已经存在元素时，就不能这么干了，会产生覆盖

追加

追加已存在的节点

<p id='js'>JavaScript</p>
<div id='lost'>
    <p id='SE'>JavaSE</p>
    <p id='EE'>JavaEE</p>
    <p id='ME'>JavaME</p>
</div>
<script>
    var js=document.getElementById('js');
    var lost = document.getElementById('lost');
    lost.appendChild(js);//追加已存在的节点
</script>

追加一个新节点

<p id='js'>JavaScript</p>
<div id='lost'>
    <p id='SE'>JavaSE</p>
    <p id='EE'>JavaEE</p>
    <p id='ME'>JavaME</p>
</div>
<script>
    var js=document.getElementById('js');
    var lost = document.getElementById('lost');
    var newp = document.createElement('p');//创建一个p标签
    newp.id='newp';//为节点赋值一个id
    newp.innerText = 'hello,java';
    lost.appendChild(newp);//追加一个新节点
</script>

设置样式

<p id='js'>JavaScript</p>
<div id='lost'>
    <p id='SE'>JavaSE</p>
    <p id='EE'>JavaEE</p>
    <p id='ME'>JavaME</p>
</div>
    <script>
          //创建一个标签节点
          var myScript = document.createElement('script');/创建一个空的script标签
          myScript.setAttribute('type','text/javascript');
          //创建style标签
          var myStyle = document.createElement('style');/创建一个空的style标签
          myStyle.setAttribute('type','text/css');
          myStyle.innerHTML = 'body{backgroud-color: white}';//设置标签内容
          doucment.getElementsByTagName('head')[0].appendChild(myStyle);  //将标签插入head中
    </script>

insert

list.insertBefore(js,ee);//将js节点插入到ee节点前
//选择的节点.insertBefore(newNode,targetNode)

九.操作表单(验证)

表单是什么

常见表单

文本框 text

下拉框

单选框 radio

多选框 checkbox

隐藏框 hidden

密码框 password

表单的目的：提交一些信息

表单的操作(获取提交的信息)

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="user_name">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
<script>
    var input_text = document.getElementById('user_name');
    var boy_radio = document.getElementById('boy');
    var girl_radio =document.getElementById('girl');
    //修改输入框的值
    input_text.value ='chen'
    boy_radio.checked; //查看返回的结果，是否被选中
    boy_radio.checked = true ; //赋值
</script>

JavaScript知识点（下）

四.函数

1.定义函数

2.调用函数

3.变量作用域

4.方法

五.内部对象

1.Date

2.JSON

3.Ajax

六.面向对象编程

1.对象和类

七.操作BOM对象(重点)

八.操作DOM对象(重点)

九.操作表单(验证)

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript知识点（下）

四.函数

1.定义函数

2.调用函数

3.变量作用域

4.方法

五.内部对象

1.Date

2.JSON

3.Ajax

六.面向对象编程

1.对象和类

七.操作BOM对象(重点)

八.操作DOM对象(重点)

九.操作表单(验证)

热门文章

最新文章

相关课程

相关电子书

相关实验场景