初识javascript

如何插入JS

你只需一步操作，使用<script>标签在html网页中插入javascript代码。注意，<script>标签要成对出现，并把javascript代码写在<script></script>之间。

引用js外部文件

JS在页面中的位置

放在<head>部分

最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。

放在<body>部分

Javascript代码在网页读取到该语句的时候就会执行。

注意：JavaScript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的

Javascript 认识语句和符号

JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器需要做的事情

例：<script type=”text/javascript”>

,alert(“hello”)

</script>

例子中aliert（“hello”）；就是一个javascript语句

一行的结束就被认定为语句的结束，通常在结尾加上一个分号；来表示语句的结束。

Javascript注释很重要

单行注释“//”多行注释“/*”开始以*/结束

Javascript –什么是变量

定义变量使用关键字var ，语法如下

Var 变量名

变量名可以任意取名，但一定要遵循命名规则；

1，变量必须使用字母、下划线或者$开始。

2，然后可以使用任意多个英文字母，数字，下划线或者美元符组成

3，不能使用JavaScript关键词与JavaScript保留字

变量要先声明再赋值

var mychar；

mychar = “javascript”；

var mynum=6；

变量可以重复赋值，如下：

var mychar；

mychar=“javascript”；

mychar=“hello”；

注意：

在JS中区分大小写，如变量mychar与myChar是不一样的，表示的是两个变量。

Javascript—判断语句（if …else）

语法：

if （条件）

{条件成立时执行的代码}

else

{条件不成立时执行的代码}

var myage=18;

if(myage>=18)

{document.write(“你是成年人。”);}

else

{cocumen.write(“未满18岁，你不是成年人。”);}

</script>

Javascript—什么是函数

语法：

function 函数名（）

{

函数代码；

}

说明：

1， function定义函数的关键字。

2， “函数名”你为函数取的名字。

3， “函数代码”替换为完成特定功能的代码

例：

function add2（）{

var sum = 3+2；

alert（sum）

}

add2（）

javascript—输出内容

document.write()可用于直接向html输出流写内容

第一种：输出内容用“”括起，直接输出“”号内的内容。

Document.write(“I love JavaScript!”);

</script>

第二种通过变量，输出内容

var mystr=”hello world!”;

document.write(mystr);

</script>

第三种：输出多项内容，内容之间用+号连接。

var mystr = “hello”；

document.write(mystr+”I love javascript”);

</script>

第四种：输出html标签，并起作用，标签使用“”括起来

var mystr=“hello”；

document.write(mystr+”<br>”);

document.write(“javascript”);

</script>

Javascript—警告（alert消息对话框）

语法：

alert（字符串或变量）;

javascript—确认（confirm消息对话框）

confirm消息对话框通常用于允许用户做选择的动作，如：“你对吗？”。弹出对话框（包括一个确定按钮和一个取消按钮）。

语法：

Confirm（str）；

参数说明

str：在消息对话框种要显示的文本

返回值：boolean值

返回值：

当用户点击“确定”按钮时，返回true

当用户点击“取消”按钮时，返回false

注：通过返回值可以判断用户点击了什么按钮

Javascript—提问

Prompt 弹出消息对话框，通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

语法：

Prompt（str1，str2）；

参数说明：

Str1：要显示在消息对话框种的文本，不可修改

Str2：文本框中的内容，可以修改

返回值：

1，点击确认按钮，文本框中的内容将作为函数返回值

2，点击取消按钮，将返回null

Javascript 打开新窗口

Open（）方法可以查找一个已经存在或者新建的浏览窗口

语法：

Window.open([URL],[窗口],[参数字符串])

参数说明：

URL：可选参数，在窗口中要显示网页的网址或路径

窗口名称：可选参数，被打开窗口的名称

1，该名称由字母，数字和下划线字符组成。

2， “_top”、“_blank”、“_self”具有特殊意义的名称

_blank 在新窗口显示目标网页

_self 在当前窗口显示目标网页

_top 框架网页中在上部窗口中显示目标网页

3相同name的窗口只能创建一个，要想创建多个窗口，则name不能相同

4 name不能包含空格

JavaScript关闭窗口

语法;

Window.close();

ECMAScript和JavaScript的关系

1996年11月，javascript的创造者NETscape公司，决定将javascript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JAVASCRIPT语言制定的，但是没有称其为javascript，有两个方面的原因。一是商标，javascript本身已被netscape注册为商标。二是想体现这门语言的制定者是ECMA，而不是netscape，这样有利于保证这门语言的开发性和中立性。

因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

ECMAscript的历史

1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3/4	添加正则表达式，添加try/catch
2009	ECMAScript 5	添加strict mode严格模式，加Jason
2011	ECMAScript 5.1	版本更新
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符，array includes

注：ES6就是指ACMAScript6

核心（ECMAScript）

文档对象模型（DOM）Document object model（整合js css html）

浏览器对象模型（BOM）broswer object model（整合js和浏览器）

