马黑黑 发表于 2022-1-13 23:00

JS开光

本帖最后由 马黑黑 于 2022-1-13 23:05 编辑

JS是JavaScript的缩写,是一门轻量级的面向对象的编程语言,主要用于web领域。

一开始,JS就是基于浏览器的脚本语言。这意味着:一,记事本就可以编写它;二,浏览器环境就可以运行它。

现在,请打开记事本,写下你的第一个JS脚本:

<script language="javascript">


alert("Hello JavaScript!");


</script>

保存上面的代码为 html 文件,比如 1.html 或 1.htm,双击该文件,默认浏览器会将它打开,弹出一个窗口,看看窗口的内容是什么?

和 CSS 一样,要在 HTML 文档中加入JS,也有自己的首行和末行语句规范:

首行:<script language="javascript">,这是告诉浏览器,我要使用JS脚本语言了。其中,script是关键,它就是“脚本”的意思,language="javascriipt"是声明用什么语言,这部分可以省略,直接写 <script>也可以,但规范的写法是要声明语言的,就像CSS的 <style type="text/css">一样,虽然仅<style>也是合法的。

末行:</script>,这是告诉浏览器,我的JS代码结束了。

与 <style> ... </style> 一样,可以将 <script> ... </script> 理解为特殊的HTML标签。

然后中间就是 JS 要干活的代码了。alert() 是 JS 的一个命令,单词本意是警告之类的,所以它在 JS 里弹出一个警告窗口。alert() 括号内的文本前后要用双引号或单引号,一句代码结束了要用分号收尾。这些符号,和CSS一样,都必须是英文环境下的标点符号。

作为脚本语言,其内部函数、属性、方法和语句等基本都属于自然语言下的词汇和语句,所以很容易学,但需要一点点英文基础。再看下面的另外一个JS脚本以加深会 JS 的自然语言特性:

<script>


document.title = "JS入门教程";


</script>

document 就是文档,web页面内里指HTML自身文档;title 是标题。这样,document.title = "JS入门教程"; 这句代码说的是什么呢?运行它,看看浏览器的标题栏。

我们还需知道JS写在HTML文档中的什么地方:一般 写在<body>和</body>之间,定义类需预先加载的,可以写在<head>和</head>之间。

马黑黑 发表于 2022-1-13 23:08

本帖的意图不是教大家学习JS语言,是引导大家去理解一下JS,毕竟JS是HTML不可或缺的合作伙伴和助手,它的重要性不亚于CSS,但功用不同于CSS,前者的方向是web的交互,后者的作用是制定web页样式。

红影 发表于 2022-1-14 08:57

开光,这个词用得好玩{:4_173:}

红影 发表于 2022-1-14 09:01

在佛教用语种,所谓开光者,即开发众生菩提心,光照大千利群生;开发众生智慧海,光除一切愚痴暗;开示众生见正道,光明照耀靡不周。
今天给js开光,终于让这个发挥web交互作用的编程语言浮出了水面。{:4_187:}

马黑黑 发表于 2022-1-14 10:22

红影 发表于 2022-1-14 09:01
在佛教用语种,所谓开光者,即开发众生菩提心,光照大千利群生;开发众生智慧海,光除一切愚痴暗;开示众生 ...

你管理论坛那么长时间,一直都没关注它

马黑黑 发表于 2022-1-14 10:27

本帖最后由 马黑黑 于 2022-1-14 17:26 编辑 <br /><br /><div id="sDiv" style="margin:20px auto;width:300px;height:300px;background:olive;"></div>

<p style="text-align:center;"><button onclick="javascript:chgColor();">点我改变上面方框的颜色</buton></p>

<script>

function chgColor(){
        var sdiv = document.getElementById('sDiv');
        sdiv.style.background = "tomato";
}

</script>

马黑黑 发表于 2022-1-14 10:28

可以运行,但要在纯文本编辑模式一次写好,不要切换,直接提交

红影 发表于 2022-1-14 12:03

马黑黑 发表于 2022-1-14 10:22
你管理论坛那么长时间,一直都没关注它

这就跟看电视的人只会换台不懂修电视一样,我只会玩,完全不懂它是如何构成的啊{:4_173:}

马黑黑 发表于 2022-1-14 12:55

红影 发表于 2022-1-14 12:03
这就跟看电视的人只会换台不懂修电视一样,我只会玩,完全不懂它是如何构成的啊

你这个比喻还挺好玩

红影 发表于 2022-1-14 13:43

马黑黑 发表于 2022-1-14 12:55
你这个比喻还挺好玩

这个打开帖子后,必须按掉上面那个才能翻动呢。

马黑黑 发表于 2022-1-14 17:17

红影 发表于 2022-1-14 13:43
这个打开帖子后,必须按掉上面那个才能翻动呢。

恩,我去改一下

红影 发表于 2022-1-14 21:23

马黑黑 发表于 2022-1-14 17:17
恩,我去改一下

7楼的好玩,点了一下,真的可以换颜色{:4_173:}

马黑黑 发表于 2022-1-14 21:26

红影 发表于 2022-1-14 21:23
7楼的好玩,点了一下,真的可以换颜色

JS的功能

红影 发表于 2022-1-14 21:57

马黑黑 发表于 2022-1-14 21:26
JS的功能

这个JS看起来很好玩{:4_173:}

马黑黑 发表于 2022-1-14 22:27

红影 发表于 2022-1-14 21:57
这个JS看起来很好玩

它除了自身的东东,还必须有牢靠的HTML和CSS底子

红影 发表于 2022-1-14 22:52

马黑黑 发表于 2022-1-14 22:27
它除了自身的东东,还必须有牢靠的HTML和CSS底子

这个要求太高了点{:4_173:}

马黑黑 发表于 2022-1-14 22:53

红影 发表于 2022-1-14 22:52
这个要求太高了点

是的,它好歹是一门语言

小辣椒 发表于 2022-1-14 23:01

这个才是真正的学习了,我以从来来没有看见这些文字过。

马黑黑 发表于 2022-1-14 23:04

小辣椒 发表于 2022-1-14 23:01
这个才是真正的学习了,我以从来来没有看见这些文字过。

认真看看,你会看得懂的,你实际上用过JS

小辣椒 发表于 2022-1-14 23:04

马黑黑 发表于 2022-1-14 10:27
本帖最后由 马黑黑 于 2022-1-14 17:26 编辑

点我改变上面方框的颜色


黑黑~~最好不用文字提示,直接鼠标滑过会改变颜色
页: [1] 2 3
查看完整版本: JS开光