1. 云图网首页
  2. 技术专区
  3. 大前端

JavaScript（2）

• 大前端


JavaScript(2)

函数

定义与调用函数

 

类型1：

function abs(x){
     if(x>0){
        return x;
     }
     else{
        return -x;
      }
}
​
>abs(10)
10
>abs(-10)
10
>abs()
NaN

//一旦执行return，函数结束,如果没有执行return，函数也有返回值，结果是undefined

 

类型2：

var abs=function (x){
    if(typeof x !=="number"){
          throw "it's not a number";  //手动抛出异常
     }
    if(x>0){
         return x;
     }
     else{
         return -x;
     }
}
​
>abs("")
Uncaught it's not a number //报错
>abs(-12)
12

function(…){}是一个匿名函数，但可以把值赋给前面的变量

JavaScript可以传递多个参数，也可以不传递参数

=== arguments ===

arguments相当于是一个数组，会接收到全部参数，如果要获取其他参数，需把定义的参数去除

var abs=function (x){
    if(arguments.length>1){
        var a=arguments[1];
        return a;
    }
}
​
//传入的参数是多个时，可以通过arguments捕获到传入的其他参数

=== rest ===

获取除了已经定义的参数之外的参数

//以前：
function abs(x,...rest){
    if(arguments.length>1){
        for(var i=1;i<arguments.length;i++){
            console.log(arguments[i]);
        }
    }
}
​
//现在，使用rest
function abs(x,...rest){
    return rest;
}
>(4) [3, 2, 1, -12]
​

变量的作用域

在函数体内声明，在函数体外不能使用，可以使用闭包

function abs(x,...rest){
    var a=1; 
    return rest;
}
a+=1;
​
>Uncaught ReferenceError: a is not defined

 

两个方法的变量名可以相等

function bs(x,){
    var a=1; 
}
function cs(x){
    var a=1;
}
​
>不会报错

 

内部方法可访问外部函数的变量，外部函数不能访问内部函数的变量

function abs(){
    var a=2;
    function a(){
        var b=a+2;
        return b;
    }
    var z=b+1;
    return z;
}
​
>报错

 

当函数内外命名了同一个变量，调用时由内向外查找变量

function abs(){
    var a=2;
    function ab(){
        var a=3;
        console.log(a);   //调用ab()中的a
    }
    ab();
    console.log(a);    //调用abs()中的a
}
abs();
​
>3
>2

 

提升变量的作用域，js执行引擎自动将定义提在最前面，赋值不变。所以可以把所需的变量统一提至开头集中定义，便于代码维护。

function abs(){
    var a='2'+b;
    console.log(a);
    var b='1';
}
​
>2undefined
//等同于
function abs(){
    var b;
    var a='2'+b;
    console.log(a);
    b='1';
}

 

全局变量

定义在函数外面，函数内部所有方法可以调用

var z=1;
function abs(){
    console.log(z);
}
​
>1

 

全局对象window

默认所有的全局变量都会自动绑定在window对象下面

var x="xxx";
function abs(){ 
    alert(x);   //alert本身也是绑定在window下的
    alert(window.x);
}
​
<script>
    var x="xxx";
    alert(x);  //弹出弹框
    window.alert(x);    //弹出弹框
​
    var old=window.alert;
    old(x);
/*相当于Scanner in=new Scanner(System.in)
       in.next();
*/
​
    window.alert=function(){
    }
    alert(x);//未弹出弹框
    //相当于Java中的重写
​
</script>

JavaScript实际上只有一个全局作用域，任何变量（函数）假设没有在函数作用范围内找到，就会逐层向外查找，如果在全局作用域都没找到会爆出异常。

 

规范：

由于全局变量都会绑定在window上，为了避免冲突，我们要设置一个全局对象，将以后需要用的变量都绑定在这个对象上，需要使用的话，通过该对象调用。

var use={};
​
use.name='lerry';
use.add=function(a,b){
    return a+b;
}
console.log(use.name);
console.log(use.add(12,5));
​
>lerry
>17

 

局部作用域

使用let ，解决局部作用域问题

function a(){
    for(let i=1;i<=10;i++){
        console.log(i);
    }
    console.log(i+1);
}
a()
>输出1~10

 

常量

使用const关键字定义常量,将变量变成只读变量

const PI=3.14

方法

var person={
    //属性：person.name
    name:'lerry',
    age:18,
    //方法:person.birth()
    birth:function(){
        let birth=2022-this.age;
        return birth;
    }
}
​
console.log(person.birth());
>2004

apply:可以控制this的指向

function get(){
    var birth=2022-this.age;
    return birth;
}
var person={
    name:'lerry',
    age:18,
    birth:get
}
​
get()
//直接调用get()会报错
​
apply(指向对象，传参)
get.apply(person,[]);
>2004
​

判断对象类型,使用typeof，返回对象类型

Date

