一、js程序写在哪里?

(1)js程序可以写在<script></script>标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    //alert:弹出警告框
    alert("Hello World!");
    //document.write:向body中写入文本
    document.write("强行写入!");
    //console.log: 向控制台输出文本。(控制台的内容需要在开发者模式中才能看到)
    console.log("这段信息是瞎写的");
    </script>
</head>
<body>

</body>
</html>

上面展示的是三种基本输出语句。

(2)将js语句写到标签的onclick属性中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('想得美')">点击获取100¥</button>
    <!-- 注意上行代码使用了两种引号 -->
</body>
</html>

(3)将js语句写到超链接的的href属性中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="javascript:alert('我 秦始皇 打钱!')">震惊!公园惊现穿着怪异男子!...</a>
</body>
</html>

但是这样写,超链接就失去了跳转的功能。

(4)写在外部文件中(重要)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="script.js" ></script>
</head>
<body>
</body>
</html>

script.js中的内容:

alert("我是外部文件的js");

script标签一旦用于引入外部文件,就不能用来编写代码了。
但可以另创建一个script标签来编写代码

js代码按照在html文件中出现的先后顺序执行。

二、基本语法

注释: 格式同c语言

语句以分号结尾。

  • 如果不写分号:
  • 浏览器也会自动添加,但这会消耗系统资源。
  • 浏览器有可能加错分号

三、变量

变量声明:

var a;
a = 123;
var b = 345;
var person = "Bill Gates",
carName = "porsche",
price = 15000;//变量声明可横跨多行

重复声明对变量没有影响。

number

最大值

大致是1.7e308
超过一定限度,就会显示infinity。

infinity

是一个字面常量。类型也是number

NaN

类型也是number,但表示“不是数字”、
比如”asd”*”dsa”返回值就是NaN

数字不要输入前导0

比如071 有可能被认为是8进制数字

字符串

1)字符串内置length属性

如:
ver str = “hello”;
alert(str.length)

2)字符串换行

末尾加个反斜杠

  • document.getElementById(“demo”).innerHTML = “Hello \
  • Kitty!”;

字符串可以是对象

var firstName = new String(“Bill”)
此时firstName是object类型

下列语句:

var str1 = “hello”;
var str2 = new String(“hello”);
str1 == str2;//返回true
str1 === str2;//返回false;
(实际上object被强制转换为string)
注意若将字符串声明为对象,容易拖慢程序运行

另外,对象之间无法比较
var str1 = new String(“hello”);
var str2 = new String(“hello”);
str1 == str2;//return false;

数组

创建方法: ver array[10] = new Array();

<script>
var i;
var cars = new Array();
cars[0] = "aaa";
cars[1] = "bbb";
cars[2] = "ccc";

for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>

输出:
aaa
bbb
ccc

变量作用域

js的全局变量与局部变量类似于c语言
不需要任何保留字声明

对象

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行:

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

有点儿像C++中的类!
实际上就是类似的东西

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<script>
var person=
{
    firstname : "John",
    lastname  : "Doe",
    id        :  5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>

</body>
</html>

两种寻址方式。
一种是类似字典的访问
一种是类似结构体的访问

动态数据类型

js支持动态数据类型

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 数据类型</h2>

<p>JavaScript 拥有动态类型。这意味着相同变量可用于保存不同类型:</p>

<p id="demo"></p>

<script>
var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>