JavaScript概述和基本语法(超详解!!!)
文章目录
-
- JavaScript概述与基本语法
-
- JavaScript概述
-
- JavaScript的历史
- JavaScript的作用
- JavaScript,HTML,CSS三者之间的关系
- 基本语法
-
- 三种对话框
- 变量
- 数据类型
- 算数运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
- 条件运算符
- 控制语句
-
- 判断语句if/else
- 判断语句if/else if/else
- 判断语句switch
- 循环语句for
- 循环语句while
- 循环语句do/while
JavaScript概述与基本语法
JavaScript概述
首先我们理解字面上的JavaScript,即Java和Script
java:需要整体编译,然后执行
script:脚本语言 不需要编译 由某种引擎解释执行 sql,python,html,css
JavaScript的历史
1.JavaScript是由Netscape公司(美国网景公司)开发的一种脚本语言, 结构简单, 使用方便 ;
2.Netspace公司将这种脚本语言命名为LiveScript, 它的语法以Java为基础, 但是比Java要简单许多, 由于它是一种脚本语言, 不需要编译, 可由浏览器直接解释运行;
3.Netscape公司建LiveScript大有发展前途, 而SUN公司也觉得可以借此普及JAVA, 于是两家公司签订协议, 将LiveScript改名为JavaScript, 这才造就了这个强力的WEB页开发工具;
JavaScript的作用
JavaScript是一种直译式脚本语言, 用来为网页添加各式各样的动态功能(可以操作网页内容), 不需要编译可直接通过浏览器解释运行,浏览器一行一行进行解析, 通常JavaScript脚本是通过嵌入在HTML中实现自身的功能的.
1.响应客户端鼠标和键盘事件;
2.客户端页面表单数据验证;
3.使用JavaScript动态改变页面标签的样式.
JavaScript,HTML,CSS三者之间的关系
JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言,其目的是增强web页面与用户的交互,弥补HTML的缺陷.
HTML：超文本标注语言，主要用来控制内容的结构的。
CSS：级联样式表，主要用来控制HTML标签的格式的。
JavaScript：客户端的脚本程序，主要用来控制HTML标签的行为的。
基本语法
JavaScript脚本写在一组< script>标签中,此标签可以放在head中或body中,一般习惯放在head中,还可以将脚本写在外部的js文件中,在html页面中导入外部.js文件
方式一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初识JS</title>
<!-- 在script标签中写js脚本 -->
<script type="text/javascript">
//js脚本
</script>
</head>
<body>
</body>
</html>
方式二
<!--
导入外部js
<scrit src="外部js文件的地址" type = "text/javascript" charset="编码格式">
</script>
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初识js</title>
//导入外部.js文件
<script src="js/out.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
</body>
</html>
测试
我们可以使用
conaole.log(num);
将num打印到console控制台,即浏览器页面按F12后可以看到的console.
三种对话框
alert("提示对话框"); //提示对话框
confirm("选择对话框"); //选择对话框
prompt("输入对话框"); //输入对话框
变量
1.声明变量使用var关键字
var num;
2.声明变量的同时也可以对其赋值, JavaScript是一种弱语言, 对于变量的数据类型要求没有Java严格, 不需要定义数据类型, 可以给它任意类型.
var num1 = 1;
var num2 = "abc";
var num3 = true;
var num4 = new Date();
数据类型
1.数值型(number): 包括整型数和浮点型数;
var number1 = 10;
var number2 = 11.12;
2.布尔型(boolean): 即逻辑值, true 或 false;
var boolean1 = true;
var boolean2 = false;
3.字符串型(String): 有单个或多个文本字符组成. 可以用单引号,也可以用双引号来说明;
var str1 = "abc";
var str2 = 'abc';
var str3 ='abcd"asc"saq';//使用单引号来输入包含引号的字符串
4.undefined: 未定义,声明但未赋值;
var un;
console.log(un);//控制台输出即underfined
5.Object类型
算数运算符
| 运算符 | 描述 |
|---|---|
| + | 加法, 字符串连接, 如果一个数字+一个字符串结果会连成字符串 |
| - | 减法,数值可以减去字符串的数字,会对字符串的数字进行隐式的转换 |
| * | 乘法 |
| / | 除法 |
| % | 取余 |
| ++ | 自加,即+1 |
| – | 自减,即-1 |
代码示例
<script type="text/javascript">
//算数运算符
var x = 10;
var y = 5;
var z = "5";
var a = "a";
console.log(x+y);
console.log(x+z);//105 连接字符串
console.log(x-z);//5 数值可以减去字符串的数字 对字符串的数字进行了隐式的转换
console.log(x-a);//NaN not a number 数字减去非数字的字符串
console.log(x*y);//50
console.log(x/y);//2
console.log(x%y);//0
console.log(x=++y);//6
console.log(x=--y);//5
</script>
赋值运算符
//给定x y的值
var x = 10;
var y = 5;
| 运算符 | 例子 | 等价于 | 结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
比较运算符
| 运算符 | 描述 |
|---|---|
| == | 等于 |
| === | 全等于(值和类型) |
| != | 不能于 |
| > | 大于 |
| < | 小于 |
| >= | 大于等于 |
| <= | 小于等于 |
<script type="text/javascript">
/*
= : 赋值
== : 等于 只比较值是否相等
=== : 全等 比较值和类型是否相等
*/
var a = 5;
var b = "5";
console.log(a==b);//true 比较值是否相等
console.log(a===b);//false 比较值和类型是否一致
</script>
逻辑运算符
&&:and 与
||:or 或
!:not 非
条件运算符
JavaScript还包含了基于某些条件对变量进行赋值的条件运算符.
语法
var result = (条件表达式)?结果1:结果2
//条件成立返回结果1,条件不成立返回结果2
代码示例:
<script type="text/javascript">
var a = 5;
var result = (a === "5" || a == 5)?true:false;
alert(result);//true
</script>
控制语句
判断语句if/else
if(){
}else{
}
判断语句if/else if/else
if(){
}else if(){
}else{
}
判断语句switch
switch(){
case1:break;
case2:break;
[default:...]
}
循环语句for
//基本格式
for(初始化;条件;增量){
语句集;
}
//功能: 实现条件循环,当条件成立时,执行语句集,否则跳出循环体
循环语句while
//基本格式
while(条件){
语句;
}
//功能:该语句与for语句一样,当条件为真时,重复循环,否则退出循环
循环语句do/while
//基本格式
do{
...
}while(条件);
//功能:do...while循环与while循环相似,在循环的末尾检查条件,它总是至少运行一次
/*
break和continue语句
使用break语句使得循环从for或while中跳出
continue使得跳过循环内剩余的语句而进入下一次循环
*/