初识JS
js:互联网上最流行的脚本语言,是一种轻量级的编程语言,可由所有的浏览器执行;
是一种运行在客户端(浏览器)的编程语言,实现人机交互效果,
作用:
网页特效(监听用户的一些行为让网页作出对应的反馈)
表单验证(针对表单数据的合法 性进行判断)
数据交互(获取后台数据,渲染到前端)
1,js的组成
1.ECMAScript(js语法)
2.DOM(文档对象模型):通过DOM提供的接口可对页面上的各种元素进行操作(颜色,位置..)
3.BOM(浏览器对象模型):通过BOM操作浏览器窗口,比如弹窗框,控制浏览器转跳等;
2,js的书写位置
1.行内式
直接写在标签的内部;
<input type="button" value="点我试试" onclick=('hello word')"/>
可以将单行或少量的就是代码写在html标签中;
在html中我们推荐使用双引号,js中我们推荐使用单引号;
不推荐直接将js标签写在标签内部,可读性差,编写大量js代码时,不方便阅读;
2.内嵌式
写在<head>标签内;
3.外链式
写在一个单独的js文件中,在<head>标签内外链导入;
<script src = "aaaa.js"></script>
外部引用的js文件 <script></script> 中间不可以写代码 适用于代码量较大的情况
注意点:
1.默认情况下浏览器会从上至下解析网页,如果将js写到一对head标签内,并且需要通过js代码操作界面上的元素,就不能直接书写js代码,否则无效;
2.如果想将js代码写到一对head标签内,并且需要在js代码中操作界面上的元素,那么必须加上windows.onload=function(){操作界面元素的js代码};
3.windows.onload含义,预加载,等到界面上的所有内容都加载完毕再执行{}中的代码;
4.由于默认情况下,浏览器会从上至下解析网页,所以如果想要通过js操作界面上的元素只需要等到元素被加载解析后操作就可以了,
所以我们还可以将js代码写到body结束标签的前面;
3,js的用法
1.html中的脚本必须写在<script></script>标签之间;
2.脚本可被放置在html页面的<body>或<head>标签之中;
3.在html中不限制使脚本的数量,可以一个或者无数个;
4.通常会把脚本放在<head>标签中,以不干扰页面内容;
(也可以使用外链式新建一个js文件,在js文件中不需要书写<script>,直接输入内容)
5.js对大小写非常敏感,但可以忽略多余的空格;
4,js常见的输出形式
1.通过弹窗的形式来输出
alert(需要输出的内容);
警示窗口 只要确定按钮
confirm(需要输出的内容);
确认窗口,同时带有确定和取消按钮
prompt(需要输出的内容);
提示输入窗口, 同时带有确定和取消按钮 还有输入窗口
注意点:
如果需要输出的内容不是数字,那么就必须通过单引号或双引号括起来;
在js中是严格区分大小写的,alert和ALERT不是一回事;
在编写js代码时,一定要记住每一句代码后面结束都需要添加一个分号,并且必须是英文状态下的分号
我们会发现有时候不写分号也能够运行,并不是不需要分号,而是浏览器自动为我们添加了分号,浏览器自动添加会 消耗一些性能,并且可能会添加错误,可写可不写,为了风格统一,要么结束符每句都写,那么每句都不写(按照团队要求)
2.通过网页内容的区域的形式输出
document.write(页面需要打印输出的内容)
注意点:
如果需要输出的内容不是数字,那么就必须通过单引号或双引号括起来;
3.通过开发者工具控制台的形式输出
console.log("abc"); //普通输出
console.warn("abc"); //警告输出
console.error("abc"); //错误输出
注意点:
如果需要输出的内容不是数字,那么就必须通过单引号或双引号括起来;
5,js结束符
代表语句结束;
英文分号;
可写可不写(现在不写的越来越多)
换行符(回车)会被识别为结束符,所以一个完整的语句,不要手动换行;
因此在实际开发中有许多人主张写js时省略结束符,
为了风格统一,要么结束符每句都写,那么每句都不写(按照团队要求)
变量
1,什么是变量
白话:变量就是一个装东西的盒子;
通俗:变量是用于存放数据的容器,我们通过变量名获取数据,甚至数据可以修改;
本质:变量是程序在内存中申请的一块用来存放数据的空间;
变量表示一些可以被修改的数据,相对于常量而言,常量不可以被修改;
2,变量的使用
使用变量就是往申请的那块内存空间中 存储数据 和 获取存储的数据;
1.定义变量:
let num;
2.往变量中存储数据;
变量名称 = 需要存储的数据;
(可以将等号右边需要存储的数据放到等号左边变量申请的那块存储空间)
num = 123;
3.如何获取存储在变量中的数据?
console.log(num);
4.如何修改变量中存储的数据?
在js中想修改变量中存储的数据,只需要再次给变量直接赋值即可;
5.js中第一次给变量赋值,我们称之为**"变量的初始化"**
var num; num = 123; 变量的初始化 num = 888; 不是变量的初始化
6.在js中,如果定义了一个变量,但是没有进行初始化, 那么变量中储存的是undefined;
7.变量初始化多种形式: a先定义变量,再对变量进行初始化; let num; num = 321; b可以在定义变量的同时对变量进行初始化 ; let value = 666;
8.初始化变量的其他格式: 如果在企业开发中对多个变量的初始化的值是一样的,我们可以通过 变量名称1 = 变量名称2 =变量名称...=初始化值;
let num; let value; num = value = 123;
9.多个变量在一行上直接输出,不要换行,使用一个 + 表示连接;
(变量名不需要引号)
<script>
/*变量的初始化:通过let声明变量 i,并赋值;*/
let i=10;
/*用户输入姓名,存储到一个叫myName的变量里面;*/
let myName = prompt(‘请输入你的名字’);
/*弹出这个提示框*/
alert(myName);
</script>
3,更新变量
一个变量被重新赋值后,它的原有值就会被覆盖,变量值将以最后一次赋值为准;
4,声明多个变量
声明多个变量,并给多个变量分别初始化,只需要写一个let,多个变量名之间用逗号分开;
let age=18,
address=‘地球村’,
gz=2000;
(let age = 18 , address = '地球村' ,gz = 2000)
<script>
let a = 100
console.log(b)
console.log(a)
// 因为没有声明变量b,输出时会报错,并且不会继续输出a
</script>
5,变量命名规范
1.由字母,数字,下划线和美元符号组成;
2.严格区分大小写,var APP和var app是两个变量;
3.不能以数字开头;
4.不能是关键字,保留字,如for,while;
5.遵循驼峰命名法则,首字母小写,后面单词首字母要大写,myFirstName;(不遵守,不报错,但不符合规范)
6,标识符
在JS中所有的可以由我们自主命名的都可以称为是标识符,
例如:变量名、函数名、属性名都属于标识符;
1.只能由26个英文字母的大小写,10个阿拉伯字母0-9,下划线,美元符号组成;
2.不能以数字开头或者纯数字;
3.严格区分大小写,比如test和Test是不同的
4.不可以使用关键字或者保留字作为标识符;
5.js底层保存标识符时,实际上采用Unicode编码,所有理论上讲utf-8中包含的内容都可以作为标识符;(如中文)