JavaScript笔记

最新推荐文章于 2024-06-17 11:27:04 发布

你倒是敲代码啊.

最新推荐文章于 2024-06-17 11:27:04 发布

阅读量302

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_43446165/article/details/104152608

版权

web前端专栏收录该内容

12 篇文章 8 订阅

订阅专栏

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

使用方法：定义<script></script>标签，可以定义在html文件的任意位置

<html>

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

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

</html>

外部JS

使用方法：在<script src=""></script>当中添加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 + "<br>");
document.write(num2 + "<br>");
document.write(num3 + "<br>");

var str1 = 'abc';
var str2 = "a";

document.write(str1 + "<br>");
document.write(str2 + "<br>");

var flag = true;

document.write(flag + "<br>");

var obj1 = null;
var obj2 = undefined;
var obj3;

document.write(obj1 + "<br>");
document.write(obj2 + "<br>");
document.write(obj3 + "<br>");

运算符

typeof运算符：可以判断数据类型

var num1 = 1;
var num2 = 1.2;
var num3 = NaN;

document.write(typeof num1 + "<br>");
document.write(typeof num2 + "<br>");
document.write(typeof num3 + "<br>");

var str1 = 'abc';
var str2 = "a";

document.write(typeof str1 + "<br>");
document.write(typeof str2 + "<br>");

var flag = true;

document.write(typeof flag + "<br>");

var obj1 = null;
var obj2 = undefined;
var obj3;

document.write(typeof obj1 + "<br>");
document.write(typeof obj2 + "<br>");
document.write(typeof obj3 + "<br>");

一元运算符
算数运算符
赋值运算符
比较运算符

// ===:全等于，在比较之前首先判断数据类型是否相同

逻辑运算符
三元运算符

流程控制语句

打印99乘法表

function print() {
    for(var i = 1; i <= 9; i++) {
        document.write("<tr>");
        for(var j = 1; j <= i; j++) {
            document.write("<td>");
            document.write(j + "×" + i + "=" + i * j);
            document.write("</td>");
        }
        document.write("</tr>");
    }
}

document.write("<table align='center'>");
print();
document.write("</table>");

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 + "<br>");

在JS当中数组的长度是可变的

var array = new Array(1, "abc", true);
document.write(array.length + "<br>");

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 + "<br>");

array = new Array(7);
document.write(array + "<br>");

array = [4, 5, 6];
document.write(array + "<br>");

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 + "<br>");

array.push("hello", 3, 6, false);

document.write(array + "<br>");

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) + "<br>");
document.write(decodeURI(encodeURI(str)) + "<br>");

document.write(encodeURIComponent(str) + "<br>");
document.write(decodeURIComponent(encodeURIComponent(str)) + "<br>");

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();
}

页面跳转案例

在这里插入图片描述

html

<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div>
        <span id="time">5</span>
        <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：返当前节点的父亲节点

你倒是敲代码啊.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记

JavaScript的相关概念概念：是一门客户端脚本语言。是运行在客户端浏览器上面的，每一个浏览器当中都有JavaScript的解析引擎。脚本语言：不要编译，直接就可以在浏览器上面解析执行。功能：可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验JavaScript的发展史（辛酸发展史）1992年，Nombase公司开发出第一门客...
复制链接

扫一扫

专栏目录