JavaScript基础语法_将}插入到完整statement-CSDN博客

本文链接：https://blog.csdn.net/u010512964/article/details/72511481

1、JavaScript简介

1.1、JavaScript的出现

JavaScript与Java不同，JavaScript早期的主要目的是处理一些用户的输入验证操作，没有JavaScript之前，所有数据都是提交到网站后台来进行检测，速度慢用户体验不好，所以出现了JavaScript脚本语言。

1.2、JavaScript的功能

JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
javascript运行必须依赖于宿主环境语言，即页面语言HTML。JavaScript是解释型的语言，解释型：不需要编译，解释器程序会每读取一条语句就执行。运行速度慢，浏览器中默认内置了javascript的解释器程序。
常见的脚本语言：
ECMASCRIPT主要进行所有脚本语言的标准制定。

JavaScript
JScript
VBScript
ActionScript

JavaScript是基于对象和事件的脚本语言

一个完整的JavaScript由以下三个部分组成

ECMAScript
DOM(全称Document Object Model，即文档对象模型)
BOM(全称 Browser Object Model，浏览器对象模型)

1.3、JavaScript特点

安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。
跨平台性。（只要是可以解释Js的浏览器都可以执行，和平台无关。）

2、JavaScript基本语法

2.1 语法

2.1.1 引入方法

向HTML页面插入JavaScript的主要方法，就是使用标签对<script>．．．</script>。有两种使用方法：

直接在HTML中嵌入JavaScript代码，在标签对<script>．．．</script>中写JavaScript代码
1. 使用script标签的src属性引入一个js文件。（方便后期维护，扩展）
  例：<script src="test.js" type="text/javascript"></script>

2.1.2 注意

页面上可以有多个<script>标签
<script>标签按顺序执行
<script>标签可以出现在任意的页面位置
<script>标签一定要写</script>关闭，而不能<script/>这样关闭。否则没有任何错误信息，但是没有运行结果。
区分大小写

2.1.3 注释

单行注释以双斜杠开头（//）
多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）

2.1.4 常用函数

window.alert() 或写为 alert() ：显示一个提示框显示内容。
window.document.write() ：在网页的当前位置处写内容。

2.2 JavaScript数据类型

基本类型：number，string，boolean
变量是弱类型的，与 Java不同，ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值。因此，可以随时改变变量所存数据的类型（尽量避免这样做）

例如：


<script type="text/javascript" >
    var color = "red";
    var num = 25;
    var visible = true;
    // 尽量避免这样做
    var message = "hello";
    message = 100;
</script>

2.2.1 typeof操作符

ECMASCRIPT 中有4种基本数据类型: Undefined, Boolean,Number和String
关键字typeof可以获取一个变量的类型。

<script type="text/javascript" >
    var a = 100;
    var b = 3.14;
    var c = true;
    var d = 'a';
    var e = "hello";
    document.write( typeof a + "<br/>");
    document.write( typeof b + "<br/>");
    document.write( typeof c + "<br/>");
    document.write( typeof d + "<br/>");
    document.write( typeof e + "<br/>");
    document.write( typeof f + "<br/>");    
</script>

类型的总结：

所有的数值都是number类型
字符和字符串都是string类型
布尔是boolean类型
如果一个变量没有初始化值的时候，其类型为undefined类型

2.3 流程控制语句

2.3.1 判断

if (condition) statement1 else statement2

判断的条件会发生自动类型转换：

number：如果非0为true，0为false
string：如果非null或非空为true，否则为false
undefined：false
NaN: false
对象类型：非null为true，否则为false。

2.3.2 选择

switch 语句的语法：

switch (expression)
  case value: statement;
    break;
...
  default: statement;

ECMAScript 和 Java 中的 switch 语句有两点不同。在 ECMAScript 中，switch 语句可以用于字符串，而且能用不是常量的值说明情况

var color = "xx";
var value1 = "red", value2 = "green";
switch(color) {
    case value1:
        alert("红色");
        break;
    case value2:
        alert("绿色");
        break;
    default:
        alert("执行默认default");
}

var num = 20;
switch(true) {
    case num >= 0 && num <= 10:
        alert("大于0小于等于10");
        break;
    case num>10&&num<=20:
        alert("大于10小于等于20");
        break;
}

2.3.3 循环

while循环

while (expression) statement

do while循环

do {statement} while (expression);

for 语句

iCount = 6;
for (var i = 0; i < iCount; i++) {
  alert(i);
}

