JavaScript基础

什么是JavaScript?

JavaScript是一种基于对象和事件驱动的、并具有安全性的语言脚本

 JavaScript是解释执行(边执行边解释):源代码 ----浏览器引擎

两大功能:1.表单校验

                     2.特效

 JavaScript组成

 1.核心(ECMAscript)

ECMAscript与web浏览器并没有依赖关系,web浏览器只是ECMAscript实现可能的宿主环境之一,宿主环境不仅提供ECMAscript实现,也提供该语言的扩展。其他宿主环境包括nodeJs等。ECMAscript规定了这门语言的如下组成部分:语法,类型,语句,关键字,保留字,操作符,对象。

 2.文档对象模型(DOM)

文档对象模型(DOM)提供访问和操作网页内容的方法和接口,是针对XML但经过扩展用于html的应用程序接口(API)。

 3.浏览器对象模型(BOM)

BOM提供与浏览器交互的方法和接口,是可以访问和操作浏览器窗口的浏览器对象模型。使用BOM可以控制浏览器显示的页面以外的部分。

包括浏览器窗口弹出,缩放。navigator对象,location对象(提供浏览器加载页面的详细信息),screen对象(提供用户浏览器分辨率等信息),对cookies的支持,对xmlHttpRequest的支持等。

JavaScript基本结构

<script type="text/javascript">
      JavaScript语句;
</script>

例子一:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个例子</title>
<script type="text/javascript">
  //js 中字符串    推荐使用''
  document.write('Hello,Java Script');
</script>
</head>
<body>

</body>
</html>

JavaScript执行原理

1.浏览器客户端向服务端发送请求

2.数据处理:服务器将某个包含JavaScript的页面进行处理

3.发送响应:服务器将含有JavaScript的HTML文件页面发送到浏览器客户端,浏览器客户端从上到下逐条解析HTML标签和JavaScript,并将页面效果发送给客户

如下图:

使用客户端脚本的好处是:

1.包含JavaScript的页面只要下载一次即可,这样能减少不必要的网络通信

2.JavaScript程序有浏览器客户端执行,而不是由服务器端执行,因此可以减少服务器端的压力

在网页中引用JavaScript的三种方式

1.内部JavaScript文件:

这种方式适用于JavaScript代码较少,并且网站中每个网页使用的JavaScript代码均不相同的方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部JavaScript文件</title>
<script type="text/javascript">
  document.write('Hello,Java Script');
</script>
</head>
<body>

</body>
</html>

2.外部JavaScript文件:

减少代码的冗余。

在外部文件中,编写一个以.js为扩展名的文件,将该文件指定给<script>标签中的“src”属性

outer.js文件:

alert('OK Java Script!');
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部文件</title>
<script type="text/javascript" src="outer.js"></script>

</head>
<body>
 
</body>
</html>

3.直接在HTML标签中:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML标签内</title>
<script type="text/javascript">

</script>
</head>
<body>
  <input id="btn" onclick="javascript:alert('OK!');" type="button" value="我是一个按钮,但是你点坏了不用陪"/>
</body>
</html>

JavaScript核心语法

1.声明变量和赋值

var    合法的变量名;
var with=20;

JavaScript变量名命名与java相同,但是JavaScript区分大小写。

由于JavaScript是弱语言,因此允许不声明变量而直接使用,系统会自动声明该变量

2.数据类型

undefinded类型(未定义类型):当声明变量没有初始化的时候,该变量的默认值是undefinded

null类型(空类型):表示“什么都没有”的占位符,可以用来判断·某个变量是否被赋值,null表示对一个变量赋予了一个空值

number类型(数值类型):这种类型既可以表示32位的整数,也可以表示64位的浮点数

String类型(字符串类型):1)字符串定义:一组被引号(单引号或双引号)括起来的文本     

                                                       var string =“我是只小狗狗,我吃shi”;

                                               2)字符的属性和方法

                                                        字符串对象.length;

                                                      var string =“我是只小狗狗,我吃shi”;

                                                      var strlength=string.length;

                                                    方法:  字符串对象.方法名();

方法 描述
indexOf(str,index) 查找某个指定的字符在字符串中首次出现的位置
charAt(index) 返回在指定位置的字符
toLowerCase() 把字符串转换成小写
toUpperCase() 把字符串转换成大写
substring(index1,index2) 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符
split(str) 将字符串分割成字符串数组

boolean类型(布类型):true和false

3.数组

创建数组

var 数组名称   = new Array(size)

数组赋值

1.

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

2.

var  fruit= ["apple","orange","banana"]

数组常见属性和方法

类别 名称 描述
属性 llength 设置或返回数组中的数目
方法 jjoin() 把数组中的所有元素放入一个字符串,通过分隔符进行分割
sort() 对数组排序
push() 向数组末尾添加一个或多个元素,并返回新的长度

4.运算符号

类别 y运算符号
算数运算符 +、-、*、/、%、++、--
比较运算符 >  <  >=   <=   ==   !=   ===   !==
逻辑运算符 &&    ||   !
赋值运算符 =   +=    -=

5.逻辑控制语句

选择结构

if(表达式){
       
     //JavaScript语句
     
}esle{

     //JavaScript语句
}
switch(){
   case 值1:
        //javaScript语句
     braek;
 case 值2:
        //javaScript语句
     braek;
      
    ........
    default:
        //javaScript语句

      break;

}

6.循环结构

for循环语句

for(初始化;添加;增量或减量){

         //javaScript语句
}

while循环语句:

while(条件){

      //javaScript语句
}

do-while语句

do{

   //javaScript语句



}while(条件)

for-in循环语句

for(变量  in  对象){
    //javaScript语句
}

7.注释

    //我是单行注释
   /*
     我是多行注释
    */

8.输入和输出

警告alert()

alert("提示信息")

提示prompt()

prompt("提示信息","输入框的默认信息")

9.语法约定

1)javaScript区分大小写,大写字母和小写字母是不能互相替代的

2)当声明变量、对象或函数时,名称可以包括大写字母、小写字母、数字、下划线和美元符号,但必须以字母、下划线或美元符号开头

3)javaScript允许开发者自行决定是否已=以分好结束一行代码,如果没有分号,javaScript就将行代码的结尾看做该语句的结尾

4)在js中,0,-0,null," ",false,undefined,fasle作为判定条件时,都返回false,除了这些,都返回true

原文地址:https://www.cnblogs.com/luoxionghenku/p/8669951.html