如何插入JSjavascript
你只需一步操做,使用<script>标签在html网页中插入javascript代码。注意,<script>标签要成对出现,并把javascript代码写在<script></script>之间。css
<script type=”text/javascript”>表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。html
引用js外部文件java
<script src=”script.js”></script>python
JS在页面中的位置es6
放在<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
{条件不成立时执行的代码}
<script type=”text/javascript”>
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输出流写内容
第一种:输出内容用“”括起,直接输出“”号内的内容。
<script type=”text/javascript”>
Document.write(“I love JavaScript!”);
</script>
第二种经过变量,输出内容
<script type=”text/javascript”>
var mystr=”hello world!”;
document.write(mystr);
</script>
第三种:输出多项内容,内容之间用+号链接。
<script type=”text/javascript”>
var mystr = “hello”;
document.write(mystr+”I love javascript”);
</script>
第四种:输出html标签,并起做用,标签使用“”括起来
<script type=”text/javascript”>
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