for in 用于枚举对象的属性或者遍历一个数组的元素

for (property in expression) statement

2.3.4 With语句

有了 With 语句，在存取对象属性和方法时就不用重复指定参考对象

with(obj){
    操作obj的属性语句;
}

<script type="text/javascript">
          with(document){
             write("您好 !");
             write("<br>这个文档的标题是 : \"" + title + "\".");
             write("<br>这个文档的 URL 是: " + URL);
             write("<br>现在您不用每次都写出 document 对象的前缀了 !");
          }
</script>

2.4 JavaScript函数

JS中有三种定义函数的方式
1、正常方式：function mysum(num1,num2){return num1+num2;}

function mysum(num1,num2){
        return num1 + num2;
    }
var myresult = mysum(100,200);
alert("myresult="+myresult);

2、构造器方式：new Function("num1","num2","return num1+num2;")

var youresult = new Function("num1","num2","return num1+num2");
alert( youresult(1000,2000) );

3、直接量或匿名或无名方式：var mysum = function(num1,num2){return num1+num2;}

var theyresult = function(num1,num2){
        return num1 + num2; 
     }
alert( theyresult(10000,20000) );

2.5 JS中有四种对象

2.5.1 内置对象：Date，Math，String，Array

Date对象

var str = new Date().toLocaleString();
window.document.write("<font size='44' color='red'>"+str+"</font>");

String对象

常见的方法：
Anchor（） 生产锚点
Blink（）   为元素添加blink标签 
charAt()    返回指定索引位置处的字符。
charCodeAt() 回一个整数，代表指定位置上字符的 Unicode 编码。
Concat()    回字符串值，该值包含了两个或更多个提供的字符串的连接。
Fontcolor()  把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端
indexOf()    返回 String 对象内第一次出现子字符串的字符位置
italics()    把 HTML <I> 标记放置在 String 对象中的文本两端。 
Link()         把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
Replace()      返回根据正则表达式进行文字替换后的字符串的复制
Split()        切割   
Substr()       截取子串
toUpperCase()  转大写
toLowerCase    转小写

document.write("第五章".anchor("ch1"));
document.write("第五章".charAt(0));
document.write("第五章".fontcolor("#ff0000"));

Array对象

var arrs=new Array()；//不指定长度
var arrs=new Array(20);//指定长度
var arrs=new Array("hello");//会创建一个元素的数组
var arrs=["aa","bb","cc"];//创建一个包含3个字符串的数组

// 遍历数组
for(var i = 0; i < arr.length; i++){
    alert(arr[i]);
}   
for( var i in arr ){
    // i 是遍历出的数组中的索引，从0开始，一直到最大索引。
    // 如果有其他属性，也会遍历出来，其实索引就是数组对象的属性。
    alert(arr[i]);
}

//下标越界时：
var arr = ["aa", "bb"];
document.write(arr[200]);
// 显示undefined

2.5.2 自定义对象（两种方式）

function Student(id,name,sal){
    //this指向s引用
    this.id = id;
    this.name = name;
    this.sal = sal;
}
var s = new Student(1,"abc",7000);
document.write("编号:" + s.id + "<br/>");

/*
 * 自定义对象Object方式
 *
 *  */
var person = new Object();
person.name = "jack";
person.age = 28;
person.sayHello = function() {
    document.write(this.name + ":" + this.age);
}
person.sayHello();

2.5.3 浏览器对象： window，document，status，location，history

2.5.4 ActiveX对象　

2.6 prototype

“prototype”字面翻译是“原型”，是javascript实现继承的主要手段。prototype是javascript中的函数(function)的一个保留属性，并且它的值是一个对象

Prototype注意的细节：

prototype是函数(function)的一个必备属性(书面一点的说法是”保留属性”)(只要是function,就一定有一个prototype属性)
prototype的值是一个对象
可以任意修改函数的prototype属性的值。
一个对象会自动拥有这个对象的构造函数的prototype的成员属性和方法。
例：如果我们想给Array数组对象添加一个方法

    <script type="text/javascript">
        var arr = new Array(1,2,3,4,5,6);

        Array.prototype.getMax = function(){
            var max = this[0];
            for(var index=1;index<this.length;index++){
                if(max<this[index]){
                    max = this[index];
                }
            }

            return max;
        }


        window.document.write("最大值："+arr.getMax());

        window.alert(arr.getMax());

    </script>