保留字列表：

Abstract Boolean byte char class const debugger double enum export extends final float

Goto implements import int interface long native package protected public short static super

Aynchrnized throws transient volatile

Javascript数据类型

数值（number）

JavaScript不区分整型和浮点型，就只有一种数字类型

Var a =12.34

ParseInt（‘123’）

字符串（string）

常用方法

方法	说明
.length #不加括号的是属性	返回长度
.trim() #得到一个新值	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n) #n类似索引，从0开始，超过最大值返回''空字符串	返回第n个字符
.concat(value, ...) #s1='hello';s.concat('xx');得到helloxx	拼接
.indexOf(substring, start) #这个start是从索引几开始找，没有返回-1	子序列位置
.substring(from, to) #不支持复数，所以一般都不用它，了解一下就行了	根据索引获取序列
.slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它	切片
.toLowerCase() #全部变小写	小写
.toUpperCase() #全部变大写	大写
.split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数	分割

String.slice(start,stop)和string.substring(string,stop):

两者的相同点：

如果start等于end，返回空字符串

如果stop参数省略，则取到字符串末

如果某个参数超过string的长度，这个参数会被替换为string的长度

Substring（）的特点：

如果 start > stop ,start 和stop 将被交换

如果参数是负数或者不是数字，将会被0替换

Slice（）的特点：

如果start>stop 不会交换两者

如果start小于0，则切割从字符串末尾往前数的第abs（start）个字符开始

如果stop小于0，则切割在从字符串末尾往前数的第abs（stop）个字符结束

补充：ES6中引入了模板字符串。Chorme 支持es6

布尔值（Boolean）

区别于python，true 和false都是小写

Var a = true；

Var b = false；

Null 和nudefined

null 表示值是空，一般在需要指定或清空一个变量时才会使用

undefined 表四声明一个变量但未初始化时，该变量的默认值时undefined。还有就是函数无明确的返回值时，返回的也是undefined

null表示变量的值时空，undefined则表示只声明了变量，但还没有赋值

对象object

JavaScript中的所有事物都是对象：字符串、数值、数组、函数。。。此外，JavaScript允许自定义对象

JavaScript提供多个内建对象，比如string、date array等等

对象只是带有属性和方法的特殊数据类型

数组

数组对象的作用是：使用单独的变量名来储存一系列的值。

Var a = [123,”ABC”]

Console.log(a[1]) 输出ABC

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse() #在原数组上改的	反转
.join(seq)#a1.join('+')，seq是连接符	将数组元素连接成字符串
.concat(val, ...) #连个数组合并	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

关于sort（）需要注意：

如果调用该方法没有使用参数，将按照字母顺序对数组中的元素进行排序

改进方法：

Function sortNumber（a，b）{

Return a-b

}

Var arr1 = {11，100，22，55，33，44}

Arr1.sort（sortNumber）

Splice（）

语法

Splice（index ，howmany，item）

Index 必需，规定从何处添加/删除元素，该参数是开始插入和删除的数组元素的下标，必须是数字

Howmany：必需。规定应该删除多少元素。必须是数字，但是可以是“0”.

如果未规定此参数，则删除从index 开始到原数组结尾的所有元素

Item1.。。itemx 可选，要添加到数组的新元素

自定义对象

Var ol = {‘name’：‘哇嘎’，‘age’：‘18’}

类型查询

Typeof

运算符

算数运算符

+ - * % ++ -- i++ 是i自动加1，i—是i自减1

比较运算符

>= <= != == === !=

逻辑运算符

&& || ！ and or 非

赋值运算符

= += -= *= /= #n += 1其实就是n = n + 1

if-else

var a = 10;

if (a
> 5){ console.log("yes"); }

else { console.log("no"); }

if-else if-else #多条件

var a = 10;

if (a
> 5){ console.log("a > 5"); }

else if (a
< 5)

{ console.log("a
< 5"); }

else { console.log("a = 5"); }

switch 切换

var day = new Date().getDay(); //示例化一个今天的日期对象，getDay()是获取天数的编号，0表示星期日 switch (day) { //这里day这个参数必须是一个值或者是一个能够得到一个值的算式才行，这个值和后面写的case后面的值逐个比较，满足其中一个就执行case对应的下面的语句，然后break，如果没有加break，还会继续往下判断 case 0: //如果day是0 console.log("Sunday"); //执行它 break; //然后break跳出 case 1: console.log("Monday"); break; default: //如果没有任何满足条件的，就执行它 console.log("...") }

　for

for (var
i=0;i<10;i++) { //就这么个写法，声明一个变量，变量小于10，变量每次循环自增1，for(;;){console.log(i)}；这种写法就是个死循环，会一直循环，直到你的浏览器崩了，就不工作了，回头可以拿别人的电脑试试~~
console.log(i); }

while

var i = 0;

while (i
< 10)

{ console.log(i); i++; }

三元运算

a = x if x>y else y