JavaScript

最新推荐文章于 2024-06-25 10:05:02 发布
最新推荐文章于 2024-06-25 10:05:02 发布
阅读量67 收藏
点赞数
分类专栏： 前端 文章标签： javascript web安全 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43036356/article/details/130712274
版权

什么是JavaScript？

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、 笔记本电脑、平板电脑和智能手机等设备。

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，开发者用了十 天时间，公司为网景。

  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习

快速入门

  • 内部引入
<script>
alert("hello world");
</script>
  • 外部引入
<script src="./01file.js"></script>

语法

JavaScript严格区分大小写

变量的定义

变量类型 变量名 = 变量值

变量名：不能以数字开头，$、数字、字符、_组合。不能使用中文

<script>
    //1.变量定义
    var source = 1;
    alert(num);
</script>

条件判断

if、if-else、if-else if- else

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <script>
        //2.条件判断
        var source = 79;
        if(source > 60 && source < 70){
        alert("60~70");
        }else if(source > 70 && source < 80){
        alert("70~80");
        }else{
        alert("other");
        }
        </script>
    </head>
    <body>
    </body>
</html>

console.log() 可在浏览器中的console中进行输出变量


数据类型

数值、文本、图片、音频、视频等等

  • number 数字

    • 不区分小数和整数
    • NaN 通常用来判断一个变量是否是一个数字类型的值

  • 字符串

    • 单引号或双引号包裹

  • 多行字符串

    •   var msg = `
  hello
  world
  nihao
  `

  • 模板字符串

    •   <script type="text/javascript">
      var name = "xbxaq.com";
      var msg = `你好，${name}`;
  </script>

  • 转义字符，\

    • \n 换行
    • \t 制表符
    • \u4e2d

  • 字符串长度

    •   <script type="text/javascript">
      var name = "xbxaq.com";
      var msg = `你好，${name}`;
      console.log(msg.length)
  </script>

  • 字符串中取N个字符

    •   <script type="text/javascript">
      var name = "xbxaq.com";
      var msg = `你好，${name}`;
  		console.log(str[1])--从零开始计数，截取第一个字符
  </script>

  • 大小写转换

    •   //这里是方法，不是属性
  console.log(name.toUpperCase()) // 大写
  XBXAQ.COM
  console.log(name.toLowerCase()) //小写

  • 获取字符在字符串中的下标

    • console.log(msg.indexOf(‘b’))

  • 字符串截取

    • console.log(msg.substring(1,4)) 包前不包后

  • 布尔值

    • true、false

  • 逻辑运算

    • && 两个都为真，结果为真
    • || 一个为真，结果为真
    • ! 真即是假，假即是真

  • 比较运算符

    • = 赋值
    • == 等于（类型不一样，值一样）
    • === 绝对等于（类型一样，值一样）
    • NaN === NaN 与所有的值都 不相等，包括它自己
    • isNAN( ) — 是否为空

数组

数组中可以包含任意的数据类型

var arr = [1,2,3,4,5,6adfadf];

  • 取数组长度

    • arr.length
    • arr.length=2
    • 给arr.length赋值，数组大小会发生变化

  • 字符在数组中的下标索引 indexOf

    • console.log(arr.indexOf(2))

  • slice() 截取数组的一部分，返回一个新的数组，类似于substring方法

    • onsole.log(arr.slice(1,3))

  • push、pop、unshift()、shift()

    •   //push() 将新的元素加入到数组末尾
  //pop() 将元素从数组的尾部去除
  //unshift() 将新的元素加入数组的头部
  //shift() 弹出数组中的头部一个元素
  console.log(arr.push(99))
  console.log(arr.pop())
  console.log(arr.unshift(97))
  console.log(arr.shift())

  • 排序、正序 sort()

    • console.log(arr.sort())

  • 元素反转 reverse()

    • console.log(arr.reverse())

  • 拼接数组后，返回一个新的数组 concat()

    • console.log(arr.concat([33,44,55]))

  • 连接符，join()，使用特定符号打印拼接数组

    • console.log(arr.join(“@”))

  • 多维数组

    •   var arr = [[1,2,3,4,5],[2,3,4,5,6]]

对象

