JavaScript的笔记

其他 2020-03-24 10:51:50 阅读次数: 0

前言

这几天学习JavaScript和JQuery，今天给大家分享关于JavaScript的一些笔记
若有不当之处请大佬多多指点！！

JavaScript的概述：

Java是面向对象的脚本语言
javaScript是基于对象和事件驱动的脚本语言，主要用在客户端。

JavaScript语法(笔记)

JavaScript概述：
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
1.交互性（它可以做的就是信息的动态交互）
2.安全性（不允许直接访问本地硬盘）
3.跨平台性（只要可以解析JS的浏览器都可以执行，和平台无关）
JavaScript与Java不同
1.JS是Netscape公司的产品，前身是LiveScript；Java是Sun共识的产品，现在是Oracle公司的产品。
2.JS的基于对象，Java是面向对象。
3.JS只需要解析就可以执行，Java需要先编译成字节码对象，在执行。
4.JS是弱类型，Java是强类型

JavaScript与html结合（结合方式有两种）：
1.将JS代码放在< script >标签中
2.当有多个html页面使用到相同的JS脚本时，可以将JS代码封装到一个文件中，只要在< script >标签的src属性引入一个JS文件（方便维护，扩展）
注意：如果在< script >标签中定义src属性，那么标签中的内容就不会被执行

JavaScript的语法：
<通常高级程序设计语言所包含的语法内容>
1.关键字：该语言中被赋予特殊含有的单词
2.表示符：用于标示数据和表达式的符号，通常可以理解为在程序中自定义的名称。比如变量名，函数名。
3.注释：注解说明程序，用于调试程序。
4.变量：用于标示内存中的一片空间，用于储存数据，该空间中的数据是可以变化的。
5.运算符：可以让数据进行运算的符号
6.语句：用于对程序的运行进行控制的表达式
7.函数：用于对功能代码进行封装，便于提高复用性
8.数组：对多数据进行储存，便于操作，容器。
9.对象：只要是基于对象的语言或者是面向对象的语言，就存在这对象的概念（对象就是一个封装体，既可以封装数据也可以封装函数）
这些都是高级程序设计语言具备的共性内容，只不过各种语言对这些内容的表达形式有所不同，但是基本思想是一致的。

变量定义格式：
var x = 10;
x = “ABC”;
x = ‘c’;
x = true;
x = 3.14;
注意x可以是任意类型，因为JS是弱类型的
定义一个变量 JS是弱类型 var可以不写，因为JS是非严谨的
但是我们开发的时候建议按照严谨的方式来定义。

全局变量和局部变量：
全局变量在整个< script >标签中都有效，甚至整个页面
局部变量只能在某个区域内有效

运算符：
1.算术运算符 + - * / % ++ –
2.赋值运算符 += -= *= /= %=
3.比较运算符 < > <= >= !=
4.逻辑运算符 && || !
5.位运算符 ^ & | >> << >>>
6.三元运算符 ? :

小细节：
1.未定义：undefined 其实它是一个常量
2.要获取具体的值的类型，可以通过typeof来完成
3.如果要将数据直接打印到网页中 document.write(…);

语句：
顺序语句
判断语句 if
循环语句 while do…while for
选择语句 switch
其他语句 break continue

数组：
JavaScript中数组的特点：
1.数组的长度是可变的
2.元素的类型是任意的，但是在储存数据的时候建议使用同种类型，便于操作
JavaScript中定义数组的两种方式：
1. var arr = []; || var arr = [1,2,3,4];
2. 使用JavaScript中的Array对象来完成定义
var arr = new JavaScript语法_对象.Array.Array();
var arr = new JavaScript语法_对象.Array.Array(5); 定义了一个长度为5的数组
var arr = new JavaScript语法_对象.Array.Array(1,2,3); 数组中的元素为 1，2，3

