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)
上一篇 2022年7月18日
下一篇 2022年7月18日

相关推荐

发表回复

登录后才能评论