var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名，属性值
}
JavaScript中所有的属性名都是字符串，属性值可以是任意类型

  1. 读取对象的值

    1.  person.name
 'xbxaq.com'
 person.age
 10
 对象.属性名

  2. 对象属性重新赋值

    1.  person.name="张三"
 '张三'
 person.name
 '张三'

  3. 使用不存在的属性，不会报错

    1.  person.nana
 undefined

  4. 动态添加属性

    1.  person.nana="123"
 '123'
 person.nana
 '123'

  5. 动态的删减属性 delete person. nana

    1.  person
 {name: '张三', age: 10, email: 'xbxaq@qq.com', nana: '123'}
 delete person. nana
 true
 person
 {name: '张三', age: 10, email: 'xbxaq@qq.com'}

  6. 判断属性值是否在对象中 xxx in 数组名

    1.  'age' in person
 true
 'ageaaa' in person
 false
 注意：in 找是否继承了父类的方法

  7. 判断一个属性是否是这个对象自身拥有的 hasOwnProperty(()

    1.  person.hasOwnProperty("phone")
 false
 person.hasOwnProperty("age")
 true

流程控制

if 语句

<script type="text/javascript">
    var age = 3;
    if(age < 10){
    alert("哈哈");
    }else {
    alert("GG");
    }
</script>

while循环

<script type="text/javascript">
    var age = 3;
    while(age < 5){
    age = age + 1;
    alert(age);
    }
</script>

for循环

for(var i = 0; i < 10;i++){
console.log(i);
}

函数

定义方法：
function 函数名（参数）{
代码块；
}

var 函数名 = function（参数）{
代码块；
}
绝对值函数
<script type="text/javascript">
    function abs(x){
      if(x >= 0){
      return x;
    }else{
    	return -x;
    }
    }
</script>
注意：一旦执行到return代表函数结束，返回结果；如果没有执行到return，函数执行完也会返回结
果，结果就是undefined
函数的调用
abs(10)
10
abs(-10)
10
变量的作用域
function a(){
    var x = 1;
    function b(){
      var x = 'A';
      console.log("inner: " + x);
    }
    console.log("outer: " + x);
    b();
  }
a();
养成规范：所有的变量定义都会放在函数的头部，便于代码维护
全局变量

默认所有的全局变量都会自动绑定在Windows对象下

<script type="text/javascript">
  var x = 1;
  function f(){
  	console.log(x)
  }
  f();
  console.log(x);
</script>
局部作用域 let
<script type="text/javascript">
function a(){
for(var i = 0; i < 100; i++){
console.log(i);
}
console.log(i + 1);//i出了作用域还可以使用
}
a();
</script>
结果 101

let
<script type="text/javascript">
  function a(){
    for(let i = 0; i < 100; i++){
    console.log(i);
  }
  	console.log(i + 1);
  }
  a();
</script>
结果：Uncaught ReferenceError: i is not defined
方法

方法就是把函数放在对象里面，对象只有属性和方法

<script type="text/javascript">
  var xbxaq = {
  name: "张三",
  birth: 2000,
  age: function(){
  var now = new Date().getFullYear(); //获取当前的完整年份
  r	eturn now - this.birth;
  }
  }
xbxaq.age() 调用
</script>

面向对象编程

什么是面向对象？

若干属性的集合

什么是原型？

原型是一个对象，其他对象可以通过它实现继承。

类：一个模板

对象：具体的实例

<script type="text/javascript">
    var user = {
    name: "小红",
    age: 3,
    addr: "四川省成都市",
    run: function(){
    console.log(this.name + "Run......");
    }
    }
    var xiaoming = {
    name: "小明"
    }
xiaoming.__proto__ = user; 
小明继承user 的属性
</script>

结果：console.log(xiaoming.run())
小明Run......

class 对象 ES6之后引入

定义一个类，属性，方法

<script type="text/javascript">
    class Student{
    constructor(name){
    this.name = name;
    }
    hello(){
    alert("hello");
    }
    }
    var xiaoming = new Student("xiaoming");
</script>

继承

<script type="text/javascript">
  class Student{
    constructor(name){
      this.name = name;
    }
    hello(){
        alert("hello");
    }
  }
  class Hacker extends Student{
  constructor(name,id){
 		 super(name);
  	this.id = id;
  }
    Hack(){
      alert("我是一名白帽子");
    }
  }
  var xiaoming = new Student("xiaoming",1);
  var xiaohong = new Hacker("xiaohong");
</script>
congsole.log(xiaoming.Hacker())

操作BOM对象

BOM：浏览器对象模型

B/S架构

B/S架构即浏览器和服务器架构模式

简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本

Window对象

Window 代表 浏览器 窗口

1、Navigator 封装了浏览器的信息

// 获取当前浏览器内核
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/108.0.0.0 Safari/537.36'

//运行浏览器的操作系统和(或)硬件平台
navigator.platform
'Win32'

//返回浏览器的平台和版本信息
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/108.0.0.0 Safari/537.36'

2、screen 屏幕属性

//屏幕宽度 高度
screen.width
2048
screen.height
1280

3、location 当前URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()
//设置新的地址
location.assign("https://xbxaq.com")

4、ducument 表示当前页面，HTML DOM文档树

//获取title
document.title
'小明从零开始学安全 - 持续分享'
可获取具体的文档树节点

5、history 浏览器历史记录

history.back() //后退
history.forward() //前进

操作DOM对象

DOM：文档对象模型

浏览器网页就是一个DOM树形结构

更新：更新一个DOM节点

遍历DOM节点：得到DOM节点

删除：删除一个DOM节点

添加：添加一个DOM节点

要操作一个DOM节点，就必须要先获得这个DOM节点

获取DOM节点

<h1>标题1</h1>
<p id = "p1">p1</p>
<p class = "p2">p2</p>

var h1 = document.getElementsByTagName('h1'); //获取标签
var p1 = document.getElementById('p1'); //获取ID块
var p2 = document.getElementsByClassName('p2'); //获取类块

更新DOM节点

1、innerText 修改文本值

document.getElementById('p1').innerText='xbxaq.com';

2、innerHtml 修改HTML值，可以解析文本标签

document.getElementById('p1').innerHTML="<h1>ww.baidu.com</h1>";

3、操作JS

document.getElementById('p1').style.color="red";
document.getElementById('p1').style.fontSize='40px';

删除DOM节点

删除节点步骤：先获取父节点，再删除自己

<div id="father">
  <h1>标题1</h1>
  <p id = "p1">p1</p>
  <p class = "p2">p2</p>
</div>

删除代码

//通过父节点 删除子节点
document.getElementById("father").removeChild(p1);

注意：删除多个子节点时，children是在时刻变化的

插入DOM节点

获得某个DOM节点，如果该DOM节点是空的，可通过innerHTML可以增加一个元素；如果该DOM节点 已经存在元素，则不能进行该操作，会产生覆盖

特殊对象-内部类

typeof 检查数据类型
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN"
number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

Date 日期类型

var now = new Date();//sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
now.getFu11Year();//年
now.getMonth();//月 0~11 代表月
now.getDate();//日
now.getDay();//星期几
now.getHours();// 时
now.getMinutes();//分
now.getseconds();//秒
now.getTime();// 时间戳全世界统一1970 1.1 0:00:00毫秒数
console.log(new Date(1578106175991))//时间戳转为时间
向日葵向日
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript
03-09
Java脚本
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 75万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
JavaScript详解
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
JavaScript简介
wsdhy_的博客
04-02 4434
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
JavaWeb—JavaScript
weixin_61843013的博客
06-25 7721
JavaScript的使用
JavaScript看这一篇就够了，简单全面一发入魂
学Java，找哪吒
03-09 3万+
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。 DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。 对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。 言而言之，DOM提供与网页内容交互的方法和接口。
JavaScript事件基础
JiuMeilove的博客
04-28 2万+
JavaScript事件概述 JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测道德行为 简单的理解为:触发—响应机制 网页中国每个元素都可以产生某些可以触发JavaScript的事件,例如我们可以在用户点击某个按钮时产生一个事件然后去执行某些操作 JavaScript事件的三要素 JavaScript事件又三分部组成 事件源 被触发的对象 事件类型__如何触发/什么事件 事件处理器__通过一个函数赋值的方式完成 <body> <butto
Javascript
03-22
javascript-examples JavaScript网页程式设计
JavaScript入门
03-04
JavaScript入门
不出网上线CS的各种姿势（内网横向）
qq_64395221的博客
06-21 926
在内网环境中可以使用ipc $生成的SMB Beacon上传到目标主机执行，但是目标主机并不会直接上线的，需要我们自己用链接命令(link <ip>)去连接它。经常是拿下一台边缘机器，其有多块网卡，用于连接内外网，内网机器都不出网。因为连接的Beacons使用Windows命名管道进行通信，此流量封装在SMB协议中，所以SMB Beacon相对隐蔽，绕防火墙时可能发挥奇效。一样，建立pystinger连接之后，直接生成payload在业务主机执行，业务内网主机192.168.111.236即可成功上线。
Day43
m0_67496588的博客
06-20 1066
JSON，Ajax
jQuery 选择前、后、父元素进行操作
最新发布
qq_30049249的博客
06-25 250
https://andi.cn/page/621465.html
使用nvm管理nodejs版本，设置淘宝NPM镜像源
d312697510的博客
06-19 246
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值