JavaScript基本语法、函数

目录

一、JavaScript简介

1、JavaScript特点

2、JavaScript的组成

3、引用JavaScript的方式

二、JavaScript核心语法

1、变量

2、数据类型

3、typeof运算符

4、String对象

5、数组

6、运算符号

7、逻辑控制语句

8、跳转语句

9、注释

10、常用的输入/输出

11、函数

12、事件

一、JavaScript简介

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Script是脚本的意思)、

脚本语言∶不需要编译，运行过程中由js解释器(js引擎)逐行来进行解释并执行

现在也可以基于Node.js技术进行服务器端编程

浏览器执行JS简介

浏览器分成两部分︰渲染引擎和JS引擎

渲染引擎︰用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit

J引擎︰也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览

器的V8。

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行

代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为

脚本语言，会逐行解释执行。

1、JavaScript特点

向HTML页面中添加交互行为

脚本语言，语法和Java类似

解释性语言，边执行边解释

2、JavaScript的组成

1、ECMAScript

ECMAScript是由ECMA国际（原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。

ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

2、DOM———文档对象模型

文档对象模型( Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

3、BOM——浏览器对象模型

BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JavaScript的执行原理

1、浏览器发送请求（包含JavaScript的请求页面）到服务器

2、浏览器解析HTML标签和JavaScript

3、服务器相应浏览器发送的请求（从服务器端下载含JavaScript的页面）

3、引用JavaScript的方式

1、行内样式

语法：

<input name="btn" type="button" value="弹出消息框"   
   onclick="javascript:alert('欢迎你');"/>

注意：

1、可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如:onclick·注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号

2、可读性差，在html中编写JS大量代码时，不方便阅读;

3、引号易错，引号多层嵌套匹配时，非常容易弄混;

4、特殊情况下使用

2、内嵌式：使用script标签

语法：

<script>
alert ( 'Helloworld~! ' );
</script>

可以将行JS代码写到<script>标签中；内嵌JS是学习时常用的方式

3、外部js文件

语法：

<script src=“js/export.js"  type="text/javascript"></script>

1、利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用

2、引用外部JS文件的script标签中间不可以写代码

3、适合于S代码量比较大的情况

二、JavaScript核心语法

1、变量

先声明变量再赋值

var  width;
width = 5;

同时声明和赋值变量

var catName= "皮皮";
var x, y, z = 10;

不声明直接赋值，不推荐使用

width = 5;

2、数据类型

3、typeof运算符

typeof运算符的作用：返回一个用来表示表达式的数据类型的字符串

typeof运算符的返回值如下

undefined：变量被声明后，但未被赋值

string：用单引号或双引号来声明的字符串

boolean：true或false

number：整数或浮点数

object：javascript中的对象、数组和null

4、String对象

String 对象用于处理文本（字符串）

语法：

var str1=“this is a String Object”;  //声明方式1
var str2=new String(“熟悉的配方”);     //声明方式2

 String 对象的常用属性

String对象的常用方法

5、数组

创建数组

语法：

var  数组名称 = new Array(size);

 为数组元素赋值

语法：

var fruit= new Array("apple", "orange", " peach","banana");

 数组的常用属性和方法

6、运算符号

7、逻辑控制语句

if条件语句

if（条件）{
    js代码;
}else{
    js代码;  
}

switch语句

switch（表达式）{
    case 常量1：
        js语句
        brcak；
    case 常量2：
        js语句
        brcak；
    default：
        js语句；
}

for、while循环

for（初始化;条件;增量）{
    js代码;
}

while（）{
    js代码;
}

for-in语句

var fruit = ["apple","orange","peach","banana"];
for(var i in fruit){
    document.write(fruit[i] + "<br/>")
}

8、跳转语句

break语法：

<script type="text/javascript">
    var i=0;
    for(i=0;i<=5;i++){
	    if(i==3){
             break;
           }
      document.write("这个数字是："+i+"<br/>");
}
</script>

continue语法：

<script type="text/javascript">
    var i=0;
    for(i=0;i<=5;i++){
	    if(i==3){
            continue;
       }
      document.write("这个数字是："+i+"<br/>");
}
</script>

9、注释

单行注释：以 // 开始

alert("恭喜你！注册会员成功"); //在页同上弹出注册会员成功的提示框

多行注释：/* 开始，以 */ 结束

/*
使用for循环运行“document.write("<h3>Hello World</h3>");”5次
使用document.write在页面上输出“Hello World” 
*/

10、常用的输入/输出

alert()

alert("提示信息");

prompt()

prompt("提示信息", "输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色","");

语法约定

1、代码区分大小写

2、变量、对象和函数的名称

3、分号

11、函数

类似于Java中的方法，是完成特定任务的代码语句块

 使用更简单：不用定义属于某个类，直接使用

函数分类：系统函数和自定义函数

常用系统函数

parseInt (“字符串”)：将字符串转换为整型数字

如: parseInt (“86”)将字符串“86“转换为整型值86

parseFloat(“字符串”)：将字符串转换为浮点型数字

如: parseFloat(“34.45”)将字符串“34.45“转换为浮点值34.45

isNaN()：用于检查其参数是否是非数字

自定义函数

语法：

function 函数名(参数1.参数2.....){
     //JavaScript语句
     [return 返回值](可有可无)
}

调用函数

语法：

事件名＝ "函数名( )" ;

12、事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。