JavaScript(狂神）

最新推荐文章于 2023-11-21 22:16:14 发布
最新推荐文章于 2023-11-21 22:16:14 发布
阅读量362 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45898776/article/details/123262679
版权

JavaScript？

脚本语言

创造者

2. 入门

2.1

  1. 内容部标签， JavaScript内容写在中

  2. 外部引用

    <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>这是标题</title>
    <!--script标签内写JavaScript代码-->
    <script src="./j1.js">
    </script>
</html>

2.2基本语法知识

  1. 注释： 和java一样 // 后面需要有空格
  2. JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写

3. 数据类型

3.1 var 关键词告知浏览器创建新的变量

3.2 查看数据类型：

typeof 0                   // 返回 "number"
typeof 314                 // 返回 "number"
typeof 3.14                // 返回 "number"
typeof (7)                 // 返回 "number"
typeof (7 + 8)             // 返回 "number"

number

字符串

`` tab键上的

var str = `
aaaaaaa
bbbbbbb
ccccccc
`
console.log(str);

模板字符串

console.long("abc,${name}")

  • 字符串操作：

    str.length etc.

比较运算符

// == 等于（类型不一样，值一样会判断为 true）
// === 绝对等于（两者都要等）
// -- NaN 与所有数值都不等，包括自己
// -- 只有isNaN(NaN) 判断是否是
// != 不相等
// !=== 值不相等或类型不相等
// && || ！
// 条件运算法：
// variablename = (condition)?a:b

数组 //多维数组

数组可以包含不同类型数据 （python）

  1. 超出数据类型，是undefined

  2. 注：array.length=新长度， 数组长度可变的，变小元素丢失。

  3. arr.slice() 截取

  4. arr.push(), pop() 尾操作

  5. unshift() , shift() 对应于5，头操作

  6. arr.concat(str) 返回一个新数组，不是修改原来的

对象

对象是大括号{ }，若干个键值对

console.log("satart");
var person ={
    name: "zz",  // 键都是字符串，值任意
    age: 3,
    tags: [1,2,3]
}
person.age
var 对象名 = {
    属性名：属性值,
    ...}

  1. 动态属性删除： delete person.age

  2. 添加属性 person.id = ‘1234’

  3. 判断对象是否包含某个属性

3.3 作用域：

局部变量用let 声明

3.4 数组循环

Array.foreach() 函数：

1--------------
let text;
arr.forEach(myf);
function myf(value){
    text += "<li>"+value+"</li>";
}
console.log(text);
2------------------
arr.forEach(function (value){
    .....;
})
3---------------
    for (var value in arr){
        myf(value)
    }

3.5 Map . Set

Map 类似字典

var map = new Map([['a', 1],['b', 2]])
console.log(map.get('a'))
map.set('a',100) 
console.log(map.get('a'))

Set 无序集合

var set = new Set([1,2,3,22,22]) //去除重复的

iterator 迭代次，map和set都有

3.6 遍历数组，Map，Set

var map = new Map([['a', 1],['b', 2]])
for (let i of map){		// of 是value
    console.log(i);      
}
var list = [1, 2, 3]
for(let j in list){       // in 是下标
    console.log(j);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KhouxSHk-1646309307287)(C:\Users\zz\AppData\Roaming\Typora\typora-user-images\image-20220225224306148.png)]

4. 函数

4.1 函数定义

function f(value){
 ......
}
var abs = function(x){
 ......
}

参数问题

arguments，代表传进来的所有参数

function myf(value){     //会输出所有参数
 console.log(value);
 for(let i=0;i<arguments.length;i++){
     console.log(arguments[i]);
 }
}
myf(123,1,23,42);

rest, 获取除之前已经定义的参数

function myf(a,...rest){
 console.log(rest);       //除a 其他参数
}

4.2 全局对象 window

window.alert 既是函数又不是变量

var old = window.alert;
window.alert = funcion(){
 //改写
}
var x =10;
//x === window.x

注意：全局变量都会绑定到window，不同js使用相同全局变量会有冲突

4.2 变量作用域

作用域，常量es6 ，const PI=‘3.14’;

apply控制js中this的指向

function getAge(){
    // 获得年龄
}
var person ={
    name:"aa",
    age: getAge
}
getAge.apply(person,[]) // 指向person，参数为空

