正文

javascript介绍(代码片段)

礁之  礁之  2023-03-09  426

关键词：

文章目录

一. JavaScript介绍
二. JavaScript的引入方式
三. JavaScript的变量与数据类型
四. JavaScript中的函数
五. JavaScript变量的作用域
六. JavaScript运算符
七. JavaScript判断语句
八. JavaScript数组
九. JavaScript循环语句
十. JavaScript获取页面标签
十一. JavaScript操作页面标签的属性
十二. 定时器
十三. JAvaScript的对象

一. JavaScript介绍

定义: 运行在浏览器端的脚本语言
作用: 行为标准, 负责和用户的交互
使用场景: 需要和用户交互时

二. JavaScript的引入方式

行内式
内嵌式
外链式

三. JavaScript的变量与数据类型

python中的数据类型

int float str bool list tuple set dict 自定义类(对象)

语言的强弱

语言的强弱: 可以查看不同数据类型之间的变量是否可以直接进行加法运算
Python: 强类型语言, 字符串 + 数字会报错
JavaScript: 弱类型语言, 字符串 + 数字 = 字符串

JavaScript中的变量

// 定义需要使用关键字 var
// 一行的结尾需要一个分号  ;
// 变量的数据类型由存储的数据值决定
var 变量名 = 数据值;

JavaScript的注释

// 单行注释, 快捷键 Ctrl + /

/* 
多行注释
多行注释
*/

JavaScript的常用数据类型

// 变量的定义, var 变量名 = 数据值;
// 变量名, 由字母 数字 下划线 $ 组成, 不能以 数字开头, 匈牙利命名风格(开头型简写)
// 1. 数字类型  number
// 1.1 整数  开头简写(i)
var iAge = 10;
// alert(iAge);  // 打印数据值
// alert(typeof(iAge)); // typeof(变量)  查看变量的数据类型
console.log(iAge);   // console.log() 在浏览器的控制台输出 
console.log(typeof(iAge));
// 1.2 小数  开头简写(f)
var fHeight = 174.4;
console.log(fHeight, typeof(fHeight));

// 2. 字符串类型 string   
// 开头简写(s)
var sName = 'isaac';
console.log(sName, typeof(sName));

// 3. 布尔类型 boolean 值(true, false)
// 开头简写(b)
var bIsTrue = true;
console.log(bIsTrue, typeof(bIsTrue));

// 4. 未定义的类型 undefined
// object 开头简写(o)
var oA;
console.log(oA, typeof(oA));

// 5. null
var oObject = null;
console.log(oObject, typeof(oObject));

四. JavaScript中的函数

python中函数的定义和调用

# 函数定义后,不会自动执行函数中的代码, 需要调用后才会执行
def 函数名(参数):  # 形参
    函数体
    return

函数名(参数)   # 实参

JS中函数的定义和调用

// 函数定义
function 函数名(参数) 
    函数体
    return


// 函数调用
函数名(参数)

五. JavaScript变量的作用域

局部变量, 全局变量

在函数内部能否直接读取全局变量的值 ====> 可以直接读取
在函数内部能否直接修改全局变量的值 ====> 可以直接修改
函数外部能否使用局部变量 ====> 函数外部不能访问局部变量的值
在函数内部定义变量, 如果不加 var 变量, 那么定义的变量是全局变量

六. JavaScript运算符

算数运算符

+ - * / % ++ --
a++ —> a = a + 1
a-- —> a = a - 1

赋值运算符

+= -= *= /= %=

比较运算符

== 判断值是否相同, 只判断值, 不判断数据类型
=== 判断值和类型是否都相同
!= 不等于
> 大于
>= 大于等于
< 小于
<= 小于等于

逻辑运算符

&& 逻辑与
|| 逻辑或
! 取反

运算符优先级

() 优先级最高
一元运算符 ++ – !
算数运算符, 先 * / % 后 + -
关系运算符 > >= < <=
相等运算符 == != ===
逻辑运算符先 && 后||
赋值运算符 =

七. JavaScript判断语句

- 单分支
if (判断条件)
    条件成立执行的代码


- 双分支
if (判断条件)
    条件成立执行的代码
else
    条件不成立执行的代码


- 多分支
if (判断条件1)
    条件1成立时执行的代码
else if (判断条件2)
    条件1不成立, 条件2成立时执行的代码
else if(判断条件n)
    条件n-1不成立,条件n成立执行的代码
else
    以上条件都不成立,执行的代码

八. JavaScript数组

// 1. 数组的定义
// 1.1 使用 Array 类进行创建
var aArray = new Array(1, 2, 'hello');
console.log(aArray, typeof(aArray));
// 1.2 使用自变量方法进行创建
var aList = [1, 2, 3.14, 'isaac', [3, 6, 9]];
console.log(aList, typeof(aList));

// 2. 求数组中元素的个数, 数组的长度, 数组.length属性
console.log('元素的个数为: ', aList.length);

