你倒是敲代码啊.
你倒是敲代码啊.

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前端)