JavaScript基础语法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript基础语法相关的知识,希望对你有一定的参考价值。

javascript基础语法

 

一、JavaScript的历史

JavaScriptNetScape公司推出的,最初叫LiveScript,后面才改名JavaScript

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

 

二、JavaScript的作用、运行机制

作用:

表单验证

页面动态效果

动态改变页面内容

 

运行机制:

技术分享

 

三、JavaScript的基本语法

技术分享

ECMAScript:核心语法

DOM:文档对象模型

BOM:浏览器对象模型

 

ECMAScript 描述了以下内容:

  • 语法

  • 类型

  • 语句

  • 关键字

  • 保留字

  • 运算符

  • 对象

DOM

技术分享

 

BOM

 

技术分享

 

◆语法结构:

<scripttype="text/javascript“>

    <!--

          JavaScript 语句;

    -->

</script>

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

 

案例一:

技术分享

 

 

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="弹出消息框"  onclick="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  booleantruefalse(没有双引号的)

2  number:整数或浮点数

2  objectjavascript中的对象,数组和null

 

案例:


        var age = 20.5

        var name = "xm"

        document.write(typeof age);

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

        document.write(typeof name);

 

4.运算符

技术分享

 

 

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>

 

         案例:

技术分享

<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  命名变量

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

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

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


以上是关于JavaScript基础语法的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript基础语法

JavaScript:基础语法

JavaScript基础语法整理

JavaScript基础语法

前端三剑客----->JavaScript(基础语法)

JavaScript基础语法