JavaScript（入门）

最新推荐文章于 2025-02-09 23:16:16 发布

Veer_c

最新推荐文章于 2025-02-09 23:16:16 发布

阅读量1w

点赞数 9

分类专栏：成长之路登峰造极一览众山小文章标签： java javascript 字符串 mysql 数据库

本文链接：https://blog.youkuaiyun.com/Veer_c/article/details/103894517

版权

成长之路同时被 3 个专栏收录

39 篇文章

订阅专栏

登峰造极

3 篇文章

订阅专栏

一览众山小

1 篇文章

订阅专栏

本文深入解析JavaScript作为HTML交互脚本语言的核心概念，包括其轻量级特性、解释性执行方式以及广泛的免费使用性。文章详细介绍了JavaScript的多种功能，如动态文本插入、事件响应、HTML元素读写、数据验证、浏览器检测和cookie管理。此外，还探讨了JavaScript的使用方式、数据类型、类型转换、运算符等基础语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript实用案例与常见问题（一）：
https://blog.youkuaiyun.com/Veer_c/article/details/103894959
JavaScript实用案例及常见问题（二）：
https://blog.youkuaiyun.com/Veer_c/article/details/103895166

什么是 JavaScript？

JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript 由数行可执行计算机代码组成。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
所有的人无需购买许可证均可使用 JavaScript。

HTML/CSS/JS 在线工具：
HTML/CSS/JS 在线工具可以在线编辑 HTML、CSS、JS 代码，并实时查看效果，你也可以将优质代码保存分享：https://c.runoob.com/front-end/61

Java 和 JavaScript 是相同的吗？不同！
在概念和设计方面，Java 和 JavaScript 是两种完全不同的语言。
Java（由太阳微系统公司开发）很强大，同时也是更复杂的编程语言，就像同级别的 C 和 C++。

JavaScript 能做什么？
1.JavaScript 为 HTML 设计师提供了一种编程工具
HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。
2.JavaScript 可以将动态的文本放入 HTML 页面
类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面：document.write ： (“<“h1”>” + name + “<"/h1">”)
3.JavaScript 可以对事件作出响应
4.JavaScript 可以读写 HTML 元素
5.JavaScript 可被用来验证数据（在数据被提交到服务器之前）
6.JavaScript 可被用来检测访问者的浏览器
7.JavaScript 可被用来创建 cookies：
JavaScript 可被用来存储和取回位于访问者的计算机中的信息。

JavaScript中的一些简单介绍

<!--
1.html中的注释:
css中的注释:/*注释内容*/
js中的注释:
         // 单行注释
         /**/多行注释
2.js中的常用的两个函数
2.1:alert("弹出框的内容")
2.2:document.write("想网页中写的内容")
3.js的使用方式:
3.1:内部使用 
<script type="text/javascript">
js代码
</script>
缺点:和html代码混杂在一起,管理起来不是很方便
3.2外部使用(推荐)
<script src="1.js"></script>
优点:可以将html代码和js代码分离,管理起来更加方便
注意:不能使用自闭和的script标签导入js文件
<script src="1.js"/>
-->
<title>无标题文档</title>
<!-- js的内部使用
<script type="text/javascript">
    //js中的弹出框
    //alert("hello");
    //给网页中写内容
    document.write("hello");
</script>
-->
<!--
js的外部使用
-->
<script src="1.js"></script>
</head>

js中的数据类型

<title>无标题文档</title>
<script type="text/javascript">
    /*
    1.js中变量的定义,js是一个弱类型的语言,任何变量定时的时候都使用关键字var
    var a = 100;
    var b = 12.24;
    var c = 'f';
    var d = "abc";
    var e = true;
    var f = new Object();
    定义变量的时候需要注意:
    1.变量定义全部使用关键字var,这个关键字可以省略(一般不建议)
    2.js中的变量可以重复定义,只不过后面的变量会覆盖前面的变量
    3.未赋值的变量不能使用undefined,在js中一个变量在赋值之前他的类型是不明确的,只有在赋值之后
    这个类型才被明确 
    js中类型的分类:
    number:整数,小数
    String :字符串,字符在js中都叫String类型
    boolean:true,false
    object:对象类型
    如何查看变量的类型:
    typeOf(变量)    */
    //定义变量
    var a = 100;
    var b = 12.24;
    var c = 'f';
    var d = "abc";
    var e = true;
    var f = new Object();
    //js中的变量可以重复定义,只不过后面的变量会覆盖前面的变量
    j = 200;
    j = 300;
    //定义了一个变量h,并没有给h初始化,undefined 
    var h;
    //查看每一个变量的类型
    document.write("a:"+typeof(a)+"<br>");
    document.write("b:"+typeof(b)+"<br>");
    document.write("c:"+typeof(c)+"<br>");
    document.write("d:"+typeof(d)+"<br>");
    document.write("e:"+typeof(e)+"<br>");
    document.write("f:"+typeof(f)+"<br>");
    document.write(j);
    document.write(h);