函数：
函数是一个封装功能的封装体
定义函数通常需要两个明确：
1.方法的返回值
2.方法体中参与运数的未知内容
JavaScript中定义函数的格式：
通过关键字function定义函数
function 函数名(参数列表){
函数体：
return 返回值 //如果没有具体的返回值，可以不写return
//JavaScript是弱类型，返回值是任意类型
}
小细节：
JavaScript中函数的小细节
1.只要使用了函数的名称就是对函数进行了调用
2.函数中有一个数组对传进来的参数进行储存，这个数组就是 arguments 比如说你的参数数列表有两个参数，你传入了三个参数那么这第三个参数并没有丢它是储存在 arguments 数组中
/* 小细节二演示 */
function show() {
return “hello”;
}
//第一种情况:在调用函数时 少写了一个括号
var x = show; //JavaScript时基于对象的，这个函数就是一个对象相对于把这个函数的对象赋值给x
// alert(x); //打印的不是函数的地址值，而是函数里面的函数体以字符串的形式输出
//在输出输出语句中这么写 x() 是直接调用了函数
//就相当于这个函数有两个函数名
alert(x());
JavaScript中的其他函数的表达形式：
1.动态函数：
使用的是JS中内置的 Function对象 使用的并不是很多 参数列表函数体都是通过字符串动态指定的
例：
var add = new Function(“x,y”,“var sum; sum=x+y;return sum;”)
var temp = add(10,20);
alert(temp);
2.匿名函数：
没有名字的函数，通常是函数的简写形式
例：
var show = function (x,y){
return x + y;
}
alert(show(10,10));

对象
Object对象
toString方法：返回对象的字符串表示
对象 操作
JavaScript语法_对象.Array.Array 将Array的元素转换成字符串，结果字符串由逗号分隔，并连接起来
Boolean 如果Boolean值是true，则返回"true" 否则 返回 “false”
Date 返回日期的文字表示法
Error 返回一个包含相关错误信息的字符串
Function 返回如下格式的的字符串，其中function是被调用了toString方法函数的名称
function hove(x,y) {
return x + y;
}
Number 返回数组的文字表示
String 返回String对象的值

valueOf方法：返回指定对象的原始值
JavaScript语法_对象.Array.Array 将Array的元素转换成字符串，结果字符串由逗号分隔，并连接起来 其操作与Array.toString和Array.join方法相同
Boolean Boolean值
Date 储存的时间是从1970年1月1日午夜开始计的毫秒值UTC
Function 函数本身
Number 数字值
String 字符串值

String对象
String对象定义的两种格式：
1.var temp = new String(“abc”);
2.var temp = “abc”;
String对象的一些方法介绍：
length 获取字符串的长度
bold 将字符串中的内容用两个标签包裹
fontcolor 设置字符串的颜色
substr 截取 含头含尾
substring 截取 含头不含尾

String对象中的prototype属性：
prototype属性：返回对象类型原型的引用
原型：就是该对象的一个描述，该描述中如果添加了新功能，那么该对象都会具备这些功能
而prototype就可以获取到这个原型对象
通过prototype就可以对对象的功能进行扩展
通过prototype就可以获取到这些原型对象

JavaScript语法_对象.Array.Array(数组)对象：
常用的方法：
concet方法：返回一个新数组，这个数组是由两个或者多个数组组合而成的
join方法：返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定分隔符来隔开来
pop方法：移除数组中的最后一个元素并返回这个元素，如果数组为空就返回（未定义）undefined
push方法：将新元素添加到一个数组中，并返回数组的新长度值（相当与Java中的二维数组）
reverse方法：反转
shift方法：移除数组中的第一个元素并返回这个值
slice方法：返回一个数组的一段，两个参数，含头不含尾
sort方法：排序
splice方法：从一个数组中移除一个或多个元素，在移除元素的位置上插入新元素，返回所移除的元素
toLocaleString方法
toString方法
unshift方法：将指定元素插入数组的开始位置并返回该数组
valueOf方法

Date对象：
定义格式：
var date = new Date();
常用的方法：
getFullYear(); 获取年
getMonth(); 获取的月份（加一获取的是单前月份）
getData(); 获取一个月中的具体日期
getDay(); 获取一个星期中的第几天
getHours(); 获取时
getMinutes(); 获取分
getSeconds(); 获取秒
toLocaleString(); 获取的是日期和时间
toLocaleDateString(); 获取的只有日期（获取的是本地日期）

Math对象：
Global对象：是一个固定的对象，用来把所有的全局方法集中在一个对象中 parseInt()方法 将字符串整数转换成整数

Number对象:代表数值类型和提供数值常数的对象

JavaScript中的特有语句：
with语句
为了简化对象调用内容的书写，可以使用JavaScript中特有的语句来完成
格式：
with(对象){
在该区域中可以直接使用指定对象的内容，不需要写 对象. 调用
}

for in 语句：用来遍历对象
格式：
for(变量 in 对象){
}

自定义对象
如果想要自定义对象，应该先对对象进行描述
js是基于对象不是面向对象，不具备描述事物的能力
我们还想按照面向对象的思想进行编写
就要先描述在js中，可以用函数来描述面向对象中的描述

