JavaScript基础——JavaScript入门(笔记)

JavaScript入门(笔记)

　　JavaScript是一种轻量级、解释型的Web开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都已嵌入JavaScript引擎，JavaScript源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。

一、在网页中插入JavaScript代码

　　使用<script>标签，可以把JavaScript源代码直接放到网页文档中。

【示例1】新建HTML文档并保存为test.html，然后在<head> 标签内插入<script>标签，在<script>标签中输入代码"<h1>Hello,World!</h1>"。完整页面代码如下。

复制代码
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript "Hello"</title>
        <script>
            document.write("<h1>Hello,World!</h1>")
        </script>
    </head>
<body>

</body>
</html>
复制代码

　　<script>和</script>标签配合使用，作为脚本语言的标识符来分割其他源代码，避免与HTML标签和CSS样式代码混淆。

　　在浏览器解析网页源代码的时，浏览器检索到<script>标签时，会自动调用JavaScript引擎对其中包含的字符信息进行解释处理。

　　document是JavaScript在浏览器中定义的一个对象，它表示HTML文档内容。write()是document对象的一个方法，它表示在网页文档中输出显示指定的参数内容。

【效果】

【注意】

1 考虑到HTML文档的DOM结构模型规范性，建议用户把JavaScript脚本写在<head>和</head>标签之间，或者写在<body>和</body>标签之间
2 <script>标签包含了2个属性，type和language。在实际开发中，可以省略这2个属性，因为浏览器默认<script>标签包含的字符信息是JavaScript脚本

二、使用JavaScript文件

　　与CSS文件一样，JavaScript代码也可以存放在独立的文件中，以增强JavaScript脚本的可重复使调用。JavaScript文件是hi一个文本类型的文件，在任何文本编辑器中都可以被打开和编辑，JavaScript文件的扩展名为js。

【示例】

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <meta charset="utf-8">
        <title>使用JavaScript文件</title>
        <script type="text/javascript" src="test.js"></script>
        <script>
            var str="JavaScript编程语言";
            document.write("<h2>"+str+"</h2>"); //输入变量的值
            document.write("<p>实际长度=" + strlen(str) + "字节</p>"); //调用函数
        </script>
    </head>
<body>
</body>
</html>
?
1
2
3
4
5
6
7
8
9
10
11
//公共函数，计算字符串的实际长度
function strlen(str){
    var len;    //临时标量，存储字符串的实际长度
    var i;      //声明循环变量
    len=0;      //初始化临时变量len为0
    for (i=0; i<str.length; i++){    //循环检测字符中每个字符
        if (str.charCodeAt(i) > 255) len+=2; //如果当前字符串为双字节字符，则递增2次
        else len++;     //如果当前字符为单字节字符，则递增1次
    }
    return len;     //返回字符串的实际长度
}

【效果】

 

posted @   左扬  阅读(217)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
levels of contents
点击右上角即可分享
微信分享提示
AI IDE Trae