JavaScript入门<1>基础语法

来源：互联网发布：启示录知乎编辑：程序博客网时间：2024/05/29 09:15

1、什么是JavaScript？

1）Javascript是一种网页编程技术，用来向HTML页面添加动态交互效果；

2）javaScript是一种基于对象和事件驱动的解释性脚本语言，具有java和C语言类似的语法；

3）Javascript可以直接嵌入到HTML页面中，游浏览器解释执行代码，不进行预编译。

2、JavaScript的发展史

1）JavaScript的正式名称是“ECMAScript”，此标准由ECMA组织发展和维护。
2）ECMA-262是正式的JavaScript（Netscape）和JScript（Microsoft）。
3）网景公司在Netscape2.0首先推出了JavaScript。微软公司从IE3.0开始提供对客户端JavaScript的支持，并另取名为JScript。
注意事项：与Java没任何关系。

3、JavaScript有什么特点？

1）可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
  2）解释执行：事先不解释，逐行执行。
  3）基于对象：内置大量现成对象。
  4）适宜：客户端数据计算、客户端表单合法性验证、浏览器事件的触发、网页特殊显示效果制作。

4、JavaScript的定义方式有哪些？

JS定义方式主要有三种

1）直接定义在事件中

例如：<input type="button" value="第一个按钮" onclick="alert('hello world');"/>

2）在页面上<head></head>标签中嵌入<script></script>标签，标签中放置JavaScript代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>这是一个把js代码嵌入在html文件头部的定义方式哦</title><script language="javascript" type="text/javascript">/*不指定语言，直接写代码，那么浏览器用哪种语言规则解释？依靠浏览器的默认设置*///封装方法function firstMethod()//必须用关键字function，不需要返回值{alert("he\"ll\"o ja\nva");//不封装的话，一加载就运行，按从上往下解释执行alert("\u4e00");//一，中文字符编码的开始alert("\u9fa5");//中文字符编码的结束}</script></head><body>这是一个js测试哦</body></html>

 注意事项：
 alter修改，alert警告。
 onclick="alert('hello world');"字符串用单引号或双引号隔开，此处用单引号，因为会和前面的双引号成对

3）将代码写到单独的.js文件中，在html页面的<head>里面使用<script>引入

<span style="font-size:18px;"><head><title>这是一引用外部js文件的定义方式哦</title><script language="javascript" src="myScript/test.js"></script></head></span>

5、JavaScript的代码常见错误有哪些？

解释性代码，若代码错误，则页面无任何效果

1）调试工具为IE浏览器，那么使用开发工具；

2）如果调试工具为FireFox，那么使用错误控制台查看。

二）JavaScript基础语法

1、JavaScript代码如何组成的？

1）由Unicode字符集编码

2）语句：表达式、关键字、运算符组成，大小写敏感，使用分号结束。

3）注释：单行注释用“//”，多行注释用：/* */

2、变量

1）变量声明：使用关键字var声明变量，如var x,y;
 注意事项：以var关键字声明，声明的时候不确定类型，变量的类型以赋值为准。
例如： var x,y,z; x=10; y="mary"; z=true;

2）变量初始化：使用等号赋值
 注意事项：没有初始化的变量则自动取值为undefined，如：var count = 0;
3）变量命名同标识符的规则，大小写敏感。

3、JavaScript有哪些数据类型？

JS中有三种数据类型：
1）基本数据类型：number数字、String字符串、boolean布尔
2）特殊类型：null空、undefined未定义
3）复杂类型：array数组、object对象

4、三种基本数据类型小结

A、number数据类型

1）不区分整型数值和浮点型数值：所有数字都采用64位浮点格式存储，类似于double格式。
2）整数：16进制数前面加上0x，8进制前面加0。
3）浮点数：使用小数点记录数据，如3.4，5.6；使用指数记录数据，如4.3e23=4.3X10^23

B、String字符串

1）表示文本：由Unicode字符、数字、标点符号组成的序列。
2）首尾由单引号或双引号括起来。
3）特殊字符需要转义，用转义符\，如：\n，\\，\'，\“
例如：var a = "欢迎来到\"JavaScript世界\"";
 注意事项：可用在正则表达式，只允许录入汉字[^\u4e00-\u9fa5$]，每个汉字都有转义符。

C、boolean布尔型

1）仅有两个值：true和false；实际运算中true=1，false=0
2）多用于结构控制语句。
D、特殊类型

1）null：null在程序中代表“无值”或者“无对象”。可以通过给一个变量赋值null来清除变量的内容。
2）undefined：声明了变量但从未赋值或这对象属性不存在。

5、什么是JS中的数据类型的隐式转换？常用数据类型转换函数有哪些？

A、JS中的数据类型的隐式转换

