1.1 JavaScript基础
1.1.1 Javascript简介
1. javascript是什么?
javascript是一种直译式脚本语言,是一种动态类型,弱类型,基于原型的语言,内置支持类型。
2. javascript的特点
(1)解释性脚本语言,JavaScript不需要解释,只需要嵌入到HTML代码中,有浏览器逐行加载解释执行。
(2)JavaScript是一种基于对象的语言,使用已经创建好的对象来实现各种程序效果。
(3) 语言简单,弱类型,语法和Java,c语言类似,变量 不需要声明和指定类型即可使用,是一种弱类型语言。
(4)JavaScript语言相对来说比较安全,仅由浏览器执行,不允许JavaScript访问本地硬盘以及操作服务器上的数据。只用来显示浏览器的网页效果和实时交互。
(5)动态性,JavaScript采用事件驱动的方式进行,HTML页面的相关控件的相关事件在触发的时候会自动执行响应的脚本或者函数。
(6)运行环境一般来说是浏览器,只需要浏览器支持即可,如果不支持(或者用户禁用了JavaScript),浏览器会忽略掉这些JavaScript代码。
1.1.2JavaScript脚本的嵌入
本章用的软件是HBuilder X(自己去浏览器搜索官网直接下载就行)https://dcloud.io/hbuilderx.html
HBuilder的使用主页有
1. 使用script标记直接插入脚本
<script type="text/javascript">
脚本代码内容
</script>
然后首先Ctrl+s再Ctrl+R运行最后页面浏览结果
界面是一个警告弹窗
2. 在页面中嵌入外部JavaScript文件
这时候需要新建一个js文件
然后连接新建的外部JavaScript文件
<script type=“text/JavaScript” src=“js 文件地址”></script>
页面浏览结果
3. 在HTML属性中直接嵌入JavaScript脚本
<body onload=‘alert(”hello JavaScript“)’>
</body>
最后页面浏览结果
可以发现这三种方法都可以运行得到相同的结果
1.1.3 JavaScript语法结构规范
1. 区分大小写
JavaScript是区分大小写的语言。也就是说,关键词,变量,函数名和所有的标识符都必须采取一致的大小写形式。比如,关键词“while”必须写成“while”,而不能写成“While”或者“WHILE”。
但需要注意的是,HTML并不区分大小写。例如。在HTML中设置事件处理程序时,元素的onclick属性也可以写成“onClick”,但在JavaScript脚本代码中,则必须使用小写的onclick。
2. 代码中的空格
JavaScript会忽略程序中标识之间的空格。
3. 注释
JavaScript只是可用于提高代码的可读性。
JavaScript不会执行被注释部分的语句。
我们可以添加只是来对JavaScript进行解释,从而提高代码的可读性。(这里我只写啦最常用的)
1).JavaScript单行注释
在输出标题前加//
在输出段落加// 效果是一样的(直接ctrl+/就行)
2)JavaScript多行注释
多行注释以/*开始,以*/结尾。
3) 使用注释来阻止执行
也就是说被注释的部分不会运行,用来方便代码的可读性
4. 标识符和关键字
标识符就是一个名字。在JavaScript中,标识符用来对变量或函数进行命名,或者用作JavaScript代码中某些循环语句中的跳转位置的标记。JavaScript标识符必须以字母,下划线(_)或美元符($)开始。
例如:i my_variable_name $str
下面列举了JavaScript中比较常用的关键字。
break delete function return
case switch var if
5. 可选的分号
和其他许多编程语言一样,JavaScript是使用分号“;”将语句分隔开的。
1.1.4 JavaScript输出
在页面上通过JavaScript将数据输出显示给浏览者有很多种方式。本节介绍最常见的方式。
1. 弹出警告框——alert
alert函数只需要一个参数,就是要输出显示的数据内容。使用方法如下。
alert(); //弹出一个空白的警告框
alert(“警告”); //使用字符串作为参数
alert(123); //使用数字作为参数
alert(something); //使用变量作为参数,后面会进行讲解变量
2. 输出到页面内容——document.write
页面显示结果
这里有html的知识点<br>是换行元素,<h1>是标题元素,所以会打出上面的效果。
当加载完成后,如果再次使用document.write将会清空原来的所有内容。
页面显示结果