JavaScript——基础
JavaScript——基础
- 初识JavaScript
-
- 什么是JavaScript
- JavaScript的特点
- JavaScript开发工具
- 第一个JavaScript程序
- 基本的语法规则
- JavaScript入门
-
- JavaScript引入方式
- JavaScript常用输出语句
- 注释
- 数据与运算
- 函数
- 对象
- 事件
初识JavaScript
什么是JavaScript
JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。对于一个网页来言，HTML代表了结构，CSS代表了样式，JavaScript代表了行为；结构是网页的骨架，样式是网页的外观，行为则是网页的交互逻辑。
| 语言 | 作用 | 说明 |
|---|---|---|
| HTML | 结构 | 从语义的角度，描述网页结构 |
| CSS | 样式 | 从审美的角度，美化页面 |
| JavaScript | 行为 | 从交互的角度，提升用户体验 |
JavaScript的特点
- JavaScript是一种脚本语言
·脚本语言：依赖于解释器，只有在被调用时才会自动进行解释或编译，常见的脚本语言还有VBScript、PHP、Python等；
·非脚本语言：一般需要经过编译、链接，生成独立可执行的文件后才能运行，如C、C++、Java、C#等； - JavaScript可以跨平台
·JavaScript不依赖操作系统，仅需要浏览器的支持； - JavaScript支持面向对象
·面向对象是程序开发中的一种重要的编程思想，基于面向对象思想，诞生了许多优质的库和框架，使JavaScript开放变得更加快捷、高效；
·除了经典的jQuery库，近年来又诞生了Bootstrap、AngularJS、Vue.js、React、webpack等框架和工具；
JavaScript开发工具
1.浏览器（常见浏览器列举）
| 开发商 | 浏览器 |
|---|---|
| Microsoft | Internet Explorer、Microsoft Edge |
| Google Chrome | |
| Mozilla | Mozilla Firefox |
| Apple | Safari |
2.代码编辑器
·Notepad++：一款在Windows环境下的免费、开源的代码编辑器；
·Sublime Text：一个轻量级、跨平台的代码编辑器；
·NetBeans：一个由Sun公司建立的可扩展开发平台；
·Adobe Dreamweaver：一个集网页制作和网站管理于一身、所见即所得的网页编辑工具；
·WebStorm：一款由JetBrains公司推出的前端开发工具，HTML5、JavaScript是其强项，支持Bootstrap、AngularJS、Vue.js、React、webpack等流行的前端框架和工具；
第一个JavaScript程序
1.首先编写一个简单的网页
<html>
<head>
<meta charset="UTF-8">
<title>第一个JavaScript程序title>
head>
<body>网页内容body>
html>
2.之后使用嵌入式JavaScript，通过script标签将代码嵌入其中
<html>
<head>
<meta charset="UTF-8">
<title>第一个JavaScript程序title>
<script>
alert('Hello world!');
script>
head>
<body>网页内容body>
html>
3.进行测试
基本的语法规则
- JavaScript严格区分大小写，在编写代码时一定要注意大小写的正确性；
- JavaScript对空格、换行、缩进不敏感，为了美观，一条语句可以分成多行书写；
- JavaScript在一条语句结束、换行书写下一条语句时可省略英文分号，但为了保持良好的代码风格，建议每条语句都以英文分号结尾；
JavaScript入门
JavaScript引入方式
1.嵌入式
<script>
JavaScript语句;
script>
<script type="text/javascript">
JavaScript语句;
script>
在HTML5中，script标签type属性的默认值即为"text/javascript"，因此可以选择省略
2.外链式
（1）先创建单独的js文件
// hello.js
alert('Hello world!');
（2）之后在HTML文件内，使用script标签的src属性引入js文件
<script src="hello.js">script>
（3）src属性可指定为以下形式
- 相对路径；
- 绝对路径；
- URL地址；
3.行内式
<a href="javascript:alert('Hello world!');">testa>
<input type="button" onclick="javascript:alert('Hello world!');" value="test">
行内式是将JavaScript作为HTML标签属性来使用，上述代码实现了单击test或按钮test，会弹出显示“Hello world!”的警告框
JavaScript常用输出语句
1.alert()
- 用于弹出一个警告框，点击“确定”按钮才能关闭，确保用户可以看到某些信息；
- 前面已经演示过；
2.console.log() - 用于在浏览器的控制台输出内容；
- 演示：
<html>
<head>
<meta charset="UTF-8">
<title>testtitle>
<script>
console.log('异世相遇，尽享美味！');
script>
head>
<body>网页内容body>
html>
之后打开HTML文档，单击右键→审查元素→console，即可看到运行结果：
3.document.write()
- 用于在HTML文档页面中输出内容；
- 演示：
<html>
<head>
<meta charset="UTF-8">
<title>testtitle>
<script>
document.write('输出内容中的HTML标签会被浏览器解析');
script>
head>
<body>网页内容body>
html>
- 注意：输出内容中不要有script结束标记，否则会导致程序提前结束；如果不得不加，那么“/”前要加转义符号“\”；
注释
1.单行注释
// 这是单行注释
2.多行注释
/*
这是多行注释
*/
数据与运算
1.数学运算：加（+）减（-）乘（*）除（/）四则运算
alert(1 + 2); //3
alert(2 * 3 + 4); //10
alert(2 * (3 + 4)/3 - 1); //7
2.比较两数大小：输出布尔类型的值
alert(1 > 2); //false
alert(2 == 2); //true
alert(1 < 2); //true
3.使用字符串保存数据：英文单引号or英文双引号
alert('刻晴');
alert("菲谢尔");
4.比较两个字符串是否相等
alert('1' == '2'); //false
alert('2' == '2'); //true
5.字符串与数字的拼接
- 字符串的拼接：“+”
alert('1' + '2'); //结果为12
- 若字符串与数字同时出现，它会自动与数字拼接：
alert('1 + 2= '+1+2); //结果为1+2=12
- 所以在这种情况下，应使用小括号提高数据运算的优先级：
alert('1 + 2= '+(1+2)); //结果为1+2=3
6.使用变量保存数据
- 格式：var 变量名=变量值/之前声明过的变量名;
- 演示：
var num1 = 1;
var num2 = 2；
var num3 = num1; //1
alert(num1 + num2); //3
函数
1.用途：封装常用功能模块，将代码模块化、组件化，如需使用调用即可，而非重写整段代码，这样做既减少了代码的使用又使代码编写更有条理；
2.函数的返回值：函数执行后返回的一个表示执行结果的值；
var food = prompt('请输入你最爱吃的食物：'); //弹出一个输入框，提示用户输入内容
alert('你最爱吃' +food); //输出函数返回值
3.函数的参数：有些函数支持一个或多个参数，多个参数之间用英文逗号隔开；
var food = prompt('请输入你最爱吃的食物：','酸菜鱼'); //第二个参数，设置弹出输入框中的默认文本
4.自定义函数：用于封装自己的代码；
// 定义函数
function sum(a,b){
var c = a + b; //函数的内部代码
return c; //函数的返回值
//调用函数
alert(sum(33,66)); //99
//自定义函数后续会详细讲解
对象
对象的组成：一个对象的成员由属性和方法组成，属性就是一些变量，方法就是一些函数。我们通过访问对象的属性来获取信息，通过调用对象的方法来实现所需要的功能；
1.window对象：window对象是JavaScript与浏览器交互的主要接入点，提供了用于JavaScript脚本控制浏览器的一些接口
- 访问方法：window.属性名/方法();
window.console();
window.document;
2.document对象：document对象是window对象的属性之一，主要用于与网页文档进行交互。当通过JavaScript访问或修改网页中的某个元素时，需要使用其附属的方法；
- 演示：
<body>
<p id="23333">蒙德北部，应急食物p>
<script>
var test = document.getElementById('23333'); //根据id获取元素对象
alert(test.innerHTML); //通过innerHTML属性获取元素内容，输出段落里的语句
script>
body>
4.String对象：用于在代码中直接定义字符串类型；
-演示：
var str = 'apple';
alert(str.length); //获取字符串长度
alert(str.toUpperCase()); //转换为大写
5.自定义对象
- 演示：
// 创建对象
var stu = {
};
//添加属性
stu.name = 'Jack';
stu.age = '18';
//访问属性
alert(stu.name);
//添加方法
stu.introduction = function(){
return '我是'+this.name+',今年'+this.age+'岁。';
//"this"用来访问当前对象的属性或方法
}
//调用方法
alert(stu.introduction());
//自定义对象后续会详细讲解
事件
事件是指可以被JavaScript侦测到的交互行为；
- 演示：
<input type="button" onclick="javascript:alert('Hello world!');" value="test">
- 不推荐行内式，建议通过元素对象来添加事件：
<body>
<input type="button" id="btn" value="test">
<script>
document.getElementById('btn').onclick = function(){
//设置鼠标点击onclick事件
alert(this.value); //获取按钮的value属性
}; //事件注册和事件类型，在后续会详细讲解
script>
body>