1）JavaScript属于松散型的程序语言

①变量在声明时不需要指定数据类型。
②变量由赋值操作确定数据类型

2）不同数据类型在计算过程中会自动进行转换

   ①数字+字符串：数字转换为字符串
   ②数字+布尔值：true转换为1，false转换为0
   ③字符串+布尔值：布尔值转换为字符串true或false
   ④布尔值+布尔值：布尔值转换为数值1或0

var s="a";//这是一个测试var n=1;var b1=true;var b2=false;        alert(s + n);//a1        alert(s + b1);//atrue        alert(n + b1);//2        alert(b1 + b2);//1

B、常见类型转换函数

1）按照转换方式主要分为两种：

   ①隐式转换：直接转，默认的规则
   ②显式转换：利用转换的方法
       注意事项：不建议用隐式转换。
2）常用数据类型的显式转换（隐式转换上面说过）

   ①toString：转成字符串，所有数据类型均可转换为string类型。
   ②parseInt：强制转换成整数，如果不能转换，则返回NaN。
例如：parseInt("6.12")=6（无四舍五入）
   ③parseFloat：牵制转换成浮点数，如果不能转换，则返回NaN。
例如：parseFloat("6.12")=6.12
   ④typeof：查询数值当前类型，返回string/number/boolean/object。
例如：typeof(“test”+3)="string"

3）NaN：not a number，非常特殊，它不是数字，所以任何数跟它都不相等，甚至NaN本身也不等于NaN

4）isNaN(str)： is not a number，判断文本是否为数值，false为数值，true为非数值

5）案例

eg1：转换函数：得到录入数值的整数部分

   <input type="text" id="txtData" />   <input type="button" value="得到录入数据的整数部分" onclick="getInt();" />    function getInt() {           var str = document.getElementById("txtData").value; if (isNaN(str))      alert("请录入数值");         else {           var data = parseInt(str);    alert("整数部分为：" + data);      }     }

eg2：转换函数：计算录入数值的平方

<input type="text" id="txtData" /><input type="button" value="计算平方" onclick="getSquare();" />    function getSquare() {    var str = document.getElementById("txtData").value;        if (isNaN(str))          alert("请录入数值");   else {     var data = parseFloat(str);    var result = data * data;   alert(result);      }      }

6、JavaScript中的算术运算、关系运算、逻辑运算（类C、java）

A、算术运算

1）加（+）减（-）乘（*）除（/）余数（%）
   ①“-”：可以表示减号，也可以表示负号。
   ②“+”：可以表示加法，也可以用于字符串的连接。
2）递增（++）递减（--）
   i++等价于i=i+1，i--等价于i=i-1

B、关系运算

1）用于判断数据之间的大小关系：“>”、“<”、“>=”、“<=”、“==”、“!=”
 注意事项：“= =“比较的是值（内容）。
2）关系表达式的值为boolean类型（“true”或“false”）
3）严格相等：“===”类型、数值都相同。
4）非严格相等：!==
例如： var a = "10";var b = 10;

if(a == b) alert("equal");

if(a === b) alert("same");

C、逻辑运算

1）逻辑非（!）逻辑与（&&）逻辑或（||）
2）逻辑运算的操作数均为boolean表达式

b1&&b2

b1||b2

!b1

false

true

false

true

false

true

false

true

false

true

7、条件运算符与流程控制语句小结

A、条件运算符又称“三目”或“三元”运算符。
语法：boolean表达式?表达式1:表达式2
①先计算boolean表达式的值，如果为true，则整个表达式的值为表达式1的值。
②如果为false，则整个表达式的值为表达式2的值。
eg：猜数字

<input type="text" id="txtData" /><input type="text" onblur="guessNumber(this.value);" /><!--this代表当前对象-->function guessNumber(str) {//内置结果var result = 10;if (isNaN(str))alert("请录入数值");else {var data = parseFloat(str);var info = data > result ? "大了" : "小了";alert(info);}}

B、流程控制语句
程序默认情况下顺序执行，改变或者控制执行顺序。
1）if语句：

①if(表达式){语句块1}

else{语句块2}
②if(表达式1){语句块1}

else if(表达式2){语句块2}

else{语句块3}
2）switch-case语句：
switch(表达式){
case 值1:语句1;break;
case 值2:语句2;break;
default:语句3;
}
3）for语句：
for(初始化;条件;增量){
语句;
}
 注意事项：初始化中的局部变量用var声明。
4）while语句
while(条件){
语句1;
}
 注意事项：使用break或者continue中止循环
eg：阶乘计算

<input type="button" value="求10的阶乘" onclick="getFac();" />function getFac() {  var result = 1;      for (var i = 1; i <= 10; i++) {         result *= i;         }       alert("10的阶乘为：" + result);    }

0 0