</script>

注意：在js中我们也可以定义类似Java中的数据类型，但是定义的时候都使用var关键字，而且js中我们的数据类型都是number类型，在定义的时候，变量可以重复定义，但是使用的时候是按照后面的数据来选择的

类型转换函数：

<script type="text/javascript">
/*
1.3 类型转换函数
 string->number(整数) :  parserInt(变量)
 string->number(小数):  parserFloat(变量)
*/
    var a = "100";
    var b = "12.34";
    document.write("a转换之前的类型"+typeof(a)+"<br>");
    document.write("a转换之后的类型"+typeof(parseInt(a))+"<br>");
    document.write("b转换之前的类型"+typeof(b)+"<br>");
    document.write("b转换之后的类型"+typeof(parseFloat(b))+"<br>");
</script>

注意：类型转化函数：parseInt（）可以将String转换成整数，parseFloat（）可以将String转换成小数。

js中的运算符：

<script type="text/javascript">
/*
1.4 运算符
        1)算术运算符： + - * /  %
        2)比较运算符： > <  >=  <= ==
        3)逻辑运算符： &&  ||   !
        4)三目运算符:  表达式 ? true的结果 : false的结果   */
    //1)算术运算符： + - * /  %
    var a = 10;
    var b = 3;
    var c = 7;
    document.write(a+b+"<br>");
    document.write(a-b+"<br>");
    document.write(a*b+"<br>");
    document.write(a/b+"<br>");
    document.write("<hr>");
    //2)比较运算符： > <  >=  <= ==
    document.write(a>b);//true
    document.write(a<b);//false
    document.write(a==b);//fasle
    document.write(a>=b);//true
    document.write(a<=b);//fasle
    document.write("<hr>");
    //3)逻辑运算符： &&  ||   !
    document.write((a>b)&&(a>c));//true&&true=true
    document.write("<br>");
    document.write((a<b)&&(a<c));//false&&fasle=fasle
    document.write("<br>");
    document.write((a>b)&&(a<c));//true&&false=fasle
    document.write("<br>");
    document.write((a<b)&&(a>c));//fasle&&true=fasle
    document.write("<br>");
    document.write("<hr>");
    //4)三目运算符:  表达式 ? true的结果 : false的结果
    var age = 17;
    age>=18?alert("您是个成年人"):alert("未成年人");
</script>

注意：js的一些的运算符和Java中是一样的，三目运算符也是一样的用法。

路阻且长之Java学习：

API中的重要类（一）：
https://blog.youkuaiyun.com/Veer_c/article/details/103803248
API中的重要类（二）：
https://blog.youkuaiyun.com/Veer_c/article/details/103807515
API中的重要类（三）：
https://blog.youkuaiyun.com/Veer_c/article/details/103808054

Java中的IO流（一）：
https://blog.youkuaiyun.com/Veer_c/article/details/103833045
Java中的IO流（二）：
https://blog.youkuaiyun.com/Veer_c/article/details/103833423
Java中的IO流（三）：
https://blog.youkuaiyun.com/Veer_c/article/details/103833811

Java多线程（一）：
https://blog.youkuaiyun.com/Veer_c/article/details/103842078
Java多线程（二）：
https://blog.youkuaiyun.com/Veer_c/article/details/103842263
Java多线程（三）：
https://blog.youkuaiyun.com/Veer_c/article/details/103842317
Java多线程（四）：
https://blog.youkuaiyun.com/Veer_c/article/details/103842602

网络编程上（UDP）：
https://blog.youkuaiyun.com/Veer_c/article/details/103843591
网络编程下（TCP）：
https://blog.youkuaiyun.com/Veer_c/article/details/103843825

MySQL数据库（一）：
https://blog.youkuaiyun.com/Veer_c/article/details/103844059
MySQL数据库（二）：
https://blog.youkuaiyun.com/Veer_c/article/details/103844537
MySQL数据库（三）：
https://blog.youkuaiyun.com/Veer_c/article/details/103844739

JDBC技术（一）：
https://blog.youkuaiyun.com/Veer_c/article/details/103845176
JDBC技术（二）：
https://blog.youkuaiyun.com/Veer_c/article/details/103879890
JDBC技术（三）：
https://blog.youkuaiyun.com/Veer_c/article/details/103880021
JDBC技术（四）：
https://blog.youkuaiyun.com/Veer_c/article/details/103882264

HTML的基础框架（一）：
https://blog.youkuaiyun.com/Veer_c/article/details/103882385
HTML的基础框架（二）：
https://blog.youkuaiyun.com/Veer_c/article/details/103882684

CSS入门（一）
https://blog.youkuaiyun.com/Veer_c/article/details/103882856
CSS入门（二）：
https://blog.youkuaiyun.com/Veer_c/article/details/103883102

IO流的小细节（很小很细很重要）：
https://blog.youkuaiyun.com/Veer_c/article/details/103835613