JavaScript基础
javaScript基础
什么是JavaScript
JavaScript是一种描述性语言，基于对象（Object）和事件（Event Driven）驱动的，并具有安全性的脚本语言，JavaScript的特点：
- JavaScript主要用来在HTML页面添加交互行为。
- JavaScript是一种脚本语言，语法和Java类似。
- JavaScript一般用来编写客户端脚本。
- JavaScript是一种解释性的语言，边执行边解释。
1.JavaScript的组成
- ECMAScript标准，标准的脚本语言规范
- 浏览器对象模型（Browser Object Model，BOM）
- 文档对象模型（Document Object Model，DOM）
2.JavaScript的基本结构
- JavaScript的基本结构
<script type="text/javascript">
//JavaScript 语句;
document.write("初学JavaScript");
//document.write()用来向页面输出可以包含HTML标签的内容
document.write("<h1>Hello,JavaScript</h1>");
//<script>...</script>位置不固定，可以包含在文档的任意地方
</script>
- JavaScript执行原理
a. 浏览器向服务器发送包含JavaScript的请求页面
b. 数据处理：服务器端将某个包含JavaScript的页面进行处理
c. 发送响应：服务器将处理好的页面发送到客户端，再有浏览器解析呈现给用户
3.在网页中引用JavaScript的方式
JavaScript嵌入网页的三种方式：
- 内部JavaScript文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
</head>
<body>
<!--内部Js文件-->
<script type="text/javascript">
//Js语句
</script>
</body>
</html>
- 外部JavaScript文件
<!--外部Js文件-->
<script type="text/javascript" src="YuXi01.js"></script>
- 直接在HTML标签中
<!--直接在HTML中-->
<input type="button" value="弹出信息框" onclick="javascript:alert('欢迎您')"/>
JavaScript核心语法
JavaScript的核心语法，它包含变量的声明，赋值，运算符号，逻辑控制语句等基本语法
1.变量的声明和赋值
JavaScript是一种弱类型语言，没有明确的数据类型，也就是说，在声明变量时，不需要指定变量的类型，变量的类型由赋给变量的值决定。这一点不像Java和C#那样，在声明变量的同时需指定变量的数据类型。
语法：
//声明：
var 合法的变量名;
//声明并赋值
var width,height=10;
var name="rose";
//1.var 是声明变量所使用的关键字
//2.Js区分大小写
//3.Js命名规则：可以由数字，字母，下划线和"$"字符，但首字母不能是数字，且不能使用关键字命名
2.数据类型
JavaScript 提供了常用的数据类型
- undefined（未定义类型）
- null（空类型）
- number（数值类型）
- String（字符串类型）
- boolean （布尔类型）
ECMAScript提供了typeof运算符判断一个值或变量究竟属于那种类型，语法格式如下：
typeof(变量或值);
其返回结果有以下几种：
- undefined（未定义类型）
- number（数值类型）
- String（字符串类型）
- boolean （布尔类型）
- Object（对象Object类型）
undefined表示声明但没有对该变量赋值，null表示对该变量赋了空值。
| 方法 | 描述 |
|---|---|
| indexOf(str,index) | 检索字符串。 |
| charAt() | 返回在指定位置的字符。 |
| charAt() | 返回在指定位置的字符。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 |
更多方法请访问：w3school
3.数组
- 创建数组
var 数组名称 = new Array(size);
//new创建数组关键字，Array表示数组关键字，sizw表示数组的长度，整数表示
- 为数组赋值
var fruit=new Array("apple","orange","peach","banana");
- 访问数组元素
var fruit=new Array("apple","orange","peach","banana");
feuit[0];
- 数组常用属性和方法
| 类别 | 名称 | 描述 |
|---|---|---|
| 属性 | Length | 设置或返回数组中元素的数目。 |
| 方法 | join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
| 方法 | sort() | 对数组的元素进行排序。 |
| 方法 | push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
更多属性和方法请访问：w3school
3.运算符
| 类别 | 运算符号 |
|---|---|
| 算术运算符 | +，-，*，/，%，++，– |
| 比较运算符 | >，<，>=，<=，，!=，=，!=== |
| 逻辑运算符 | &&， \\，！ |
| 赋值运算符 | +=，-=，== |
4.逻辑控制语句
- if 结构
if(表达式){
//Js语句1;
}else{
//Js语句2;
}
- switch 结构
switch(表达式){
case 值1:
//Js语句1;
break;
case 值2:
//Js语句2;
break;
...
default:
//Js语句n;
break;
}
- for循环结构
for(初始化;条件;递增递减){
//Js语句1;
}
- while循环结构
while(条件){
//Js语句1;
}
- do-while循环结构
do{
//Js语句1;
}while(条件);
- for-in循环结构
for(变量 in 对象){
//Js语句1;
}
- 中断循环
break;//立即退出整个循环
continue;//之退出当前循环，进行下次循环
5. 常用的输入/输出
- 警告（alert）
alert("提示信息");
- 提示（prompt）
prompt("提示信息","默认输入信息");
//将prompet返回内容放到变量中:
var color = prompt("请输入你喜欢的颜色：");
JavaScript常用语法——函数
在JavaScript中.函数类似于Java中的方法.是执行特定功能的JavaScript代码块。但是JavaScript 中的函数使用更简单，不用定义函数属于哪个类，因此调用时不需要用“对象名 .方法名()”的方式，直接使用函数名称来调用函数即可。
JavaScript中的函数有两种:一种是JavaScript 自带的系统函数.另-种是用户自行创建的自定义函数。
1. 常用系统函数
JavaScript提供了两种把非数字的原始值转换成数字的函数.即parselnt( )和parseFloat( )。另外， 它还提供了一个检查是否是非数字的函数isNaN( ).通常用于逻辑判断。
- parselnt()
parseInt()函数可解析一个字符串，并返回一个整数，语法如下：
//语法:
parselnt("字符串");
var num1 = parseInt("78.89"); //返回值是78
var num2 = parseInt("344shdj"); //返回值是344
var num3 = parseInt("this555"); //返回值是NaN
- parseFloat()
parseFloat()函数可解析一个字符串，并返回一个浮点数，语法如下：
var num1 = parseFloat("4543fff"); //返回值是4543
var num2 = parseFloat("45.56"); //返回值是45.56
var num3 = parseFloat("45.56.88"); //返回值是45.56
var num4 = parseFloat("fdfsf854"); //返回值是NaN
- isNaN()
isNaN()函数用于检查其参数是否是非数字，语法如下：
var num1 = isNaN("12.5"); //返回值是false
var num2 = parseFloat("45.5s"); //返回值是true
var num3 = parseFloat("45"); //返回值是false
2. 自定义函数
在JavaScript中，自定义函数有关键字function，函数名，一组参数及括号里待执行的JavaScript语句，语法如下：
- 定义函数
function 函数名 (参数1,参数2, ...){
JavaScript语句;
return 返回值;
}
//function是定义函数的关键字，必须有;
//定义函数可不带参数和返回值;
function 函数名 (){
JavaScript语句;
}
- 调用函数
事件名 = "函数名()";
//调用函数是有参必须指定后面的参数;
3. 事件
| 名称 | 说明 |
|---|---|
| onload | 一个页面或一幅图像完成加载 |
| onlick | 鼠标单击某个对象 |
| onmouseover | 鼠标指导移到某个元素上 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
JavaScript基础总结
➢JavaScript 由三部分组成: ECMAScript. DOM和BOM。
➢ 在HTML页面中引用JavaScript 有三种方式:直接把JavaScript 代码写在标签之间，使用外部JavaScript文件或直接把简短的JavaScript代码写在HTML标签中。
➢JavaScript 的核心语法有变量的声明和赋值、数据类型、逻辑控制语句、注释。在JavaScript 中，代码区分大小写，并且建议每一句的末尾使用分号；结束。
➢在 JavaScript中常用输入/输出对话框的方法是prompt( )方法和alert( )方法。
➢程序调试可以使用 chrome开发者工具或alert( )方法。
➢函数分 为系统函数和自定义函数，自定义函数需要先创建，再调用。
➢自定义函数分为有参函数和无参函数。
➢事件在网 页中的应用。