// 3. 数组支持下标操作, 但是没有负数下标
// 访问不存在的下标, 得到的值是 undefined
console.log(aList[0], aList[3], aList[100]);
// 可以通过下标修改数组中的数据
aList[3] = 'hello world';
console.log(aList);
// 直接修改不存在下标值, 在指定的下标位置添加数据, 其余位置为 空 ,使用 empty 来表示
aList[10] = 10;
console.log(aList, typeof(aList));

// 4. 根据数据值, 找到元素在数组中的第一个下标   indexOf
// 找到的话返回元素的下标, 没有找到则返回 -1
console.log(aList.indexOf('hello world'), aLisindexOf(1000));

// 5. 尾部添加和删除
aList.push('lang');
console.log(aList);
aList.pop();
console.log(aList);

// 6. 根据下标, 删除添加数据
// splice(下标, 删除元素的个数, 添加的元素)
aList.splice(2, 3); // 只删除, 不添加
console.log(aList);
aList.splice(2, 0, 3, 4, 5);
console.log(aList); // 只添加, 不删除
aList.splice(2, 2, 'hello', 'world'); // 删除后, 添加
console.log(aList);

九. JavaScript循环语句

// 1. while循环
while (判断条件)
    循环中的代码


// 2. for 循环
for(表达式1; 表达式2; 表达式3)
    循环中的代码


// 3. do while 循环, 不管条件是否成立, 至少循环一次
do
    循环代码
while(判断条件)

十. JavaScript获取页面标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script>
        // getElementById通过id找到对应的标签, 找到了就返回对象,没有就返回 null
        var oDiv = document.getElementById('box');
        alert(oDiv + '----' +typeof(oDiv));
    </script> -->
    <script>
        // 解决方法二: 让标签全部定义完成之后, 在执行 js 代码
        // 标签全部定义之后, 会触发一个事件, window.onload 事件
        // 当前标签全部加载后, 执行函数中的代码 , JS 的入口函数
        window.onload = function()    // 匿名函数    
            var oDiv = document.getElementById('box');
            alert(oDiv + '----' +typeof(oDiv));
        
    </script>
</head>
<body>
    <div id="box">
        这是一个 div
    </div>

    <!-- 解决方案一, 把 script 写在标签后面,不建议使用 -->
    <!-- <script>
        // getElementById通过id找到对应的标签, 找到了就返回对象,没有就返回 null
        var oDiv = document.getElementById('box');
        alert(oDiv + '----' +typeof(oDiv));
    </script> -->
</body>
</html>

十一. JavaScript操作页面标签的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 获取页面标签, 在入口函数中定义
        window.onload = function()
            // 1. 获取input标签
            var oInput = document.getElementById('name');
            // 获取标签的各属性
            console.log('标签的name属性为: ', oInput.name);
            console.log('标签的class属性为: ', oInput.className);
            console.log('标签的value属性为: ', oInput.value);
            console.log('标签的style属性为: ', oInput.style.fontSize);  // 只能获取行内式的css属性
            // 设置标签的各属性
            oInput.value = 100;
            oInput.name = 'python';
            console.log('修改后标签的name属性为: ', oInput.name);

            // 获取div标签
            var oDiv = document.getElementById('div1');
            console.log(oDiv.innerHTML);    // 获取标签内容, 会连html标签一起获取
            console.log(oDiv.innerText);    // 只获取内容, 不获取html标签
            oDiv.innerHTML = '好好学习'    // 修改标签内容
        
    </script>
</head>
<body>
    <input type="text" name="aaa" class="box" id="name" value="10" style="font-size: 30px;">
    <div id="div1">
        <p>
            这是一个div
        </p>
    </div>
</body>
</html>

十二. 定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var oT = null;
        function fnClick()
            oT = setInterval(alert, 2000, '好好学习');
        

        function fnCalc()
            clearInterval(oT);
        
    </script>
</head>
<body>
    <div>
        <p>点击单次定时器, 3s后弹出 hello</p>
        <!-- setTimeout(执行函数名, 时间间隔, 第一个函数参数的参数) -->
        <input type="button" value="单词定时器" onclick="setTimeout(alert, 3000, 'hello')">
    </div>
    <div>
        <p>点击多次定时器, 间隔 2s 弹出好好学习, 点击停止不再弹出</p>
        <input type="button" value="多次定时器" onclick="fnClick()">
        <input type="button" value="停止" onclick="fnCalc()">

    </div>
</body>
</html>

十三. JAvaScript的对象

类似于Python中的字典

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // JS 对象的两种创建方式
        // 方式一: new Object
        var oPersion = new Object();
        oPersion.name = 'zhangsan';
        oPersion.age = 22;
        //  添加方法
        oPersion.sayName = function()
            alert(this.name);
        ;
        // 调用属性
        alert(oPersion.age);
        // 调用方法
        oPersion.sayName();


        // 方式二: 使用字面量, 推荐使用
        oStudent =
            name: 'lisi',
            age: 23,
            sayName: function()
                alert(this.name);
            
        
        // 调用
        alert(oStudent.age);
        oStudent.sayName();
    </script>
