学习笔记javascript

最新推荐文章于 2023-01-05 22:23:14 发布
最新推荐文章于 2023-01-05 22:23:14 发布
阅读量191 收藏
点赞数
文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56463670/article/details/115350781
版权

https://www.w3school.com.cn/js/js_examples.asp

一、webAPI是什么？

是浏览器提供关于操作浏览器功能和页面元素的API。比如：弹出框口：alert（“啊啊啊”）
一般有输入输出参数值值；

二、DOM

1.什么是dom

文档对象模型 文档接口：html和xml，改变网页内容，样式，结构。京东右滑。 文档： 元素： 结点：

问题

1.console.log=(p.innerHTML);审查没有console

2.获取元素

ID getElementbyid

id必须在script前面，不然找不到,在标签下面

<body>
	<div id="time">2019-9-9</div>
	<script>
	//1.getelmentbyid('id')中id是字符串
	//2.返回元素对象object
	//3.下面代码显示出标签<div id="time">2019-9-9</div>
	var timer = document.getElementById('time');
	console.log(timer);
	console.log(typeof timer);
	//4.检测数据类型typeof
	//5.console.dir 打印返回的元素对象
	console.dir(timer);
	</script>
</body>

根据标签名获取

getElmentsByTagName();

<body>
   <ul>
   	<li>五星红旗迎风飘扬1</li>
   	<li>五星红旗迎风飘扬2</li>
   	<li>五星红旗迎风飘扬3</li>
   </ul>
   <ol>
   	<li>五星红旗迎风飘扬1</li>
   	<li>五星红旗迎风飘扬2</li>
   	<li>五星红旗迎风飘扬3</li>
   </ol>
<script>
   //1.返回元素对象集合，以伪数组存储
   //2.返回元素对象object
   //3.下面代码显示出标签<div id="time">2019-9-9</div>
   var  lis = document.getElmentsByTagName('li');
   console.log(lis);
   console.log(lis[0]);
   //依次打印,遍历
   	for(var i =0; i<lis.length;i++){
   	console.log(lis[i]);
   	}
   	//页面只有1或者0个元素，返回为伪数组
   	//element.getelementbytagname('标签名');父元素必须是指定的单个元素
   	//element.getelementbytagname('ol');
   	//console.log(ol[0].getelementbytagname()
</script>
</body>

H5根据类别获取元素

getElementByClassName('类名');获得某些元素集合；下面得到是box1；box2；
		
querySelector('选择器')；返回指定选择器的第一个元素对象；下面得到是box1；

<body>
   <div id="class">box1</div>
   <div id="class">box2</div>
   <ul>
<li>首页</li>
<li>产品</li>

</ul>
   <script>
   var  boxs = document.getElmentsByTagName('box');
   console.log(boxs);
}
</script>
</body>

要特别注意相等运算符**==**。JavaScript在设计时，有两种比较运算符：

第一种是**==**比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是**===**比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用比较，始终坚持使用=比较。

另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己：

键值对

JavaScript的对象是一组由键-值组成的无序集合，例如：

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

要获取一个对象的属性，我们用对象变量.属性名的方式：

person.name; // ‘Bob’
person.zipcode; // null

slice

slice
slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：

var arr = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: [‘A’, ‘B’, ‘C’]
arr.slice(3); // 从索引3开始到结束: [‘D’, ‘E’, ‘F’, ‘G’]
注意到slice()的起止参数包括开始索引，不包括结束索引。

如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array：

var arr = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’];
var aCopy = arr.slice();
aCopy; // [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’]
aCopy === arr; // false

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。

<script>
window.alert(5 + 6);
</script>

使用 document.write() 方法将内容写到 HTML 文档中。

<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>

使用 innerHTML 写入到 HTML 元素。

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

使用 console.log() 写入到浏览器的控制台。

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

avaScript是弱类型编程语言,定义变量都使用 var 定义,与 Java 这种强类型语言有区别.

