JavaScript基础语法

 

一、JavaScript的历史

JavaScript是NetScape公司推出的，最初叫LiveScript，后面才改名JavaScript。

微软推出了基于IE浏览器的Jscript                           

 

二、JavaScript的作用、运行机制

作用:

表单验证

页面动态效果

动态改变页面内容

 

运行机制:

wKiom1gIwiaDHiNgAAEtnfbdCd0495.png

 

三、JavaScript的基本语法

wKiom1gIwjSDrmWJAAAwAl4t6r8078.png

ECMAScript:核心语法

DOM:文档对象模型

BOM:浏览器对象模型

 

ECMAScript 描述了以下内容：

  • 语法

  • 类型

  • 语句

  • 关键字

  • 保留字

  • 运算符

  • 对象

DOM

wKiom1gIwkKiBAUGAABGm8sZXEs400.png

 

BOM

 

wKioL1gIwk-Q3USLAAA3lDrUWRc373.png

 

◆语法结构:

<scripttype="text/javascript“>

    <!--

          JavaScript 语句;

    -->

</script>

说明:<!--  -->是为了兼容老版本不支持JavaScript脚本的浏览器

 

案例一:

wKiom1gIwlzgkOADAAAdy5jSuNk808.png

 

 

◆JavaScript三种使用方式

1.内部JavaScript

<script type="text/javascript“>

   <!--

         JavaScript 语句;

   -->

</script >

 

2.外部JavaScript

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

3.行内JavaScript

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

 

 

 

 

◆核心语法

1.注释

<html>

<head>

<title>第一个JavaScript程序</title>

</head>

<body>

<script type="text/javascript">

//单行注释

/*

多行注释

多行注释

*/

document.write("Hello world");

</script>

</body>

</html>

 

2.变量

JavaScript是弱类型的语言，定义时不需要直接指定变量的类型，统一使用var。

 

案例一:先声明，再赋值

var age,name;

age = 10;

name = “xm”

案例二:声明同时赋值

var age = 10;

var name=”xm”;

案例三:不声明，直接赋值

age = 10;

name = “xm”

 

3.数据类型

数值型             

字符型             

布尔型             

null空值

undefined未定义

 

3  typeof运算符返回值如下：

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

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

2  boolean：true或false(没有双引号的)

2  number：整数或浮点数

2  object：javascript中的对象，数组和null

 

案例:


        var age = 20.5

        var name = "xm"

        document.write(typeof age);

        document.write("<br/>");

        document.write(typeof name);

 

4.运算符

wKiom1gIwmmzbtv2AAAk2PvZ2C4290.png

 

 

5.逻辑控制
         顺序结构

         分支结构:

                  if…else…

                  switch

         循环结构

                  while

                  do…while

                  for

 

         循环中断

                  break：结束整个循环

                  continue: 跳过当前这一次循环

 

6.输入输出

3  alert():js弹出提示信息。

alert(“提示信息”);

3  prompt()：提示信息，并获得输入的值。

prompt(“提示信息”, “输入框种的默认值”);

prompt(“请输入姓名”, “张三”);

prompt(“请输入姓名”);

 

3  confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

          

<script type="text/javascript">

var x = confirm("是否清空购物车?");

if(x){

alert("购物车已清空，请重新选择商品!");

}else{

alert("请付款!");

}

</script>

 

         案例:

wKiom1gIwnXwVQcAAAEp14tXSTw574.png

<html>

<head>

<script type="text/javascript">

var a = prompt("请输入你第一个数:");

var b = prompt("请输入你第二个数:");

var oper = prompt("请输入运算符:","eg: +  -  *  /");

a = Number(a);

b = Number(b);

if(oper=="+"){

var sum = a+b;

alert(a+"+"+b+"="+sum);

}else if(oper=="-"){

var sum = a-b;

alert(a+"-"+b+"="+sum);

}else if(oper=="*"){

var sum = a*b;

alert(a+"*"+b+"="+sum);

}else if(oper=="/"){

var sum = a/b;

alert(a+"/"+b+"="+sum);

}

</script>

</head>

<body>

</body>

</html>


 

7.语法约定

3  代码区分大小写

3  每一行可以没有分号，但是建议统一带上

3  命名变量

变量名需要遵守两条简单的规则：

·        第一个字符必须是字母、下划线（_）或美元符号（$）

·        余下的字符可以是下划线、美元符号或任何字母或数字字符