//自定义对象方式一：
< script type=“text/javascript”>
function Person() { //相当于构造器一个方法
alert(“person run”)
}
//通过描述进行对象的建立
var p = new Person();
//动态给p对象添加属性，直接使用p.属性名即可
p.name = “zhangsan”;
p.age = 12;
//如果定义的p对象是应该函数，即是给p对象添加
p.show = function () {
// document.write(“show run”)
alert(“show:”+this.name+":"+this.age);
}
p.show();

自定义对象方式二：

 < script type="text/javascript">
        function Animal(name,age) {
            this.name  = name;
            this.age = age;
            this.setName = function (name) {
                this.name = name;
            }
            this.getName = function () {
                return this.name;
            }
            this.setAge = function (age) {
                this.age = age;
            }
            this.getAge = function () {
                return this.age;
            }
        }

       var animal = new Animal("小明",23);
        animal.setName("小孩");
        animal.setAge(25);
        alert(animal.getName()+":"+animal.getAge())

自定义对象方式三：

<script type="text/javascript">
        var temp = {
            //定义一些成员
            "name":"小明","age":17,
            "getName":function() {
                return this.name;
            }
        }
        //对象调用成员有两种方式：
        //1，对象名.属性名
        //2，对象["属性名"]
        alert(temp.age + ":" + temp.getName());
        alert(temp["name"] + ":" + temp.age);

        //获取对象中的属性和属性中的方式
        for(x in temp){
            document.write(x + ":" + temp[x]);
        }

自定义对象方式四：

<script type="text/javascript">
        var map = {
            1:"小明",2:"校长",3:"张天志",4:"武大郎"
        }
        // var value = map["1"];
        // document.write("value" + "=" + value);
        function get(key) {
            return map[key];
        }
        var temp = get(2);
        document.write("temp" + ":" + temp);
    </script>

//自定义对象
<script type="text/javascript">
        //自定义对象
        var myObject = {
            name:"张三",age:23
        }
        alert(myObject.name+":"+myObject["age"]);


        //自定义对象
        var myObject2 = {
            "name":"李四","age":24
            }
        alert(myObject2.name + ":" + myObject2["age"]);

        //自定义对象
        var myObject3 = {
            name:["张三","李四","王五","赵六"],
            age:[13,14,15,16]

        }
        alert(myObject3.name[2] + ":" + myObject3.age[2]);
        //自定义对象
        var myMap = {
            names:[{"myName":"张大炮"},{"myAge":18}]
        }
        alert(myMap.names[0].myName);
    </script>

JavaScript高级

DOM的简单学习：
功能：控制html文档的内容
代码：获取页面标签（元素）对象 Element
* document.getElementById(“id值”); 通过元素的id获取元素对象
操作Element对象：
1.修改属性值
# 对象名.属性名 = 新的属性值
2.修改标签体内容
# 属性：innerHTML

事件的简单学习：
概念：某些组件被执行了某些操作后，触发某些代码的执行
如何绑定事件：
1.直接在html标签上，指事件的属性（操作），属性值就是js代码
# 事件：onclick - - - 单击事件
2.通过js获取元素对象，指定事件属性，设置一个函数

BOM:
1.概念：Browser Object Model 浏览器对象模型
2.组成：
# Window：窗口对象
# Navigator：浏览器对象
# Screen：显示器屏幕对象
# History：历史记录对象
# Location：地址栏对象

Window：窗口对象
1.创建
window.
2.方法
# 与弹出框有关的方法
alert() 显示有一段消息和一个确认按钮的警告框
confirm() 显示有一段消息以及确认和取消按钮的对话框
# 如果用户点击确认按钮，则方法返回true
# 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框
# 返回值：获取用户输入的值
# 与打开关闭有关的方法
close() 关闭浏览器窗口
# 谁调用我，我关闭谁
open() 打开一个新的浏览器窗口
# 返回一个新的window对象
# 与定时器有关的方法
setTimeout() 在指定毫秒数后调用函数或计算表达式
# 参数：
1.js代码或方法对象
2.毫秒值
# 返回值：唯一表识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout
setInterval() 按照指定的周期（以毫秒记）来调用函数或计算表达式
# 参数：
1.js代码或方法对象
2.毫秒值
# 返回值：唯一表识，用于取消定时器
clearInterval() 取消由 setInterval() 设置 timeout
3.属性
1.获取其他BOM对象
# history
# location
# Navigator
# Screen
2.获取DOM对象
# document
4.特点
# Window对象不需要创建，可以直接使用 window使用。window.方法名();
# window引用可以省略，直接就是方法名 比如 alert();

location：地址栏对象
1.创建（获取）：
window.location
location
2.方法：
reload() 重新加载当前页面，刷新
3.属性：
href 设置或返回完整的 URL