在定义后可以通过 typeOf() 来获取JavaScript中变量的数据类型.

// Number 通过数字字面量赋值

// Number 通过表达式字面量赋值

// String 通过字符串字面量赋值

// Array 通过数组字面量赋值

// Object 通过对象字面量赋值

访问对象属性

person.lastname；
person[“lastname”];

访问对象的方法

name=person.fullname();

创建和访问对象的方法

1.创建

fullName : function() //对象的方法
{
return this.firstName + " " + this.lastName;
}

2.访问

document.getElementById(“demo”).innerHTML = person.fullName();

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() //对象的方法
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

js函数

<script>
function myfunction()
{
	var a=5;
	alert("hello world");
	return a;//返回值，遇到return才会停止，并返回值
}
</script>
<button onclick="myfunctionz()"></button>

js变量

局部变量函数运行后删除；全部变量页面关闭删除；
未申明变量的赋值变全局变量可配置属性，可删除；
例子：var2=2；
var var1=1；
delete var1；//失败
delet var2; //成功

function aaa()
{
var2 =2；
}
alert(var2);//可以调用全部变量

事件

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button><p id = "demo"></p>

var test = document.getElementById("test");
test.onclick = function changeContent(){
    //......
}

点击按钮后会在下方 p 中 显示时间

添加事件句柄实例：

<input id="test" type="button" value="提交"/>
<script>
window.onload = function(){
    var test = document.getElementById("test");   
    test.addEventListener("click",myfun2);   
    test.addEventListener("click",myfun1);
}
function myfun1(){  
    alert("你好1");
}
function myfun2(){ 
    alert("你好2");
}
</script>

条件运算符

实例
如果变量 age 中的值小于 18，则向变量 voteable 赋值 “年龄太小”，否则赋值 “年龄已达到”。

voteable=(age<18)?"年龄太小":"年龄已达到";

如果三条表达式都不成立，则程序不会继续执行。

<script>
var minute=new Date().getMinutes();//获取当前时间数
let obj={
'24':()=>{document.write("24");},
'25':()=>{document.write("25");},
'26':()=>{document.write("26");},
}
obj[minute]();
document.write("如果当前时间分钟数不是24/25/26中的任意一个数，这一条应该不会被执行。");
</script>

for in用法

var obj = {a:1, b:2, c:3};

for (var prop in obj) {
console.log(“obj.” + prop + " = " + obj[prop]);
}

// Output:
// “obj.a = 1”
// “obj.b = 2”
// “obj.c = 3”

数组属于特殊对象

typeof[1,1,1,1] //返回为object

在 JavaScript 中

有 6 种不同的数据类型：

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

1、定义
 （1）undefined：是所有没有赋值变量的默认值，自动赋值。
 （2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。
2、何时使用null?
当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。
3、null 与 undefined 的异同点是什么呢？
共同点：都是原始类型，保存在栈中变量本地。
不同点：
（1）undefined——表示变量声明过但并未赋过值。
它是所有未赋值变量默认值，例如：
var a;    // a 自动被赋值为 undefined
（2）null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用，例如：
var emps = ['ss','nn'];
emps = null;     // 释放指向数组的引用

constructor属性 返回变量的构造函数

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
    "john".constructor + "<br>" +
    (3.14).constructor + "<br>" +
    false.constructor + "<br>" +
    [1,2,3,4].constructor + "<br>" +
    {name:'john', age:34}.constructor + "<br>" +
    new Date().constructor + "<br>" +
    function () {}.constructor;
</script>


返回结果：constructor 属性返回变量或对象的构造函数。

function String() { [native code] }
function Number() { [native code] }
function Boolean() { [native code] }
function Array() { [native code] }
function Object() { [native code] }
function Date() { [native code] }
function Function() { [native code] }

判断是否有数组

function isArray(myArray) {
return myArray.constructor.toString().indexOf(“Array”) > -1;
}
toString() 把数字转换为字符串：
indexOf()indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