5. 常用对象

5.1 日期

var d = new Date()

5.2 数学

没有构造函数，都是静态 ： Math.abs()

5.3 随机

Math.random();
Math.floor(Math.random() *10) // 返回0 9 整数
Math.floor(Math.random() *(max- min)) + min  // 介于max,min之间 含min不含max
Math.floor(Math.random*(max - min +1))+min //包含min max

5.4 逻辑

// Boolean(1>2) false 函数判断
// 布尔也可是对象
var y = new Boolean(false);

5.5 JSON

JSON在js中，一切对象都可以用JSON字符串表示

var user = {
    'name':'zz',
    'age': 23
}

var jsonUser = JSON.stringify(user);
var user2 = JSON.parse(jsonUser)
console.log(user2);
console.log(jsonUser);

5.6 Ajax

  • 原生Js写法， xhr异步请求
  • jQuery 封装好的方法
  • axios 请求

6 对象

6.1 构造使用

构造 / set get用法 static

class obj {
	constructor(name){
        this.name = name;
    }
    test(){
        ....
    }
}
// -------------------
class one extends{
    constructor(name,age){
        super(name);
        this.age = age;
    }
}

6.2 原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gUVWLrvV-1646309307289)(C:\Users\zz\AppData\Roaming\Typora\typora-user-images\image-20220301161133024.png)]

7.操作BOM对象（*）

window

window代表 浏览器窗口

window.Navigator

封装了浏览器的信息

screen

代表屏幕

loaction

代表当前URL信息

//window.location
href: 当前URL
hostname:
pathname: 当前页面的路径或文件名
protocal: 协议
port:
window.location.assign(new)  // 加载新文档

document

代表当前页面

获取具体文档树结点

var s = document.getElementById('id')

//获取cookie
document.cookie

history

history.back()
history.forward()

8. DOM

  • 增
  • 删
  • 查
  • 改

8.1 获取结点方法

var n1 = document.getElementsByTagName('h1');
let n2 = document.getElementById('p1');
let n2 = document.getElementsByClassName('className');


var father = document.getElementById('father');
var childrens = father.children;
father.firstChild
father.lastChild

8.2 更新结点

  • 更新文本

    var d1 = document.getElementById('d1');
d1.innerHtml = '<p>开始</p>';
d1.innerText = 'start!';

  • 更新样式 css

    let n2 = document.getElementsByClassName('className');
n2.style.

8.3 删除节点

步骤：先找到删除的父节点，通过父节点

var son = document.getElementById('son');
var father = son.parentElement;
father.removeChild(son);
// 删除是动态过程
father.child // 会发生变化

8.4 插入节点

9. 表单操作

10. jQuery

公式： $(selector).action()

选择器就是css选择器

$(document).ready(function () {
    console.log("这是加载完毕事件");

});

$(function () {
    console.log("这是加载完毕事件");

});

11.扩展

layer 弹窗组件

Element-ui

