04.JavaScript语法下

最新推荐文章于 2024-04-19 16:51:59 发布
最新推荐文章于 2024-04-19 16:51:59 发布
阅读量178 收藏
点赞数
分类专栏： js学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a478269761/article/details/78134393
版权

一、内置对象

1、document

document.referrer //获取上一个跳转页面的地址(需要服务器环境)
这里写图片描述

2、location

window.location.href //获取或者重定url地址
这里写图片描述
window.location.search //获取地址参数部分
我们来看一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取地址栏参数</title>
    <script type="text/javascript">

    window.onload = function(){

        var Dat = window.location.search;

        alert(Dat);//弹出?name=tom

        var oSpan = document.getElementById('span01')

        var arr = Dat.split('=');

        var name = arr[1];

        oSpan.innerHTML = name;

    }

    </script>
</head>
<body>
    <div>欢迎<span id="span01"></span>访问我的主页！</div>
</body>
</html>

我们在浏览器地址后面添加上参数 file:///F:/jscsdn/02/012.html?name=tom
这里写图片描述

window.location.hash //获取页面锚点或者叫哈希值

        var hash = window.location.hash;//在地址后面添加#12（谷歌浏览器有效），如例file:///F:/jscsdn/02/013.html#12
        alert(hash);//弹出#12
3、Math

Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整

    <script type="text/javascript">
        for(var i=0;i<5;i++){
            var a=Math.random();//从0到1的随机数，比如0.4266489619677658
            alert(a);
            alert(Math.floor(a));//向下取整，永远都为0
            alert(Math.ceil(a));//向上取整，永远都为1
        }
    </script>

二、面向对象

面向过程与面向对象编程

1、面向过程：所有的工作都是现写现用。

2、面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只需要关注功能的运用，而不需要这个功能的具体实现过程。

javascript对象

将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典。

创建对象的方法
1、单体
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单体</title>
    <script type="text/javascript">

        var Tom = {

            name:'tom',

            age:18,

            showname:function(){
                alert(this.name);
            },

            showage:function(){
                alert(this.age);
            }

        }

        Tom.showname();//调用方法

    </script>
</head>
<body>

</body>
</html>
2、工厂模式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工厂模式</title>
    <script type="text/javascript">

        function Person(name,age,job){

            var o = new Object();

            o.name = name;

            o.age = age;

            o.job = job;

            o.showname = function(){
                alert(this.name);
            }

            o.showage = function(){
                alert(this.age);
            }

            o.showjob = function(){
                alert(this.job);
            }

            return o;
        }

        var Tom = Person('tom',18,'engineer');
        var Jack = Person('jack',19,'worker');

        Tom.showjob();

        Jack.showjob();

    </script>
</head>
<body>

</body>
</html>
3、构造函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
    <script type="text/javascript">

        function Person(name,age,job){

            this.name = name;
            this.age = age;
            this.job = job;

            this.showname = function(){
                alert(this.name);
            }

            this.showage = function(){
                alert(this.age);
            }

            this.showjob = function(){
                alert(this.job);
            }
        }

        var　Tom = new Person('tom',18,'engineer');
        var Jack = new Person('jack',19,'worker');

        //Tom.showjob();

        alert(Tom.showname==Jack.showname);//弹出false

    </script>
</head>
<body>

</body>
</html>
3、原型模式

prototype是每一个对象共用的属性，为了不造成资源浪费，可以把每一个对象共用的方法和属性设置在prototype上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型模式</title>
    <script type="text/javascript">

        function Person(name,age,job){
            this.name = name;
            this.age = age;
            this.job = job;
        }

        Person.prototype.showname = function(){
            alert(this.name);
        }

        Person.prototype.showage = function(){
            alert(this.age);
        }

        Person.prototype.showjob = function(){
            alert(this.job);
        }

        var Tom = new Person('tom',18,'engineer');
        var Jack = new Person('jack',19,'worker');

        Tom.showage();

        Jack.showage();

        alert(Tom.showage==Jack.showage);//弹出true

        //重写方法后showage是tom独有的方法了。
        // Tom.showage = function(){

        //  alert('我的年龄是'+this.age);

        // }
        // alert(Tom.showage==Jack.showage);//弹出false
    </script>