正则表达式

<script>
function myFunction() {
    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);//找单词在第几位
    document.getElementById("demo").innerHTML = n;
}
</script>

使用 test()

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 “e”：

实例

var patt = /e/;
patt.test("The best things in life are free!");

字符串中含有 “e”，所以该实例输出为：

true

正则表达式表单验证实例：

/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}

JavaScript 错误 - throw、try 和 catch

<script>
var txt="";
function message(){
	try {
		adddlert("Welcome guest!");
	}
	catch(err) {
		txt="本页有一个错误。\n\n";
		txt+="错误描述：" + err.message + "\n\n";//err.message系统弹出错误消息
		txt+="点击确定继续。\n\n";
		alert(txt);
	}
}
</script>

** 清空输入框 finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
**

finally {
    document.getElementById("demo").value = "";
  }

throw 语句允许我们创建自定义错误。正确的技术术语是：创建或抛出异常（exception）。

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;//把抛出的err显示
    }
}
</script>

let和const

ES6 可以使用 let 关键字来实现块级作用域。

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

循环作用域 使用 var 关键字：

实例
var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 10

const关键字

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

实例
const PI = 3.141592653589793;

什么是 JSON?

*JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言 *
JSON 易于理解。
JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

设置锚点

href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

实例
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行，如

void(alert(“Warnning!”))

异步 AJAX

除了 setTimeout 函数以外，异步回调广泛应用于 AJAX 编程。有关于 AJAX 详细请参见：https://www.runoob.com/ajax/ajax-tutorial.html

XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调：

实例
<script>
var xhr = new XMLHttpRequest();
 
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();
</script>

jQuery–ajax

XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。如果你使用完整的 jQuery 库，也可以更加优雅的使用异步 AJAX：

实例

$.get("https://www.runoob.com/try/ajax/demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
});

函数声明后不会立即执行，会在我们需要的时候调用到。

Function() 构造函数

在以上实例中，我们了解到函数通过关键字 function 定义。

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。

实例
var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

实际上，你不必使用构造函数。上面实例可以写成：

实例
var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);

通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class=“intro” 的元素：

实例
var x=document.getElementsByClassName(“intro”);

增加监听事件