</head>
<body>
    
</body>
</html>

javascript使用可观察的介绍性监听器(代码片段)

查看详情

javascript简单介绍(代码片段)

一、简介JavaScript是一门面向对象的动态语言，他一般用来处理以下任务：修饰网页生成HTML和CSS生成动态HTML内容生成一些特效提供用户交互接口生成用户交互组件验证用户输入自动填充表单能够读取本地或者远程数据的前端应用... 查看详情

javascript介绍(代码片段)

文章目录一.JavaScript介绍二.JavaScript的引入方式三.JavaScript的变量与数据类型四.JavaScript中的函数五.JavaScript变量的作用域六.JavaScript运算符七.JavaScript判断语句八.JavaScript数组九.JavaScript循环语句十.JavaScript获取页面标签十一.JavaScrip... 查看详情

javascript展开操作符(spreadoperator)介绍(代码片段)

本文介绍JavaScript的展开操作符(Spreadoperator)...。本文适合ES6初学者。你可以通过展开操作符(Spreadoperator)...扩展一个数组对象和字符串。展开运算符（spread）是三个点（…）,可以将可迭代对象转为用逗号分隔的参数序列。如同rest... 查看详情

jquery介绍(代码片段)

jquery是一个JavaScript库（js框架），jQuery可以理解JavaScriptquery，该框架提供了，很多方法，让我们可以非常轻松地写出动态效果的页面，从本质将，jQuery就是对JavaScript进行封装，然后让我们使用更加便利。特别说明：目前javascript... 查看详情

redux-介绍&工作流程(代码片段)

...）React视图层框架Redux是一个用来管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂，JavaScript需要管理比任何时候都要多的state（状态），Redux就是降低管理难度的。（Redux支持React，Angular、jQuery... 查看详情

微搭低代码javascript基础知识-函数及模块介绍(代码片段)

低代码要想入门，首先需要学习javascript，我们已经有了两篇基础文章变量定义及初始化循环及条件控制我们本篇介绍两个知识点，一个是函数，一个是模块函数在js中函数是可以重复使用的代码块，定义函数... 查看详情

微搭低代码javascript基础知识-函数及模块介绍(代码片段)

javascript中操作数组的方法示例介绍(代码片段)

好多数组的操作方法发现有些都不记得了，这里总结了一些基本的操作方法，可能不是很多，大家可以在评论区补充，话不多说，上代码//1.concat//合并数组//需要合并的数组//合成之后的数组//原有数组没有被... 查看详情

jquery介绍(代码片段)

jQuery介绍jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Writeless,domore.“jQuery的... 查看详情

javascript入门第一天(代码片段)

typora-copy-images-to:img今日内容JavaScript介绍JavaScript的基本语法JavaScript的属性和文本操作JavaScript的Dom操作一.JavaScript介绍1.JavaScript概述JavaScript是一门客户端脚本语言，基于对象和事件驱动的一门客户端脚本语言，可以直接... 查看详情

测开之javascript・《javascript基础》(代码片段)

Javascript介绍和基本使用Javascript概述嵌入页面的方式基本用法注释变量数据类型运算符条件语句函数对象循环扩展介绍和基本使用Javascript概述要了解JavaScript，我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年，当... 查看详情

网页编程技术一（浏览器内核介绍）(代码片段)

1、浏览器内核由两部分组成：渲染引擎和JavaScript引擎　　渲染引擎：负责获取网页（HTML、XML、图形等）、整理信息（CSS）以及计算网页显示方式　　JavaScript引擎：负责解析和执行JavaScript代码来实现网页的动态效果。（由于Java... 查看详情

jquery介绍(代码片段)

...么是jQuery　　1：jQuery是一个轻量级的、兼容多浏览器的JavaScript库。　　2：jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Writeless,domore.&ldq... 查看详情

es6的介绍和let的使用(代码片段)

...怕是工作3至5年前端工程师也困惑，ECMAScript是什么？它跟JavaScript有什么关系？题目：JavaScript由3部分组成，分别是：ECMAScript，BOM和（？）。从题目中我们就可以看出来了，ECMAScript是JavaScript的组成部分。ECMAScript就是JavaScript中的... 查看详情

webnode.js介绍(代码片段)

Node.js什么是Node.js，可以参考官网的一句话：Node.js®isaJavaScriptruntimebuiltonChrome'sV8JavaScriptengine.通常JavaScript代码只在浏览器中运行，而有了Node.js就可以本地执行JavaScript代码。Node.js直接下载（地址https://no 查看详情

web前端之javascript的插件下载指令及介绍npminstallsaverequire(代码片段)

目录1、扁平结构数据与树形结构数据之间的转换2、防抖与节流3、浮点数的加减乘除4、检测输入的数据格式和类型是否正确，是否存在空数组或空对象5、重名自增6、根据后缀名渲染对应图标1、扁平结构数据与树形结构数据... 查看详情