网页编程三剑客之JS

简介: JavaScript基础部分介绍(简洁明了)

JavaScript

1、概念

一种直译式的脚本语言,是一种动态类型、弱类型、基于原型的语言

2、作用

实现页面动态效果
表单的校验
背景图片的更换
操作节点信息

3、组成

ECMA+DOM+BOM

ECMAScript:JavaScript的核心
文档对象模型(DOM):是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由点层级构成的文档 。
浏览器对象模型(BOM):对浏览器窗口进行访问和操作

4、特点

脚本语言
基于对象
事件驱动
简单性
安全性
跨平台性

JS中的变量

测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Js变量</title>
    </head>
    
    <script>
    /*Js:弱类型语言  不需声明变量类型 */
        var a=-1;
        var b="2";
        var c="你好";
        var d=true;
        var e=new Date();
        var f=1.32
        
        alert(a);
    </script>
    <body>
    </body>
</html>
注:
A、js中的变量的名称和java中标识符的命名 保持一致
B、js中变量名称是可重复的,但后者的名称会把前者的名称值 覆盖
C、js中末尾即使没有分号结束也是可以的,但是不推荐这样书写。

JS中的数据类型

number(数字类型的数据)
string(字符串类型)
boolean(布尔数据类型)
object(对象类型)
undefined(未定义)
NaN(不是一个数字) not a number
null(空对象)

测试代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>变量类型</title>
        
        <script>
            var a=1;//number
            var b=1.2;//number
            var c='您';//string
            var d="我们";//string
            var e=true;//boolean
            var f=new Date();//object
            alert(typeof f);
            
            var aa;//undefined
            var bb="123a";//string
            alert(Number(bb));//NaN
            var cc=null;
            var  dd="";
            alert(typeof cc);//null
            alert(typeof dd);//string
        </script>
    </head>
    <body>
    </body>
</html>

JS中的运算符

算数运算符


+  -  *  /  %   ++   --

逻辑运算符


&   |   !   &&   ||   ^   <   >   <=  >=   !=

连接符(+)

不同类型作为连接,比如string类型和number之间的“+”

运算符(+)

实现number类型数据的加法运算

等值符

==,等值符:先比较类型 如果类型一致,在比较内容 如果类型不一致,
这时候会进行强制转换统一转number类型,然后再进行内容的比较

等同符

====,等同符:先比较类型 如果类型一致,在比较内容
                           如果类型不一致 直接返回false;

测试代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>    
        <script>
            var a=10;
            var b=12.2;
            //alert(a+b);//22.2
            
            var c="123";
            //alert(a+c);//10123
            //alert(a+c+b);//+:相同类型作加号,不同类型作连接符,类似Java
            
             var  f1=true;// 1
            var  f2="true";// NAN
            var  f3=1;//1
            var  f4="1";//1

            alert(f1==f2);//F
            alert(f1==f3);//T
            alert(f1==f4);//T
            alert(f2==f3);//F
            alert(f2==f4);//F
            alert(f3==f4);//T
            
            
            alert(f1===f2);//F
            alert(f1===f3);//F
            alert(f1===f4);//F
            alert(f2===f3);//F
            alert(f2===f4);//F
            alert(f3===f4);//F
            
        </script>
    </head>
    <body>
    </body>
</html>

JS中的控制语句

包括 if、if...else....、if... elseif ...else...、for循环、while、do...while、switch语句
使用方法同java
相关文章
|
2月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
93 1
|
3月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
3月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
3月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
23天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
24 2
|
2月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
19 1
【JavaScript】网页交互的灵魂舞者
|
29天前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
16 2
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
2月前
|
Web App开发 缓存 前端开发
前端RAG:使用Transformers.js手搓纯网页版RAG(二)- 基于qwen1.5-0.5B
本文继续探讨了RAG的后半部分,通过在浏览器中运行qwen1.5-0.5B模型实现了增强搜索全流程。然而,由于浏览器与模型性能限制,该方案更适合研究、离线及高隐私场景。文章提供了完整的前端代码,让读者能够动手尝试。此外,详细介绍了代码框架、知识库准备、模型初始化及问答实现等步骤,并展示了实际运行效果。受限于当前技术,除非在离线或高隐私环境下,网页大模型的应用仍需进一步优化。
|
2月前
|
存储 自然语言处理 文字识别
纯前端RAG:使用Transformers.js实现纯网页版RAG(一)
本文将分两部分教大家如何在网页中实现一个RAG系统,本文聚焦于深度搜索功能。通过浏览器端本地执行模型,可实现文本相似度计算和问答匹配,无需依赖服务器。RAG搜索基于高维向量空间,即使不完全匹配也能找到意义相近的结果。文中详细介绍了如何构建知识库、初始化配置、向量存储及相似度计算,并展示了实际应用效果。适用于列表搜索、功能导航、文档查询及表单填写等多种场景。
208 0