JavaScript初探 一（认识JavaScript）
JavaScript初探 一（认识JavaScript）
JavaScript 初探
JavaScript插入HTML中
内嵌的Js代码
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> JS </title>
<script type="text/javascript">
// Js代码区域
</script>
</head>
</html>在HTML中，利用< Script >标签可以将js代码嵌入在HTML语句中，在< Script >标签中，会执行标签中的Js程序。
外嵌的Js代码
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> JS </title>
<!--内嵌的JS-->
<script type="text/javascript">
// Js代码区域
</script>
<!-- 外部引入的js -->
<script type="text/javascript" src="js/index.js">
</script>
</head>
</html>代码 11~12 行的外部引入js是从当前文件的绝对路径下引入的；这里引入的js文件是独立以 *.js 文件存在的js文件，可以被任意的引入。
JavaScript的输出
显示方案
window.alert() //写入警告框
document.write() //写入HTML输入
innerHTML // 写入HTML元素
console.log() // 写入浏览器控制台innerHTML
- 访问HTML元素，JavaScript可以使用document.getElementById(id)
id：属性定义HTML元素 innerHTML属性定义HTML内容
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> javascript </title>
</head>
<body>
<h1>Hello,world!</h1>
<p id="demo"></p>
<script>
document.getElementById("id").innerHTML = 5+6;
</script>
</body>
</html>document.wriet()
- 出于测试目的化，使用 document.wriet()
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> javascript </title>
</head>
<body>
<h1>Hello,world!</h1>
<script>
document.write(5+6);
</script>
</body>
</html>
window.alert()
- 警告框显示数据
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> javascript </title>
</head>
<body>
<h1>Hello,world!</h1>
<script>
window.alert(5+6);
</script>
</body>
</html>
console.log()
- 在浏览器中的F12控制台中可以看见 console.log()的显示数据
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> javascript </title>
</head>
<body>
<h1>Hello,world!</h1>
<script>
console.log(5+6);
</script>
</body>
</html>
JavaScript 语句
- 构成
值、运算符、表达式、关键词、注释等
- 告诉浏览器在id=“demo”的HTML元素中输出“Hello，World！”
document.getElementById("demo").innerHTML = "Hello,World!"；大多数Js程序都包含许多Js语句，这些语句会被 按顺序的逐一被浏览器执行。
- 语句结束（；）
JavaScript的每一条语句，以分号作为结束标志。 ps：每一行，可以写多条js语句
- JavaScript代码块
js语句可以使用 花括号 {……} 组合在代码块中 代码块的作用就是定义 同一时刻执行的语句。
function myFunction() { //JavaScript函数
document.getElementById("demo").innerHTML = "Hello World.";
document.getElementById("myDiv").innerHTML = "How are you ?";
}JavaScript关键字
关键字 | 描述 |
|---|---|
break | 终止循环或结束当前结构体 |
continue | 跳出循环并从顶端（起点）开始 |
debugger | 停止执行JavaScript，并调用调试函数 |
do … while | 执行语句块，并在满足条件的时候重复执行代码块 |
for | 标记需要被执行的语句块，只要条件为真（true） |
function | 声明函数 |
if … else | 表姐需要被执行的语句块，根据某个满足的条件 |
return | 退出函数 |
switch | 标记需要被执行的语句块，根据不同的条件 |
try … catch | 异常处理 |
var | 声明变量 |
JavaScript 语法
JavaScript语法是一套规则
- JavaScript 值
JavaScript语句定义两种类型的值：混合值和变量值：
- 混合值就是字面量
- 变量值就是变量
- JavaScript字面量
15.90
10011写数值有无小数点均可
字符串是文本，由双引号或单引号括起来：
"Bill Gates"
'Bill Gates'- JavaScript变量
JavaScript 使用 var关键字声明变量； = 符号等同于变量 赋值
// 本例中，x被定义为变量；x被赋值7。
var x ;
x = 7 ;- JavaScript运算符
JavaScript 算数运算符 （+ - * /）来计算值
( 7 + 8 ) * 10JavaScript 赋值运算符 （=）向变量赋值
var x , y ;
var x = 7 ;
var y = 8 ;- JavaScript表达式
表达式是 值、变量和运算符组合，计算的结果是值
- JavaScript关键字
JavaScript关键字 var 告知浏览器创建一个新的变量
- JavaScript标识符
标识符是名称 在Js中，标识符用于命名变量、关键字、函数、标签等 在Js中，首字符必须是字母、下划线或者美元符号
- JavaScript 大小写敏感
- JavaScript 数据类型
JavaScript变量可存放数值，比如 100，以及文本值，比如“Bill Gates”。 js中，文本值被称为 字符串 JavaScript可处理多种数据类型（目前只关注 数值和字符串值） 字符串包围在双引号或单引号中；数值不用引号。 ps：数值放在引号内，会被认为文本字符串。 |-- 字符串之间可以用 + 符号来连接多个字符串
JavaScript 运算符
运算符 | 描述 |
|---|---|
+ | 加法 |
- | 减法 |
乘法 | |
/ | 除法 |
% | 系数 |
** | 取幂 |
++ | 自加 |
-- | 自减 |
= | 赋值 x = y |
+= | x = x + y |
-= | x = x - y |
*= | x = x * y |
/= | x = x / y |
%= | x = x % y |
== | 等于 |
=== | 等值等型（数据和类型都相等） |
！= | 不等于 |
！== | 不等值不等型 |
> | 大于 |
< | 小于 |
>= | 大于等于 |
<= | 小于等于 |
？ ： | 三元运算符 |
&& | 逻辑与 |
|| | 逻辑或 |
！ | 逻辑非 |
typeof | 返回变量的类型 |
instanceof | 如果对象是实例，返回true |
& | 与 |
| | 或 |
~ | 非 |
^ | 异或 |
<< | 零填充左位移 |
>> | 有符号右位移 |
>>> | 零填充右位移 |
JavaScript数据类型
- 分类： JavaScript分：数值、字符串、数组、对象等多种数据类型。
var length = 7 ; //数值
var lastName = "Gates"; //字符串
var cars = ["Porsche","Volvo","BMW"]; //数组
var x = {firstName:"Bill",lastName:"Gates"}; //对象- 动态类型
JavaScript拥有动态类型，每次变量被赋予不同类型的数据类型，变量就会被改变数据类型。
JavaScript 布尔值
- 布尔值只有两个值：true 或 false
var x = true ;
var y = false ;JavaScript 数组
- Js数组用方括号书写，数组项目由逗号分隔
var cars = ["Porsche","Volvo","BMW"] ;JavaScript 对象
- Js对象用花括号书写，对象属性是 name:value 键值对，由逗号分隔。
var person = {firsName:"Bill",lastName:"Gates",age:62,eyeColor:"blue"} ;typeof 运算符
- 可以使用JavaScript的 typeof 来确定JavaScript的变量类型；
typeof运算符返回变量或表达式的类型
typeof "" //返回 String
typeof "bill" //返回 String
typeof 110 //返回 number
var person ;
person = undefined ; // 任何的变量设置为undefined 都可以对变量进行清空，变量类型也就变成了undefined
//ps：空值和 undefined不是一回事，空值是有类型的。NULL
在JavaScript中，null是“nothing"。被看做不存在的事物。 但js中，NULL的数据类型是对象。 可以把NULL看做是一个js的bug 可以通过设置值是 null 清空对象。
var person = null ; // 值是null，但是类型仍然是对象。 同样可以通过设置值是 undefined 清空对象
var person = undefined ; //值是undefined，类型是undefined- Undefined 与 Null 的区别
undefined 与 null 的值相等，但是类型是不同的。
原始数据
- 原始数据是一种没有额外属性和方法的单一简单数据值。
- typeof 运算符可以返回以下原始类型之一：
- String（字符串）
- number（数值）
- boolan（布尔值）
- undefined
复杂数据
- typeof返回以下以下复杂两个类型：
- function （函数类型）
- object
typeof 运算符把对象、数组或null返回 object typeof 运算符不会把函数返回 object ps：因为JavaScript中数组即是对象，所以 typeof [数组] 返回为”object“
JavaScript 函数
- 定义： JavaScript 函数是被设计为执行特定任务的代码块 JavaScript 函数会在某代码调用它的时候被执行
function myFunction (p1 , p2) {
return p1 * P2 ;
}- 函数语法： JavaScript 函数通过 function 关键字进行定义，其后是函数名和括号。
function name(参数1，参数2，参数3) {
JavaScript代码 ；
}- 函数调用： 当事件发生的时候（用户点击） 当JavaScript代码调用时 自动（程序内调用）
- 函数返回： 当JavaScript到达 return 语句，函数将会停止执行。
var x = myFunction(4,5);
function myFunction(a,b){
return a * b ;
}- 运算符调用函数： toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数返回的结果。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> javascript </title>
</head>
<body>
<h1>Hello,world!</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = toCelsius(88);
function toCelsius (f) {
return (5/9) * (f-32) ;
}
</script>
</body>
</html>
- 局部变量：
JavaScript函数中声明的变量，会成为函数的局部变量！ 即：只会在函数{}内生效！
function myFunction(){
var carName = "Volvo" ;
} JavaScript 对象
PS： 所有对象的调用均可调用（结果赋值）给一个标识符使用。
数据类型声明new对象！
var x = new String () ;
var y = new Number () ;
var z = new Boolean() ; 我们要避免出现以上的声明现象哦！
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> javascript </title>
</head>
<body>
<h1>Hello,world!</h1>
<p id="demo"></p>
<p id="demo1"></p>
<script>
var person = { // 对象定义
firstName : "Bill" ,
lastName : "Gates" ,
age : 999 ,
eyeColor : "Blue" ,
fullName : function() {
return this.firstName + " " + this.lastName ;
}
};
document.getElementById("demo").innerHTML=person.lastName; //访问对象中的lastName属性值
document.getElementById("demo1").innerHTML=person.fullName();
</script>
</body>
</html>腾讯云开发者