Co?T
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
狂神说javascript学习笔记
weixin_64274578的博客
08-07 314
javascript狂神说学习
【狂神说笔记—— Java基础17-JavaScript，jQuery】
weixin_46055348的博客
07-27 467
【狂神说笔记—— Java基础17-JavaScript，jQuery】
狂神说系列 JavaScript笔记
06-15
狂神说系列 JavaScript笔记
JavaScript狂神
weixin_45881243的博客
08-06 668
JavaScript // 弱类型语言 //严格区分大小写 var num =1; alert(num); // 123//整数123 // 123.1//浮点数123.1 // 1.123e3//科学计数法 // -99//负数 // NaN //not a number // Infinity // 表示无限大 = 1，“1” == 等于（类型不一样，值一样，也会判断为true） === 绝对等于（类型一样，值一样，结果为true） 这是一个JS的缺陷，坚持不要使用 == 比较 须知： NaN =
狂神Javascript学习笔记
qq_44758926的博客
04-10 1361
JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 一个合格的后端人员，必须要精通JavaScript 入门 引入JavaScript 内部标签 <script> alert("Hello World！"); </script> 外部引入 <script src="js/keleJs.js"></script> 基本语法入门 定义： var score= 1; 条件控制： if(){ }el
【狂神】JavaScript笔记
QinLaoDeMaChu的博客
04-04 4181
目录1. 什么是Javascript1.1 概述2. 快速入门2.1 引入JavaScript2.2 基本语法入门2.3 数据类型 1. 什么是Javascript 1.1 概述 JavaScript 是一门世界上最流行的脚本语言，仅用了 10 天就开发出来了 一个合格的后端人员，必须精通JavaScript 2. 快速入门 2.1 引入JavaScript 新建项目 JavaScript，删掉 src 1、内部标签 <script> //在这个标签内写javascript代码 <s
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
【狂神说JAVA】JavaScript详细笔记(全)
最新发布
weixin_66207170的博客
11-21 346
绝对值函数所有的函数都是由function定义的。
狂神说——JavaScript最新教程通俗易懂
淡水瑜的博客
06-15 1207
javascript
JavaScript 详细笔记（狂神说学习笔记）
weixin_46822367的博客
04-06 2106
目录1、什么是JavaScript1.1、概述1.2、历史2、快速入门2.1、引人JavaScript2.2、基本语法入门2.3、数据类型 1、什么是JavaScript 1.1、概述 JavaScript是一门世界上最流行的脚本语言 JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为 开发Web页面的脚本语言而出名，但是它也被 用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且 支持面向对象、命令式和声明式（
狂神说JavaScript笔记/md格式
01-22
跟视频的一模一样。md格式
Javascript学习笔记
09-15
Javascript学习笔记,对学习中遇到的问题进行整合
【狂神学习笔记】JavaScript
weixin_45500506的博客
08-03 583
文章目录JavaScriptJS的引入数据类型严格检查模式对象形如的for-each循环函数定义函数参数问题变量的作用域规范方法apply常见类的使用DateJSON面向对象编程什么是面向对象操作BOM对象（重点）获取cookie操作DOM对象(特别重要) JavaScript HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容。 CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。 JavaScrip
狂神JavaScript快速入门学习笔记
luojias的博客
04-22 1000
1什么是JavaScript JavaScript是一门世界上最流行的脚本语言 2快速入门 2.1 引入JavaScript 1 内部标签 <script> alert('hello world'); </script> 2外部标签 <script src="kkk.js"></script> 2.2 基本语法入门 2.2.1定义变量 一切变量定义都是var，局部变量建议使用let定义 不加var就是全局变量 ‘use str
狂神Javascript笔记
weixin_56299455的博客
06-28 1031
学习狂胜JavaScript所记录的笔记 Javascript笔记 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 2.1前端三要素： HTML（结构）：超文本标记语言，决定网页的结构和内容 CSS（表现）：层叠样式表，设
B站 - 狂神说 - JavaScript 随堂笔记（图）
热门推荐
bell_love的博客
06-03 1万+
文章目录1、什么是 avaScript1.1、概述1.2、历史2、快速入门2.1、引入JavaSciprt2.2、基本语法入门2.3、数据类型 1、什么是 avaScript 1.1、概述 JavaScript是一门世界上最流行的脚本语言 Java、 JavaScript 10天— 一个合格的后端人员,必须要精通 JavaScript 1.2、历史 JavaScript的起源故事 https://blog.csdn.net/kese7952/article/details/79357868 ECMAScri
狂神Java学习笔记————JavaScript（三）————DOM操作和jQuery
hyx的博客
06-15 873
需要注意： 关于节点（Node）和元素（Element） getElement和getElements DOM DOM：文档对象模型 浏览器网页就是一个DOM树形结构 对DOM节点进行增删改查 获取DOM节点 注意：Element是直接获取节点，即在接下来可以直接通过"."对节点进行操作，而Elements是获取一个节点数组，即使满足条件的节点只有一个，也需要取出数组中的第i个来真正取得节点。 //标签选择器 let h1=document.getElementsBy
狂神说javaScript笔记
m0_53550060的博客
04-17 872
# Unit01-javaScript初识 一、前端三要素 HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容 CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。 JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为 1. 结构层（HTML） 2. 表现层（CSS） **CSS层叠样式表是一门标记语言，并不是编程语言，**因此不
狂神说javascript笔记
09-01
狂神说是一位知名的程序员教育者，他在CSDN上分享了大量关于JavaScript的笔记和教程。他的JavaScript笔记涵盖了从基础语法到高级应用的各个方面。无论是初学者还是有一定经验的开发者，都可以从他的笔记中获得很多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值