JavaScript笔记

JavaScript的相关概念

  • 概念:是一门客户端脚本语言。是运行在客户端浏览器上面的,每一个浏览器当中都有JavaScript的解析引擎。
  • 脚本语言:不要编译,直接就可以在浏览器上面解析执行。
  • 功能:可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验

JavaScript的发展史(辛酸发展史)

  • 1992年,Nombase公司开发出第一门客户端脚本语言,专门用于表单的校验(邮箱,用户名等格式的校验)。命名:C--(因为有一门语言叫C++),妄想的靠语言名字来流行。后来更名为ScriptEase
  • 1995年,Netscape公司(网景公司)发现了C--语言,因此也开发了一门客户端脚本语言,命名LiveScript。在同一年Java语言面世,后来就请来了SUN公司的程序员,两家公司在LiveScript基础上修改,最后命名为JavaScript,还是想要借助Java语言的名声来流行。
  • Java和JavaScript的关系:张三和张三丰之间的关系,但是两者之间的语法接近。
  • 1996年,微软公司抄袭JavaScript开发出来了JScript,并将其搭载到ie浏览器上面。
  • 1997年,ECMA(欧洲计算机制造商协会),制定了所有客户端脚本语言的规范(ECMAScript)。
  • JavaScript = ECMAScript + BOM + DOM;

ECMAScript

基本语法

与HTML的结合方式

内部JS

  • 使用方法:定义标签,可以定义在html文件的任意位置
<html>

<head>
    <meta charset="UTF-8">
    <title>JS与HTML的结合方法式title>
    <script>
        alert("Hello World!");
    script>
head>

<body>
    <input type="text">
body>

html>

外部JS

  • 使用方法:在当中添加src目录
<script src="js/web.js">script>

注释格式

  • 单行注释:
// 注释
  • 多行注释
/* 注释 */

数据类型

原始数据类型(基本数据类型)

  • number : 整数/小数/NaN(not a number 一个不是数字的数字类型)

  • string : 字符/字符串

  • boolean : true/false

  • null : 一个对象为空的占位符

  • undefined : 未定义,如果一个变量没有给初始化值,则会被默认赋值为undefined

引用数据类型

  • 对象

变量

  • 什么是变量:一小块存储数据的内存空间
  • Java语言是强类型的语言,JavaScript是弱数据语言。
  • 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型,只能存储固定类型的数据
  • 弱类型:在开辟变量存储空间的时,不定义空间将来存储数据的数据类型,可以存放任意的数据类型。
  • 语法:var name = value
var num1 = 1;
var num2 = 1.2;
var num3 = NaN;

document.write(num1 + "
"
); document.write(num2 + "
"
); document.write(num3 + "
"
); var str1 = 'abc'; var str2 = "a"; document.write(str1 + "
"
); document.write(str2 + "
"
); var flag = true; document.write(flag + "
"
); var obj1 = null; var obj2 = undefined; var obj3; document.write(obj1 + "
"
); document.write(obj2 + "
"
); document.write(obj3 + "
"
);

运算符

  • typeof运算符:可以判断数据类型
var num1 = 1;
var num2 = 1.2;
var num3 = NaN;

document.write(typeof num1 + "
"
); document.write(typeof num2 + "
"
); document.write(typeof num3 + "
"
); var str1 = 'abc'; var str2 = "a"; document.write(typeof str1 + "
"
); document.write(typeof str2 + "
"
); var flag = true; document.write(typeof flag + "
"
); var obj1 = null; var obj2 = undefined; var obj3; document.write(typeof obj1 + "
"
); document.write(typeof obj2 + "
"
); document.write(typeof obj3 + "
"
);
  • 一元运算符
  • 算数运算符
  • 赋值运算符
  • 比较运算符
// ===:全等于,在比较之前首先判断数据类型是否相同
  • 逻辑运算符
  • 三元运算符

流程控制语句

  • 打印99乘法表
    JavaScript笔记_第1张图片
function print() {
    for(var i = 1; i <= 9; i++) {
        document.write("");
        for(var j = 1; j <= i; j++) {
            document.write("");
            document.write(j + "×" + i + "=" + i * j);
            document.write("");
        }
        document.write("");
    }
}

document.write("");print();
document.write("
"
);
td {
    border: 1px solid yellowgreen;
}

* {
    color: green;
}

基本对象

Function:函数对象

Function对象的特点

  • 方法定义时,形式参数的类型不用写,返回值的类型也不写
  • 方法是一个对象,如果定义名称相同的方法,将会覆盖
  • 在JS当中,方法的调用只跟方法的名称有关系,和参数列表无关
  • 在方发声明中有一个内置的对象(数组),叫做arguments,封装了所有的实际参数
    // 计算任意个数的和
    function add() {
        var sum = 0;
        for (var i = 0; i < arguments.length; i++) {
            sum += arguments[i];
        }
        return sum;
    }
    document.write(add(3, 4, 5, 6));
    