</head>
<body>

</body>
</html>
4、继承
function fclass(name,age){ this.name = name; this.age = age; } fclass.prototype.showname = function(){ alert(this.name); } fclass.prototype.showage = function(){ alert(this.age); } function sclass(name,age,job) { fclass.call(this,name,age); this.job = job; } sclass.prototype = new fclass(); sclass.prototype.showjob = function(){ alert(this.job); } var tom = new sclass('tom',19,'全栈工程师'); tom.showname(); tom.showage(); tom.showjob();

三、call和apply

这里先看一段代码，普通的function里面的this指向是那个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>call和apply</title>
    <script type="text/javascript">

        function aa(a,b){

            alert('我的this是'+this+',我的a是'+a+',我的b是'+b);

        }

        aa(1,2);

    </script>
</head>
<body>

</body>
</html>

这里写图片描述

使用call和apply

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>call和apply</title>
    <script type="text/javascript">

        function aa(a,b){

            alert('我的this是'+this+',我的a是'+a+',我的b是'+b);

        }

        aa.call('abc',2,3);

        // aa.apply('abc',[2,3]);

    </script>
</head>
<body>

</body>
</html>

这里写图片描述
这里可以看到，没有调用call和apply之前，function里面的this指向的是window,使用call和apply能使this指向发生改变，call和apply的功能一样，只是调用的方式不同，apply的参数是使用数组的方式

四、新选择器

1、document.querySlector()
2、document.querySlectorAll()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增选择器</title>
    <script type="text/javascript">
        window.onload = function(){

            var oDiv = document.querySelector('#div1');//选择单个
            var aLi = document.querySelectorAll('.list li');//选择多个

            alert(aLi.length);//弹出8

        }

    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>