var now=new Date();
console.log(now.getFullYear());//年
console.log(now.getMonth()); //月 0~11月
console.log(now.getDate()); //日
console.log(now.getDay());  //星期
console.log(now.getHours() );//时
console.log(now.getMinutes()); //分
console.log(now.getSeconds());  //秒
var a=now.getTime();
console.log(now.getTime()); //时间戳 全球统一，从1970~现在的毫秒数
console.log(new Date(a));  //时间戳转为具体时间
console.log(now.toLocaleString());  //获取本地时间

JSON

JSON

是一种轻量级的数据交换格式,简洁和清晰的层次结构,有效地提升网络传输效率.

javascript中一切皆为对象，任何js支持的类型都可以用JSON转换

格式：

  • 对象和map用{}

  • 数组和list用[]

  • 所有键值对用key:value

1.使用stringify()转换为json对象

var person={
    name:"lerry",
    age:18,
    sex:"women"
}
console.log(person);
var jsonUser=JSON.stringify(person);
console.log(jsonUser);
​
>{name: 'lerry', age: 18, sex: 'women'}  person对象
    age: 18
    name: "lerry"
    sex: "women"
    [[Prototype]]: Object
>{"name":"lerry","age":18,"sex":"women"}  json对象

2.使用parse()将字符串转化成json对象

var User=JSON.parse('{"name":"lerry","age":"18"}')
console.log(User);
​
>{name: 'lerry', age: '18'}
    age: "18"
    name: "lerry"
    [[Prototype]]: Object

JSON是一个字符串，JS对象是一个对象

var person={
    name:'linda',
    age:19
}
console.log(person);
var jsonuser=JSON.stringify(person);
console.log(jsonuser);
​
>{name: 'linda', age: 19}
age: 19
name: "linda"
[[Prototype]]: Object
>{"name":"linda","age":19}
​
typeof(jsonuser)
'string'
typeof(person)
'object'

面向对象编程

面向对象编程的两大重点是类和对象，但是在Javascript中，有一些区别

原型对象

使用class继承

1).定义一个类

//定义一个类
class student{
    //构造器
    constructor(name){ 
        this.name=name;
    }
    
    //方法
    hello(){
        alert("Hello");
    }
​
}
//实例化
var lerry=new student(lerry);
lerry.hello();

2）使用class继承

class student extends person{
    constructor(name,grade){
        super(name);
        this.grade=grade;
    }
    hello(){
        alert("Hello js");
    }
}
var xixi=new student(xixi);
xixi.hello();

原型链：

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

image-20220715163331787

原型链就是蓝色的这条线

操作BOM对象

BOM：浏览器对象模型

window：代表窗口

//获取窗口的高度宽度
>window.innerHeight
399
>window.innerWidth
718
>window.outerHeight
918
>window.outerWidth
732
//当页面框发生变化后，innerHeight也会发生变化

navigator:封装了浏览器的信息

>navigator.appVersion
获取版本号
>navigator.appName
'Netscape'

navigator对象可以被人为修改，不建议用它的属性来编写代码

screen:获取屏幕信息

//获取屏幕的尺寸
>creen.height
960
>screen.width
1440

location：代表当前页面的URL信息

>location.host    //主机
'www.baidu.com'
>location.href     //当前跳转网页
'https://www.baidu.com/?tn=02003390_64_hao_pg'
>location.protocol   //协议
'https:'
>location.reload()   //重新加载
>location.assign(“待跳转页面href”)   //实现页面跳转

Document:代表当前页面信息，HTML DOM文档树

>document.title   //获取当前页面title
>document.title="xxx"   //修改title

获取具体的文档树节点

<ul id="subject">
    <li>java</li>
<li>python</li>
<li>javascript</li>
<li>c++</li>
</ul>
<script>
    var ti=document.getElementById('subject');
</script>
​
>console.log(ti);
 <ul id=•"subject">
    <li>•…•</li>•
    <li>•…•</li>•
    <li>•…•</li>•
    <li>•…•</li>•
 </ul>•

document可以获取网页的cookie

服务器端可以设置cookie:httpOnly保证安全

history：代表浏览器的历史记录

>history.back()   //前进
>history.forward()   //回退上一次打开的网页

操作DOM对象

 

获取DOM结点：

//对应选择器
document.getElementsByTagName('ul');  //通过标签名获取结点
document.getElementById();      //通过ID获取结点
document.getElementsByClassName();　　　//通过class获取结点
document.getElementsByName();   //通过名称获取结点
​

更新DOM结点

  1. a1.innerText=’xxx’ //加入文本

  2. a1.innerHTML='<><>’ //添加一段HTML代码，可以解析一段HTML代码

    <div id="id1"> </div>
    <script>
        var a1=document.getElementById("id1");
    </script>
    ​
    >a1.innerText='I love Java'   //页面显示文本
    >a1.innerHTML='<ol><li>java</li><li>python</li>'  //页面显示有序列表
        1.java
        2.python

  1. a1.style. //修改元素样式

    属性使用字符串包裹，-用驼峰命名替换

    >a1.style.fontSize='50px'   //字体大小
    >a1.style.color='blue'     //颜色
    >a1.style.fontFamily='楷体'   //字体样式
    >a1.style.padding='2em'  

