JavaScript+jQuery日常学习(一)
第1章 初识JavaScript
1.JavaScript的特点
- 是一种脚本语言
- 可以跨平台
- 支持面向对象
2.三大主流框架
- Vue.js
- Angular
- React
3.JavaScript的组成
-
ECMAScript:JavaScript的核心,ECMAScript规定了JavaScript的编程语法和基础核心内容,是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。
-
DOM:文档对象模型,是W3C组织推荐处理可扩展标记语言的标准编程接口,通过对DOM提供的接口,可以对页面上的各种元素进行操作。
-
BOM:浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构,通过对浏览器窗口进行操作。
4.JavaScript入门
(1)代码书写位置
- 行内式:将单行或少量的JavaScript代码写在HTML标签的事件属性中。
DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<input type="button" value="输入密码" onclick="alert('密码输入错误')">
body>
html>
注意:1.在html中推荐使用双引号,而JavaScript推荐使用单引号。
2.行内式可读性差,编写大量JavaScript代码时,不方便阅读。
3.多层引号嵌套使用时,非常容易混淆,导致代码出错。
4.只有临时测试或者特殊情况下才会使用行内式。
- 内嵌式(嵌入式):使用< script>标签包裹代码,该标签可以写在< head>或< body>标签中。
DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script>
alert('密码输入错误');
script>
head>
<body>
body>
html>
- 外部式(外链式):将代码写在一个单独的文件中,一般用"js"作为文件的扩展名,在html页面使用< script>标签引入。
DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="test.js">
script>
head>
<body>
body>
html>
alert('密码输入错误'); /*test.js中写入*/
注意:伪协议也是一种嵌入JavaScript的方法。
<a href="javascript:alert('密码输入错误')">输入密码a>
JavaScript异步加载:为了尽可能减少对整个页面下载的影响,推荐将不需要的提前执行的< script>标签放在< body>标签的底部。
- async:用于异步加载,即先下载文件,不阻塞其他代码执行,下载完成后执行。
<script src="file.js" async></script>
- defer:用于延后执行,即下载文件,直到网页加载完成后再执行。
<script src="file.js"defer></script>
(2)注释
- 单行注释:“//”
- 多行注释:“/* */”
(3)输入和输出语句
常用的输入和输出语句
| 语句 | 作用 |
|---|---|
| alert(‘msg’) | 浏览器弹出警告框 |
| console.log(‘msg’) | 浏览器控制台输出信息(在控制台可以直接运行JavaScript代码) |
| prompt(‘msg’) | 浏览器弹出输入框,用户可以输入内容 |
(4)JavaScript变量
-
变量:程序在内存中申请的一块用来存放数据的空间。
-
变量的使用
声明变量并赋值
var age;
age = 10;
变量初始化
var age=10;
var myname='小明';
var address='XX市XX区';
var age=18;
var email='xiaoming@localhost';
alert(age);
console.log(myname);
console.log(address);
console.log(age);
console.log(email); /*全局作用下定义的变量会自动注册为windows对象的属性*/
var ID=prompt('请输入ID'); //输入语句
var myname='小明';
var address='XX市XX区';
var age=18;
var email='xiaoming@localhost';
alert(age);
console.log(myname);
console.log(address);
console.log(age);
console.log(email);
console.log(ID);
(5)变量命名规则
①有字母、数字、下划线和美元符号组成。
②严格区分大小写。
③不能以数字开头。
④不能是关键字、保留字,如var,for。
⑤要尽量做到"见其名知其意"
⑥建议遵守驼峰命名法。如myFisrstName。
例子:
1.交换两个变量的值。
DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="test.js"> //外链式
script>
head>
<body>
body>
html>
var apple1=prompt('请输入apple1的值');
var apple2=prompt('请输入apple2的值');
var temp;
temp=apple1;
apple1=apple2;
apple2=temp;
console.log(apple1);
console.log(apple2);
2.将用户输入的信息输出到网页的JavaScript程序。
var msg=prompt('请您输入信息');
alert('用户输入的内容是:'+msg); //输出