表哥说名字长比较帅
关注
专栏目录
JavaScript 基本入门语法(详细讲解)
m0_65725031的博客
02-26 7349
大家有想学JavaScript或者感兴趣的可以点个关注，跟着我一起来学习我们的JavaScript,会不定期的更新我们的JavaScript,如果有搞不懂的地方可以私信我噢。 什么是JavaScript？ JS是一门弱类型的语言，用于给我html页面上面添加动态效果与互相操作。 JavaScript基本语法 1.JavaScript编写代码必须在 script标签中 列如：<script>在这中间编写我们的代码</script> 2.console.log
4.JavaScript基础语法.zip
01-29
JavaScript语法的基础部分包括变量、数据类型、操作符、流程控制和函数等。 1. 变量：在JavaScript中，我们使用`var`、`let`或`const`来声明变量。`var`是ES5及以前版本的标准，而`let`和`const`是ES6引入的，它们...
日历经代码过修改的
cymlancy的专栏
03-21 1046
js： var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");  var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);  var days = new Array("星期日","星期一
JavaScript基础语法
m0_67683346的博客
11-02 6042
javascript中的一些基础语法
JavaScript基本语法
weixin_62859027的博客
04-27 3451
JavaScript基本语法一·JavaScript简介1.JavaScript发展历史2.JavaScript的组成3.JavaScript的添加方式4.JavaScript的输出方式二·JavaScript基本语法1 .语法规范2.变量变量的声明3.数据类型4.运算符算数运算符赋值运算符字符串运算符比较运算符逻辑运算与类型运算位运算符5.语句选择语句循环语句跳转语句6.数组7.对象8.函数9.预编译三.总结 一·JavaScript简介 1.JavaScript发展历史 JavaScript是一种可嵌入
JavaScript的基础语法
m0_72161237的博客
05-09 2944
对于 JavaScript 认知： 1️⃣是世界上最流行的编程语言之一 2️⃣是一个脚本，通过解释器运行 3️⃣主要在客户端（浏览器）上运行，现在也可以基于 node.js 在服务器端运行 那么JavaScript 能做哪些事情呢？ 网页开发(更复杂的特效和用户交互) 网页游戏开发 服务器开发(node.js) 桌面程序开发(Electron, VSCode 就是这么来的) 手机 app 开发
JavaScript ...语法 （展开语法）
acoolgiser的博客
11-05 1272
参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax 有没有见过这样的写法： const numbers = [1, 2, 3]; console.log(...numbers); 打印输出结果： 1 2 3 意思是把数组的值一一展开。 展开语法(Spread syntax),可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还..
JavaScript框架语法对比
weixin_44694172的博客
12-26 952
发现一个有趣的网址，相对一些有工作经验或者有基础的同学来说是个不错的助手，方便简单易学，最重要的是可以快速帮助大家上手新项目😜。
JavaScript语法规范
pengjunlee的博客
01-02 5万+
目录 1.标识符的命名规范 2.程序注释 3.常用标识符命名方法 4.ECMAScript5严格模式 参考书籍：《JavaScript 权威指南----ECMAScript5+HTML5DOM+HTML5BOM》编著：张亚飞 JavaScript编写语法遵循ECMAScript标准，以下是ECMAScript语言的一些基本规范。 1.标识符的命名规范 ECMAScript标识...
JavaScript基本的的语法规则
一个非常Cool的人
02-02 2482
介绍了基础语法中的运算符、分支语句、循环语句、异常的捕获与处理、js中的this关键字、let与const定义变量使用规则、js中的void链接、异步编程setTimeout、函数闭包。欢迎大家阅读。
05 JavaScript学习：语法
热门推荐
百锦再的博客
04-19 6万+
在 JavaScript 中，变量定义是指声明一个变量并为其分配一个值。varlet和const。varvar是 JavaScript 最早引入的声明变量的关键字。使用var声明的变量具有函数作用域，而不是块级作用域。var x = 10;// 使用 var 定义变量 xletlet是 ES6（ECMAScript 2015）引入的声明变量的关键字。使用let声明的变量具有块级作用域，只在声明的块内部有效。let y = 20;// 使用 let 定义变量 yconstconst。
3.JavaScript基础语法.zip
01-29
JavaScript语法基于ECMAScript规范，每三年发布一次新版本，目前最新的稳定版是ES2022。接下来，我们将详细讲解JavaScript的一些基础语法： 1. **变量声明**：JavaScript使用`var`、`let`和`const`来声明变量。`var...
5.JavaScript基础语法.zip
01-29
JavaScript语法基于ECMAScript规范，它支持变量、数据类型、操作符、控制结构、函数等基本元素。下面是对这些关键知识点的详细说明： 1. 变量与数据类型： - 变量：在JavaScript中，我们使用`var`、`let`或`const`...
2.JavaScript相关语法.md
12-13
JavaScript相关语法
1.JavaScript相关语法.md
12-13
JavaScript相关语法
THUCNews中文文本分类数据集包含84万个新闻文档，共14个类别；基于此模型测
最新发布
09-30
THUCNews中文文本分类数据集包含84万个新闻文档，共14个类别；基于此模型测试BERT多个版本的分类性能_ TextClassifier
基于Java的uinshine-fill在线应用设计源码
09-30
该项目是一款基于Java的在线应用设计源码，名为uinshine-fill，集成了Java、JavaScript、HTML、CSS、Shell和Lua等多种编程语言。源码文件共计724个，其中Java文件占比最高，达到472个，紧随其后的是XML和JavaScript文件，分别为51个和47个。此外，还包括HTML、YML、Imports、Properties、JSON、TXT和CSS文件。
基于Java语言的zzyi-cp项目设计源码总结
09-30
该项目为基于Java语言的zzyi-cp设计源码，总计包含441个文件，涵盖382个Java源文件、51个XML配置文件、5个YAML文件、2个Git忽略文件以及1个IML文件。
Labview通过FINS tcp协议与欧姆龙PLC通讯，支持CIO区，W区，D区，布尔量，整数，浮点数，字符串读写操作，软件无
09-30
Labview通过FINS tcp协议与欧姆龙PLC通讯，支持CIO区，W区，D区，布尔量，整数，浮点数，字符串读写操作，软件无加密
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值