==可以使用js操作页面==

 

删除结点

删除结点的步骤：1.获取父节点

2.删除自己

类似于单链表删除一个元素

<div id="id1">
    <p id='p1'>Java</p>
    <p id="p2">我很想你</p>
</div>
<script>
    var a=document.getElementById("p1");
    var father=document.getElementById("id1");
</script>
​
>a.parentElement    //获取父节点
>father.removeChild(p1)  //删除p1
>father.children[2];    //获取父元素的第3个子结点

**注意：

father.removeChild(father.children[0])

father.removeChild(father.children[1])

father.removeChild(father.children[2])

执行以上代码并不能将第1，2，3个子元素删除，因为删除是一个动态的过程，删除第一个子元素后，原来的第二个子元素就变成了第一个了。

插入结点

使用a.innerText=”可以插入结点，但是如果这个结点已经存在一个结点时，会覆盖掉原来的结点。

==append追加已存在的结点==

<body>
    <h1 id="h1">今天天气真好</h1>
    <div id="id1">
        <p id='p1'>javase</p>
        <p id="p2">javaee</p>
        <p id="p3">javame</p>
    </div>
    <script>
        var a=document.getElementById("h1");
        var father=document.getElementById("id1");
        father.appendChild(a);   //此时h1就变成了father的子元素
    </script>
</body>

==创建一个新的结点==

var h2=document.createElement('h2');   //创建一个新的结点
h2.id='new';                           //给这个结点一个id
h2.innerText='Do you love java?';      //结点中的内容
father.appendChild(h2);                //追加结点

==给结点设置属性值==

st.setAttribute('属性名','属性值');
/*注意：只能通过getElementById()操作获取的元素才能直接使用setAttribute设置属性*/
var body1=document.getElementsByTagName('body');  
body1[0].setAttribute('style','color:pink');  //设置内容
/*此时获取到的是body数组形式，想要设置具体的属性，需要选择对应的具体元素*/

操作表单

表单：

文本框，隐藏域（hidden），下拉框，单选框，复选框，密码框……

==获取提交的信息==

var text_user=document.getElementById(‘ ‘)

  1. 获取结点的值: text_user.value;

修改结点的值： text_user.value=”;

  1. 单选框，复选框获取结点的值

    <div id="form">
            <form id="getinfor" action="" method="get">
                <label for="user">用户名：</label>
                <input type="text" id='user' name="user"  placeholder="输入用户名" >
                <br>
                <label for="pwd">密码：</label>
                <input type="password" id="pwd" name="pwd" >
                <br>
                <select>
                    <option>中国</option>
                    <option>美国</option>
                    <option>英国</option>
                    <option>俄罗斯</option>
                </select>
                <br>
                <input type="radio" id='boy' name="sex" value="boy">男生
                <input type="radio"  id="girl" name="sex" value="girl">女生
                <br>
                <input type="checkbox"  name="language">中文
                <input type="checkbox"  name="language">英文
                <input type="checkbox"  name="language">法语
                <br>
                <input type="submit" value="提交" name="submit">
                <input type="reset" value="重置" name="reset">
            </form>
        </div>
    ​
        <script>
            var a=document.getElementById('user');
            var b=document.getElementById('pwd');
            var boy=document.getElementById('boy');
            var girl=document.getElementById('girl');
        </script>
    ​
    //获取的值是编写时value属性的值
    >boy.value 
    'boy'
    >girl.value
    'girl'
    ​
    //检查网页中是否选中该选项
    >boy.checked
    false
    >girl.checked
    true
    ​
    //选择某个特定选项也可以赋值实现
    >boy.checked='true'
    >girl.checked='true'
    ​

    ==提交表单==

    1. 为button绑定触发事件，使用onclick=’绑定函数（）’

      为form绑定触发事件，使用onsubmit=’return 绑定函数（）’

    2. 编写函数

 <div id="form">
        <form id="getinfor" action="" method="get">
            <label for="user">用户名：</label>
            <input type="text" id='user' name="user"  placeholder="输入用户名" >
            <br>
            <label for="pwd">密码：</label>
            <input type="password" id="pwd" name="pwd" >
            <br>
            <button type="button" onclick="check()">提交</button>
        </form>
    </div>
​
    <script>
       function check(){
         var user=document.getElementById('user');
         var pwd=document.getElementById('pwd');
         console.log(user.value);
         console.log(pwd.value);
         if(user.value==='admin'){
            alert('管理员');
         }
         if(pwd.value==='123456'){
            alert('密码正确');
         }
       }
    </script>

加密数据可以使用RSA，MD5等许多方法


原创文章，作者：306829225，如若转载，请注明出处：https://blog.ytso.com/275134.html

赞 (0)
0
上一篇 2022年7月18日
下一篇 2022年7月18日

相关推荐

发表回复

登录后才能评论