javascrpt基础入门
JavaScript 是一门脚本语言,同HTML语言一样,需要浏览器或者JavaScript解释器,解释执行。
1. 第一个JavaScript程序:
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
<script>,</script>是一对HTML标签,用于在HTML文档中引入JavaScript,这里type属性,指定了语言为JavaScript。这是写JavaScript的一种方式。
做一个简单的讲解:
1) JavaScript语句后不一定要接分号,比如:
document.write("Hello World"),也可以加分号,这符合大多数程序员的习惯,不过如果一行有多个语句的时候,一定要加分号。也就是JavaScript可以通过行和分号来区分不同的语句。
2) 面向对象(有些书籍认为JavaScript是基于对象的)
可以通过 object.method() 来调用某对象的方法。上面的document就是一个对象,他有一个write方法,用于输出字符到HTML文档上,注意,我们不能通过document.write("\n")来在HTML文档中产生一个换行,而需要document.write("<br />")。document.wirte() 是很有用的,比如我们可以使用它来动态生成一个表格。
2. <script>标签的位置,我们知道每一个HTML标签都会有一个和一些对应的放置位置。<script>也是。
1) <script>放置在<head></head>间,页面载入的时候不会被运行,但是可以被调用。运行将从调用开始处运行,到</script>标签结束。
2) <script>放置在<body></body>间,页面载入的时候被运行。
3) <script>放置在<head></head>外,页面载入的时候被运行,但是通常我们不把<script>标签写在其他不应该写的地方,虽然,主流的浏览器都支持这样的做法。
3. 访问外部脚本
另外一种写JavaScript的方式,就是把JavaScript代码保存在一个文本文件中,然后用<script>标签导入。比如:
<script src="xxx.js">
</script>
表示,我们现在有一个xxx.js的文件,里面保存的是JavaScript代码,通过这样的方式可以导入xxx.js文件中的JavaScript代码。
现在开始介绍JavaScript:
1) 变量
JavaScript是大小写敏感的。所以变量是区分大小写的,这个和HTML语言不一样,另外和java一样,JavaScript变量名字要使用字母或者是下划线开头。我们进行程序设计的时候,无须指定变量类型,申明变量用关键字 var,比如:
var str
str = "hello"
或者这样定义
var str = "hello"
甚至可以: str = "hello" 来直接定义一个变量。
2) 变量的作用域
变量的作用域从变量的声明或者定义开始,到本个块结构结束为止,比如
{ var hi
..
}
// 这里hi变量被销毁。
因此,我们可以在所有的块之外定义全局变量。
3) 常量
十六进制数: 0x11(0x开头的数)
十进制数:11(正常书写方式)
八进制数:011(0开头的数)
true : 表示真
false : 表示假
null :表示一个变量没有指向任何对象
undefined :表示方法没有返回值,或者变量没有被声明或定义
NaN :表示不是一个数字
4) 控制语句(大多同于java)
a. if ... elseif (condition1)
语法:
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and
condition2 are not true
}
b. switch
switch(n)
{
case 1:
execute code block 1
break
case 2:
execute code block 2
break
default:
code to be executed if n is
different from case 1 and 2
}
5) 运算符(本图表源于 http://www.w3schools.com/js/js_operators.asp)
Arithmetic Operators
Operator Description Example Result
+ Addition x=2
y=2
x+y 4
- Subtraction x=5
y=2
x-y 3
* Multiplication x=5
y=4
x*y 20
/ Division 15/5
5/2 3
2.5
% Modulus (division remainder) 5%2
10%8
10%2 1
2
0
++ Increment x=5
x++ x=6
-- Decrement x=5
x-- x=4
Assignment Operators
Operator Example Is The Same As
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
Comparison Operators
Operator Description Example
== is equal to 5==8 returns false
=== is equal to (checks for both value and type) x=5
y="5"
x==y returns true
x===y returns false
!= is not equal 5!=8 returns true
> is greater than 5>8 returns false
< is less than 5<8 returns true
>= is greater than or equal to 5>=8 returns false
<= is less than or equal to 5<=8 returns true
Logical Operators
Operator Description Example
&& and x=6
y=3
(x < 10 && y > 1) returns true
|| or x=6
y=3
(x==5 || y==5) returns false
! not x=6
y=3
!(x==y) returns true
*字符串时候相等,用"==="或者"=="都可以,这不同于其他的语言。
注意,不要小看上面的运算符号,他们关系极其复杂,比如:
a = "1"
a -= 1
alert(a); // 结果是0
但是 a= "1"
a += 1
alert(a); // 结果是11
再比如:
a = true
a -= 1
alert(a) // 结果是0
另外还有:
"1" != 1 // 结果是false
为了搞清这错综复杂的关系,必须先了解一个东西:JavaScript中任何类型之间都可以相互转换。显示的使用:
a) Number() // 转化成为数,这里的数包括整数和浮点数
b) Boolean() // 转化成为boolean值
c) String() // 转化成为字符串
d) Object() // 转化成为
这3个方法,可以接受任意类型的参数,甚至是一个对象。上面的"1" + 1的操作,实际上进行的类型的隐式转换,跟详细的说就是,隐式的使用了Number(),Boolean(),String(),Object()来进行类型的转化。
这里对转化做一个总结:
转化前 转化后
非0 true
0 false
true 1
false 0
"123"或"123.2"这类的字符串 123或123.2这类的数字
123或123.2这类的数字 "123"或"123.2"这类的字符串
true "true"
false "false"
如何非空字符串 true
"" false
null false
NaN false
undefined false
非空对象 true
转化是一个问题,当使用运算符还有一个问题就是向谁转化的问题,比如:
"false" == false
假如这里是隐式的把"false"字符串转化成为boolean类型,那么就是 true == false 结果为 false;假如这里是隐式的把 false转化成为字符串 "false" 这里就是 "false"=="false",结果为 true。因此如何转化是个问题。我们先看看下面的例子:
alert(false=="false"); // 结果为false,也就是把字符串转化成了boolean值
a = false + "1";
alert(a); // 结果为"false1",也就是把boolean值转化成为了字符串
这是一个头痛的问题,因为他们转化尽然没有统一的标准,而会因为不同的运算符号而不同!
有一种办法就是,尽量避免运算符号的隐式转换,每次使用前,用String(),Number(),Boolean()进行转化,尽量使得运算符两边类型一样。因此,我们必须熟悉上表中各个类型的转化规则。
6) 对象到基本类型的转化
在讲到对象之前,就开始这个话题,显然有些不明智,读者可以先了解JavaScript对象之后,再来了解这个问题。
前面一个表格的最后一行:非空对象转化成为true,也就是说明了,对象到boolean类型的转化过程,这是比较简单的。
a) 对象到数字
调用对象的valueOf()方法,假如没有得到数字,就调用对象的toString()方法,然后传递给Number()。
b) 对象到字符串
调用对象的toString()方法。
1) 循环语句:
a) for
for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}
for有另外一个用法,先看一个例子:
for(var cur in window){
document.write(cur+"<br />");
}
运行一下就可以看到效果了,那这个是什么意思?就是列出对象window里面的所有属性(properties),更加详细的定义是:
for in 语句可以迭代一个对象的所有属性名或者一个数组中的所有元素(得到数组的下标)。
b) while
while (var<=endvalue)
{
code to be executed
}
c) do ... while
do
{
code to be executed
}
while (var<=endvalue)
2) JavaScript中的方法:
function functionname(var1,var2,...,varX)
{
some code
}
使用关键字 function 定义一个方法。使用 return 返回一个值。例如:
function f(n){
if(n <= 1)
return 1;
return f(n-1)*n;
}
调用方法,使用方法名和参数进行调用,比如 f(10)
参数列表是很有趣的,我们看一个方法:
function maxNum(){
max = arguments[0];
for(i=1;i<arguments.length;i++){
if(max < arguments[i])
max = arguments[i]
}
return max
}
document.write(maxNum(4,3,5))
结果输出了5。这说明了,方法可以接受超过参数列表中参数数量的参数。使用arguments.length得到实际输入的参数的数量,使用arguments[i]得到第i个参数。
3) 常用的方法:
alert("hi"); // 对话框
eval("..."); // 把参数当作JavaScript代码来运行。
parseInt("123"); // 把参数转化成为整数
parseFloat("123.123") // 把参数转化成为浮点数
例如:
eval("alert('hi')");
eval("(1+3)*4"); // 注意 (1+3)*4 也是JavaScript代码。
这里parseInt和parseFloat可以解析"abc123"这类的字符串,但是使用Number()无法解析含有非数字字符的字符串,比如:
parseInt("abc123"); // 得到123
Number("abc123"); // 得到NaN
现在你可以进入更深的层次学习JavaScript了。
javascrpt基础入门的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 「译」JUnit 5 系列:基础入门
原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...
- .NET正则表达式基础入门
这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...
- 从零3D基础入门XNA 4.0(2)——模型和BasicEffect
[题外话] 上一篇文章介绍了3D开发基础与XNA开发程序的整体结构,以及使用Model类的Draw方法将模型绘制到屏幕上.本文接着上一篇文章继续,介绍XNA中模型的结构.BasicEffect的使用以 ...
- 从零3D基础入门XNA 4.0(1)——3D开发基础
[题外话] 最近要做一个3D动画演示的程序,由于比较熟悉C#语言,再加上XNA对模型的支持比较好,故选择了XNA平台.不过从网上找到很多XNA的入门文章,发现大都需要一些3D基础,而我之前并没有接触过 ...
- Shell编程菜鸟基础入门笔记
Shell编程基础入门 1.shell格式:例 shell脚本开发习惯 1.指定解释器 #!/bin/bash 2.脚本开头加版权等信息如:#DATE:时间,#author(作者)#mail: ...
- [Spring框架]Spring AOP基础入门总结二:Spring基于AspectJ的AOP的开发.
前言: 在上一篇中: [Spring框架]Spring AOP基础入门总结一. 中 我们已经知道了一个Spring AOP程序是如何开发的, 在这里呢我们将基于AspectJ来进行AOP 的总结和学习 ...
- [Spring框架]Spring AOP基础入门总结一.
前言:前面已经有两篇文章讲了Spring IOC/DI 以及 使用xml和注解两种方法开发的案例, 下面就来梳理一下Spring的另一核心AOP. 一, 什么是AOP 在软件业,AOP为Aspect ...
- RobotFramework - 基础入门
Robot Framework Wiki HomePage Robot Framework User Guide Robot Framework documentation Robot Framewo ...
随机推荐
- leedcode_贪心算法系列
861. 翻转矩阵后的得分 思路: 行首的权值最大,故首先将其置1; 每列由于权值相同,故只需要将0多于1的情况反转即可 763. 划分字母区间 思路: 1.计算每个字母的最右边界下标,并记录到新数组 ...
- STL进阶--相等 vs 等价 (Equality vs Equivalence)
相等性 vs 等价性 问题: 以下两个find的结果分别指向什么? class Lsb_less { public: bool operator()(int x, int y) { return (x ...
- python学习疑问
1.(已解决) test = [1, 2, 3, 4] ", id(test)) def func(a): ", id(a)) a = a.remove(1) ", id ...
- dfs常见的配置文件中的value与description(重要)
不多说,直接上干货! name value description dfs.namenode.logging.level info The logging level for dfs namenode ...
- 廖雪峰Java3异常处理-1错误处理-2捕获异常
1捕获异常 1.1 finally语句保证有无错误都会执行 try{...}catch (){...}finally{...} 使用try...catch捕获异常 可能发生异常的语句放在try{... ...
- golang 常量的用法
1.Golang常量的用法 //常量的用法 var num int num =9 //1.常量声明的时候必须赋值 const tax int = 0 //2.常量值是无法修改的 //tax = 10 ...
- 本地IP,掩码,网关,DNS设置
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- ElasticSearch索引
简介 索引是具有相同结构的文档集合.在Elasticsearch中索引是个非常重要的内容,对Elasticsearch的大部分操作都是基于索引来完成的.同时索引可以类比关系型数据库Mysql中的数据库 ...
- Elasticsearch的JavaAPI
获取客户端对象 public class App { private TransportClient client; //获取客户端对象 @Before public void getClinet() ...
- 大数据Web可视化分析系统开发
下载地址 https://tomcat.apache.org/download-70.cgi 打开我们的idea 这些的话都可以按照自己的需求来修改 在这里新建包 新建一个java类 package ...