History：历史记录对象
1.创建（获取）：
Window.history
history
2.方法：
# back() 加载 history列表中的前一个 URL （后退）
# forward() 加载 history列表中的后一个 URL （前进）
# go(参数) 加载 history列表中某一个具体页面
# 参数：
# 如果是正数：前进几个历史记录
# 如果是负数：后退几个历史记录
3.属性：
# length 返回当前窗口历史记录列表的个数

DOM:
1.DOM的概念：Document Object Model 文档对象模型
# 将标记语言文档的各个组成部分，封装成对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作
2.W3C DOM 标准被分为 3 个不同的部分
# 核心 DOM - 针对任何结构化文档的标准模型
# Document：文档对象
# Element：元素对象
# Attribute：属性对象
# Text：文本对象
# Comment：注释对象
# Node：节点对象，其他5个的父对象
# XML DOM - 针对 XML 文档的标准模型
# HTML DOM - 针对 HTML 文档的标准模型

核心 DOM模型
# Document：文档对象
1.创建（获取）：
# window.document
# document
2.方法：
1.获取Element对象
# getElementById()：根据id属性值获取元素对象，id属性值一般唯一
# getElementByTagName()：根据元素名称获取元素对象们，返回值是一个数组
# getElementByClassName()：根据class属性值获取元素对象们，返回值是一个数组
# getElementByName：根据name属性值获取元素对象们，返回值是一个数组
2.创建其他DOM对象
# createAttribute(name)：创建拥有指定的属性节点，并返回新的 Attr对象
# createComment()：创建注释节点
# createElement()：创建元素节点
# createTextNode()：创建文本节点
# Element：元素对象
1.创建（获取）：通过document来获取和创建
2.方法
# removeAttribute()：删除属性
# setAttribute()：设置属性
# Node：节点对象，其他5个的父对象
1.特点：所有dom对象都可以被认为是一个节点
2.方法：
# CRUD（增删改查） dom树
增 # appendchild()：向节点的字节点列表的结尾添加新的字节点
删 # removChild()：删除（并返回）当前节点的指定字节点
改 # replacechild()：用新节点替换一个字节点
3.属性：
# parentNode 返回当前节点的父节点
HTML DOM
1.标签体的设置和获取：innerHTML
2.使用html元素对象的属性
3.控制样式
1.使用元素的style属性来设置
如：
//修改样式一：
div1.srtye.border = “1px solid red”;
div1.style.width = “200px”;
//font - size -> fontSize
div1.style.fontSize = “20px”
2.提前定义好类选择器的样式，通过元素的className属性来设置其class属性值

事件：
# 概念：某些组件被执行了某些操作后，触发某些代码的执行
# 事件：某些操作，如单击，双击，键盘按下，鼠标移到
# 事件源：组件，如：按钮 文本输入框
# 监听：代码
# 注册监听：将事件，事件源，监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器代码
常见的事件：
1.点击事件
# onclick：单击事件
# ondblclick：双击事件
2.焦点事件
# nobler：失去焦点
# onfocus：获得焦点
3.加载事件：
# onload：一张页面或一幅图像完成加载
4.鼠标事件：
# onmousedown：鼠标按下
# onmouseup：鼠标松开
# onmouseover：鼠标移到某个元素上
# onmouseout：鼠标从某个元素上移开
5.键盘事件：
# onkeydown：某个键盘被按下
# onkeyup： 某个键盘按键被松开
# onkeypress：某个键盘按键按下并松开
6.选择和改变：
# onchange：域的内容被改变
# onselect ：文本被选中
7.表单事件：
# onsubmit：确认按钮被点击
# 方法返回的false，就阻止了提交
# onreset：重置按钮被点击

Tang.Mr
发布了30 篇原创文章 · 获赞 40 · 访问量 6517
私信 关注

猜你喜欢

转载自blog.csdn.net/ScholarTang/article/details/88261553
今日推荐
周排行
错误：聚合‘std::ifstream inFile’类型不完全，无法被定义
Python中Django中的JS异步调用疑难杂症
使用Bind服务配置DNS服务器
关于调试中的printf的坑
04：一文初探Tensorflow高级API使用（初学者篇）
修改MySQL数据库中主键的值
Codeforces 33B. String Problem（Floyd最短路）
【8】文件的读写
报表导出之easypoi的应用
剑指Offer(Python多种思路实现):用两个栈实现队列
每日归档
更多
2024-07-21(0)
2024-07-20(0)
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)
2024-07-12(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022