注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
在座的各位都是大佬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JavaScript数据类型的一些注意点（2）
永远保持谦卑好学
02-19 439
参考：廖雪峰老师的JavaScript全栈教程数组要取得Array的长度，直接访问length属性：请注意，直接给Array的length赋一个新的值会导致Array大小的变化：var arr = [1, 2, 3]; arr.length; // 3 arr.length = 6; arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
关于Object.assign与 JSON.parse(JSON.stringify())
weixin_30607659的博客
07-30 618
假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。例如： var arr = [a,b,{c:111}], var val={c:222} var copy = Object.assign(arr[2], val); 此时，arr [2].c 和 copy.c指向的还是一个同一个对象。 Object.assign()只是一级属性复制，比浅拷贝多深拷...
JavaScript 学习笔记 （一）
偶是大禹的博客
08-25 456
JavaScript 学习笔记 （一） 1.JavaScript的使用： 有两种方法可以引用它： - ** 把JavaScript嵌入到html代码中的任意一个部分，不过通常我们都把JavaScript代码放到中** html> head> script> alert('Hello, world'); script> head> html> 把Java
深拷贝和浅拷贝
weixin_34270606的博客
11-14 105
定义深拷贝、浅拷贝 不要相信其他人说的什么拷贝一层的是浅拷贝，如果拷贝后不影响原来对象内容的就是深拷贝，如果影响就是浅拷贝 深拷贝一般不考虑基本数据类型(除了Object之外的)，因为基本数据类型的简单的赋值就是深拷贝,所以在说深拷贝的时候只说引用数据类型 下面说下引用数据类型的浅拷贝，引用数据类型的赋值就是栈内存地址的拷贝，a 和 b 中的栈使用的是相同的内存地址，指向同一个堆内存中的内容 ...
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
JavaScript学习笔记
06-23
本资源“JavaScript学习笔记”是为初学者精心准备的一份教程，旨在帮助你快速掌握JavaScript的基础知识，并解决在学习过程中可能遇到的问题。 1. **变量与数据类型**： JavaScript支持多种数据类型，包括基本类型...
javaScript学习笔记
最新发布
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
【JavaScript】JS学习笔记
睹物思理
05-24 263
（本笔记以廖雪峰JavaScript教程为主，其他学习资源为辅）【基本语法】1、网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。2、浏...
字符串的转义、多行以及连接方法(+,$)；数组的属性和方法
zz2230633069的博客
08-25 1240
转义字符：\可以转义很多字符，比如\n表示换行，\t表示制表符，字符\本身也要转义，所以\\表示的字符就是\。注意转义的字符长度是1,汉字长度也是1。 多行表示：由于多行字符串用\n写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反引号 ` ... ` 表示 `这是一个 多行 字符串`; 连接字符串：有两种方法，第一种方法使用+连接符连接；第二种方法使用ES6的模板字符串，格式中必须采用反引号，变量使用${}。 var name = '小明'; var age = 20;
call,apply,bind的用法
weixin_30292843的博客
02-07 104
关于call,apply,bind这三个函数的用法，是学习javascript这门语言无法越过的知识点。下边我就来好好总结一下它们三者各自的用法，及常见的应用场景。 首先看call这个函数，可以理解成"借用“,"请求"。想像一下如下的情景：你孤单一人漂泊在外，有急事想往家里打电话，可是很不巧，手机欠费了，或者没电了，或者掉坑里了，总之你的手机就是用不成。可是你非打这个电话不可，于是你可以去借一下...
javascript 数组以及对象的深拷贝（复制数组或复制对象）的方法
热门推荐
FungLeo's Blog
02-08 13万+
javascript 数组以及对象的深拷贝（复制数组或复制对象）的方法前言在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝。如下图演示： 如上，arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需要的结果。 因此，数组以及对象的深拷贝就是javascript的一个基本功了。数组的深拷贝条条大道通罗马，实现数组的深拷贝，是有好几种方法的。举例如下：for 循环
vue 注册登录遇到的问题 function(){[native code]}
xiaoerlang715的博客
12-10 6184
登录按钮一直获取不到  查看代码 显示 function(){[native code]}  查了百度   [native code]的意思 说是非法调用导致的 仔细查看代码 原来是粗心导致的   ...
JavaScript 错误
梁辰兴的博客
01-05 440
如果值是错误的，会抛出一个异常（错误）。如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。实例 在下面的例子中，我们故意在try块的代码中写了一个错字。可能是语法错误，通常是程序员造成的编码错误或错别字。可能是由于来自服务器或用户的错误输出而导致的错误。语句测试代码块的错误。
html 文本出现 function String() { [native code] }
hdlgame的博客
01-13 7951
function String() { [native code] } 是因为你的bean属性使用了javascript关键字。
js try catch finally语句 throw onerror
05-15 105
定义和用法 try/catch/finally 语句用于处理代码中可能出现的错误信息。 错误可能是语法错误，通常是程序员造成的编码错误或错别字。也 可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。 try语句允许我们定义在执行时进行错误测试的代码块。 catch语句允许我们定义当try代码块发生错误时，所执行的代码块。 finally语句在 try 和 catch 之后...
javascript围观IE10中window对象的结构
weixin_34061042的博客
11-07 237
我在<<javascript遍历DOM结构和对象结构>>一文中提供了一个遍历对象结构的函数，利用这个函数，展现IE10中window对象的结构（还真是不少啊～调试代码也在呢～）如下： 调试信息: [Object] window |--[function] addEventListener = f...
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值