网页编程三剑客之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
相关文章
|
6月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
208 56
|
5月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
939 58
|
2月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
693 0
|
6月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
148 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
5月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
12月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
530 1
|
7月前
|
JavaScript Ubuntu Linux
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1

热门文章

最新文章