Function的创建以及调用方式

  • var fun = new Function(参数列表,方法体)
    var fun = new Function("a", "b", "alert(a);");
    
    fun(3, 4);
    
  • function fun(value1,value2,...,valuen) {}
    function print(st, ed) {
        for(var i = st; i <= ed; i++) {
            document.write(i);
        }
    }
    print(1, 10);
    
  • var fun = function(value1,value2,...valuen) {}
    var fun = function (st, ed) {
        for (var i = st; i <= ed; i++) {
            alert(i);
        }
    }
    fun(1, 10);
    

Function对象当中的重要属性

  • length:Function当中的参数个数

Array:数组对象

Array对象的特点

  • JS当中的数组元素类型是可变的
    var array = new Array(1, "abc", 3);
    document.write(array + "
    "
    );
  • 在JS当中数组的长度是可变的
    var array = new Array(1, "abc", true);
    document.write(array.length + "
    "
    ); array[100] = "cjd"; document.write(array.length);

Array的创建以及调用方式

  • var array = new Array(value1,value2,...,valuen)
  • var array = new Array(length)
  • var array = [value1,value2,...,valuen]
    var array = new Array(1, 2, 3);
    document.write(array + "
    "
    ); array = new Array(7); document.write(array + "
    "
    ); array = [4, 5, 6]; document.write(array + "
    "
    );

Array对象当中的重要属性以及方法

  • length:数组的长度
  • join():将数组当中的元素按照指定的分隔符拼接成字符串
    var array = new Array(1, "abc", true);
    document.write(array.join("?"));
    
  • push(value1,,value2,...,valuen):向数组当中添加一个或者是多个元素
    var array = new Array(1, "abc", true);
    document.write(array + "
    "
    ); array.push("hello", 3, 6, false); document.write(array + "
    "
    );

Boolean

Date:日期对象

Date对象的创建以及调用方式

  • var date = new Date()
    var date = new Date();
    document.write(date);
    

Date对象的重要属性以及方法

  • toLocaleString():转化为当地的时间
    var date = new Date();
    document.write(date.toLocaleString());
    
  • getTime():获取毫秒值,当前日期对象和1970年1月1日0点的毫秒之差
    var date = new Date();
    document.write(date.getTime());
    

Math:数学工具类

Math对象的创建以及调用方式

  • 不需要创建对象,直接调用静态方法即可

Math对象当中的重要方法以及属性

  • random():产生[0,1)之间的随机数字
  • ceil(x):x上取整
  • floor(x):x下取整
  • round(x):x四舍五入成最接近的整数

Number

String

RegExp:正则表达式对象

正则表达式的概念

  • 定义字符串的组成规则的字符串

正则表达式的重要符号以及含义

单个符号
  • []:方括号当中的所有字符当中的一个字符
  • \d:单个数字字符,[0-9]
  • \w:单词字符,[a-zA-Z0-9_]
量词符号
  • *:表示出现0次或多次
  • ?:表示出现0次或1次
  • +:表示出现一次或多次
  • {n,m}:出现次数[n,m]
开始结束符号
  • ^:开始
  • $:结束

RegExp对象的创建以及调用

  • var reg = new RegExp("expression")
  • var reg = /expression/
  • test(str):验证指定字符串是否符合正则定义的规范
    var reg = new RegExp("^\\w{6,12}$");
    
    var reg2 = /^\w{6,12}$/;
    
    var username = "zhangsan"
    
    alert(reg.test(username));
    alert(reg2.test(username));
    

Global

  • 特点:是一个全局对象,这个Global当中封装的方法不需要对象就能直接调用

url编码格式

wd=%E7%99%BE%E5%BA%A6%E7%BF%BB%E8%AF%91

Global当中的重要的方法

  • enCodeURI():url编码
  • deCodeURI():url解码
  • enCodeURIComponent():url编码,编码的字符更多
  • deCodeURIComponent():url解码,解 码的字符更多
    var str = "百度翻译";
    
    document.write(encodeURI(str) + "
    "
    ); document.write(decodeURI(encodeURI(str)) + "
    "
    ); document.write(encodeURIComponent(str) + "
    "
    ); document.write(decodeURIComponent(encodeURIComponent(str)) + "
    "
    );
  • parseInt():将第一个不是数字的字符之前的全部转变为数字
  • isNaN():判断是不是NaN,NaN参与的所有==判断全部为false
    var str = "6457365782348BG462378146128";
    document.write(parseInt(str));
    var str = "a6327367128";
    
    document.write(isNaN(parseInt(str)));
    
  • eval():将JavaScript的字符串转化,并将它作为脚本代码来执行
    var jscode = "alert(\"HELLO WORLD!\");";
    eval(jscode);
    

BOM

  • 概念:Browser Object Model 浏览器对象模型,将浏览器的各个组成部分拆分成为了对象

BOM当中的重要对象

窗口对象:window

window对象的特点

  • window对象不需要创建,可以直接使用。window.function(),可直接调用方法,并且window可以省略不写,直接调用方法即可

window对象当中的重要方法以及属性

window对象当中的重要属性
  • history location navigator screen:可以获取其他的BOM对象
  • document:获取其他的DOM对象
