JavaScript基础整合

最新推荐文章于 2024-09-02 17:34:07 发布

Stock01

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量80

点赞数

分类专栏： JavaEE 文章标签： javascript html html5

本文链接：https://blog.csdn.net/Stock01/article/details/120285221

版权

JavaEE 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

使用JavaScript

使用方法:内部标签引入或者外部链接引入

 <script>...</script>
 <script src="link"></script>

编写JS的基本语法

数据类型:数字(tip:NaN表示不是一个数),字符串,布尔值,null,undefine
运算符:逻辑运算,比较运算
区分双等和三等:
双等:值一样就返回true
三等:类型一样和值一样才返回true
数组,Map,Set:

 'use strict'

    var map = new Map([['a',100],['b',80]]);
    var name = map.get('a');
    map.set('admin',123456);

    var set = new Set([3,11,2,2,2]);
    set.add(76);
    /*利用iterator(for (var x of y))遍历数组,map,set*/
    /*利用(for (var x in y))遍历数组*/
    var arr= [3,4.5];
    for(var x of arr){
           console.log(x);
    }
    for(let x of map){
            console.log(x);
    }
    for(let x of set){
            console.log(x);
    }

类的定义:

    var person = {
      name :"aaa",
      age :2,
      score : 1
    }

函数方法定义:
方法一:

 var ads = function(x){
 	//对传入的参数进行打印
      for(var i = 0;i < arguments.length;i++){
        console.log(arguments[i]);
      }

      if(typeof x !== 'number'){
        throw 'not a number';
      }
      if(x >= 0)
        return x;
      else
        return -x;
    }

方法二:

   function getage(){
        var now = new Date().getFullYear();
        return now - this.brith;
      }
    var sss = {
      name:sss,
      brith:13,
      age:getage
    }
    getage.apply(sss,[]);//调用getage方法,并且将sss作为参数传入

tips:JavaScript中的函数可以传入任何参数,但是最好用arguments和rest对参数进行异常判断.
argument:可以接收参数并且将其保存在数组中
rest:可以接收除函数所需要的参数以外的参数,保存在数组中

BOM

Date的使用:
通过date得到时间:

定义一个date类对象
通过对象调用方法的到时间戳
将时间戳当参数传入date类创建一个时间对象

**什么是BOM:**操控浏览器的API
BOM（Browser Object Model）即浏览器对象模型。
BOM提供了独立于内容而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是 window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

window对象
window对象是js中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。
location对象
表示当前页面的URL信息

href属性:当前URL内容
host属性:主机名
protocol属性:协议
reload()方法:刷新页面
history对象
浏览器的历史记录,JavaScript的history对象记录了用户曾经浏览过的页面，并可以实现浏览器前进与后退相似的导航功能.
由于安全的原因，不能显示history对象中的历史页面URL
history.go() 函数 – 前进或后退指定的页面数
history.back() 函数 – 后退一页
history.forward() 函数 – 前进一页
history.length 属性 – history对象中缓存了多少个URL
screen对象
可以获取可计算的屏幕
navigator对象
封装了浏览器的信息,可修改
appName属性浏览器名称
appVersion属性浏览器版本
platform 操作系统
userAgent 用户代理信息，通过该属性可以获取浏览器及操作系统信息
JavaScript中封装的一些事件:
onload事件：页面内容加载完成（DOM结构，图片…）
onscroll事件：拖动浏览器的滚动条触发此事件。
onresize事件：浏览器窗口缩放所触发的事件。
open() 和 close() 方法:打开一个页面/关闭一个页面
alert() prompt() confirm()浏览器事件

定时器
setInterval(函数名称，时间)；间隔定时器(反复调用)
clearInterval( 定时器的返回值 ); 停止定时器
setTimeout(函数名称，时间); 延时定时器
clearTimeout( 定时器的返回值 ); 停止定时器

DOM

什么是DOM:
DOM是”Document Object Model”的首字母缩写，即文档对象模型。用来描绘一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。(JS —>DOM —>HTML)

document对象:操控文档的API
使用document作为访问HTML文档的入口，管理框架的frames对象等.
document是整个文档树DOM的根结点

DOM的基本操作
一.得到节点:document.getElementById/Name/ClassName/TagName(’’)
二.更新节点:通过对节点本身方法的操作可以实现更新,修改节点
三.删除节点:通过父节点的adoptNode(A)方法可以移除子节点A
四.添加节点:通过父节点的appendChild(A)方法可以添加子节点A
五.创建节点:document.createElement(‘x’),创建x类型的节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="h1">aaa</h1>
<p id="p1">p1</p>
<p id="p2">p2</p>
<script>
  //获得一个Id为p1的结点,赋给变量p1
  var p1 = document.getElementById('p1');
  //获得一个Id为h1的结点,赋给变量h1
  var h1 = document.getElementById('h1');
  //把h1节点放到p1下
  p1.appendChild(h1);
  /**
  创建一个p标签节点,并赋给newp
  给newp赋值:id='newp',innerText='newppppp'
  并且将此节点放到p1下	
  **/
  var newp = document.createElement('p');
  newp.id = 'newp';
  newp.innerText = 'newppppp';
  p1.appendChild(newp);
  /**
  创建一个style样式(CSS)节点,并赋给style
  给style赋值:innerText='body{background-color:#ff0000}'
  给style设置属性:setAttribute('type','text/css')
  并且将此节点放到p1下	
  **/
  var style = document.createElement('style');
  style.setAttribute('type','text/css');
  style.innerHTML = 'body{background-color:#ff0000}'
  //在document节点下添加style节点
  document.getElementsByTagName('head')[0].appendChild(style);
</script>
</body>
</html>

DOM操作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="lib/md5.js">
 //有问题??????
  </script>
</head>
<body>

<form action="#" method="post">
  <p>
    <span>username:</span><input type="text" id="username" name="username">
  </p>
  <p>
    <span>password:</span><input type="text" id="password" name="password">
  </p>
  <button type="button" onclick="submit()" >submit</button>
</form>
<script>
  function submit(){
    var uname = document.getElementById('username');
    var pwd = document.getElementById('password');

    console.log(uname.value);
    pwd.value = md5(pwd.value);//对获得到的密码进行加密传输
    console.log(pwd.value);

    return false;
  }
</script>
</body>
</html>

Stock01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础整合

使用JavaScript使用方法:内部标签引入或者外部链接引入 <script>...</script> <script src="link"></script>编写JS的基本语法数据类型:数字(tip:NaN表示不是一个数),字符串,布尔值,null,undefine运算符:逻辑运算,比较运算区分双等和三等:双等:值一样就返回true三等:类型一样和值一样才返回true数组,Map,Set: 'use strict' var
复制链接

扫一扫

专栏目录