与弹出框有关的方法
  • alert():显示带有一段消息和一个确认按钮的警告框
    alert("HELLO WORLD!");
    
  • confirm():显示带有一段消息以及确认和取消按钮的对话框
    if(confirm("您确定取消吗?")) {
        alert("yes");
    } else {
        alert("no");
    }
    
  • prompt():显示可提示用户输入的对话框
    var str = prompt("请输入用户名");
    document.write(str);
    

与打开关闭有关的方法

  • open(url):将在新的标签页当中打开指定url的网站,并且返回一个新的window对象
  • close():原型为window.close(),由于省略window,实际上是谁调用close()关闭谁
    var openWindowButton = document.getElementById("openWindowButton");
    var newWindow = null;
    openWindowButton.onclick = function () {
        newWindow = open("https://www.baidu.com");
    }
    
    var closeWindowButton = document.getElementById("closeWindowButton");
    closeWindowButton.onclick = function() {
        newWindow.close();
    }
    

与定时器有关的方法

  • setTimeout():在指定的毫秒数后调用函数或者是计算表达式,是一次性的
  • clearTimeout():取消由setTimeOut()方法指定的timeout
  • setInterval():按照指定周期(以毫秒)计数,来调用函数或计算表达式,是重复性的,返回唯一标识
  • setInterval():取消由setInterval()设置的timeout
    //setTimeout(setColor, 5000);// only one
    var id = setInterval(setColor, 2000);
    function closeInterval() {
        clearInterval(id);
    }
    setInterval(closeInterval, 6000);
    

定时器案例

  • 修改网页背景
    function setBackground() {
        if(backFlag) {
            document.body.style.backgroundImage = "url('img/on.jpg')";
        } else {
            document.body.style.backgroundImage = "url('img/off.jpg')";
        }
        backFlag = !backFlag;
    }
    
    setInterval(setBackground, 3000);
    

地址栏对象:Location

location当中的重要属性

  • href:设置或者是返回完整的url

location当中的重要方法

  • reload():刷新当前页面
    var reloadButton = document.getElementById("reloadIndex");
    reloadButton.onclick = function () {
        location.reload();
    }
    

页面跳转案例

JavaScript笔记_第2张图片

  • html
    <html>
    
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/index.css">
    head>
    
    <body>
        <div>
            <span id="time">5span>
            <span>秒之后,自动跳转到首页...span>
        div>
    body>
    
    <footer>
        <script src="js/index.js">script>
    footer>
    
    html>
    
  • css
    #time {
        color: red;
    }
    
    div {
        width: 30%;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        margin: 0 auto;
    }
    
  • javascript
    var time = 5;
    
    function setTime() {
        time--;
        if (time == 0) {
            clearInterval(id);
            location.href = "./web.html";
        }
        var text = document.getElementById("time");
        text.innerHTML = time;
    }
    
    var id = setInterval(setTime, 1000);
    

历史记录对象:History

  • history的含义:当前window窗口访问过的url

History当中的重要方法

  • back():后退
  • forward():前进
  • go(count):count为正数的时候,将会前进count个历史记录;count为负数的时候,将会后退count个历史记录

History当中的重要属性

  • length:当前窗口的历史记录的个数

浏览器对象:Navigator

显示器屏幕对象:Screen

DOM

  • 概念:document object model,文档对象模型,将标记语言文档的各个部分,封装成为对象。可以使用这些对象,对标记语言的文本进行CRUD的动态操作。

document:文档对象

document对象当中的重要属性

document对象当中的重要方法

获取element对象

  • getElementById():根据id属性值获取元素对象。id属性值一般唯一
  • getElementsByTagName():根据标签的名称获取标签对象。返回值是一个数组
  • getElementsByClassName():根据class的属性值获取元素对象
  • getElementsByName():根据name属性值获取元素对象

创建其他DOM对象

  • createAttribute():创建属性对象
  • createComment():创建注释对象
  • createElement():创建元素对象
  • createTextNode()

element:元素对象

element对象当中的重要方法

  • removeAttribute():删除属性
  • setAttribute():设置属性

attribute:属性对象

text:文本对象

comment:注释对象

node:结点对象,其他5个的父对象

  • 所有的DOM对象都可以被认为是一个node

node对象当中的重要方法(操作dom树)

  • appendChild():向节点的子节点列表添加新的子节点
  • removeChild(node):删除并返回当前结点的子节点
  • replaceChild():用新节点替换一个子节点
    var element_a = document.getElementById("dve");
    element_a.onclick = function () {
        var node_s = document.getElementById("s");
        var node_ss = document.getElementById("ss");
        node_s.removeChild(node_ss);
    }
    var element_b = document.getElementById("dev");
    element_b.onclick = function () {
        var node_s = document.getElementById("s");
        var node_ss = document.createElement("span");
        node_ss.setAttribute("id", "hellow");
        node_s.appendChild(node_ss);
    }
    

node对象当中的重要属性

  • parentNode:返当前节点的父亲节点

你可能感兴趣的:(web前端)