网页制作12-html,css,javascript初认识のJavascipt脚本基础

发布于:2025-03-16 ⋅ 阅读:(18) ⋅ 点赞:(0)

 一、JavaScript的三种基本使用方法:body|head|外部

网页效果:

运行代码:

.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<script>
function n1(){
	document.getElementById("ama01").innerHTML="NO.3这是head中的 JavaScript 函数";
}
</script>
</head>

<body>
	<script>
	 document.write("NO.1 HELLO WORLD")//Document要小写
		</script>
	
	<p>NO.2  这是body中的JavaScript函数</p>
    <button onclick="myFunction()">NO.2 Click me</button>
    <p id="ama"></p>
<script>
function myFunction(){
	var x="";
	var time=new Date().getHours();
	if (time<20){
		x="Good day";
    }
	document.getElementById("ama").innerHTML=x;
}
	</script>
	<p id="ama01"></p>
	<button type="button" onclick="n1()">NO.3 Click me</button>
	<p>NO.4 n4保存在名为"n4.js"的外部文件中</p>
	<p id="ama04"></p>
	<button type="button" onclick="n4()"> NO.4 Click me</button>
	
	<script src="n4Script.js"></script>
</body>
</html>

.n4Script.js

// JavaScript Document
function n4()
{
    document.getElementById("ama04").innerHTML="NO.4 this is my 外部JavaScript";
}

二、 JavaScript的基本语法

1、写法

1)代码

document.getElementById("ama01").innerHTML=" The first one"; document.getElementById("ama02").innerHTML=" The second one";

2)代码块

function myFunction()
{
    document.getElementById("ama01").innerHTML="  The first one";
    document.getElementById("ama02").innerHTML=" The second one";
}

3)多余的空格会忽略 

4)反斜杠对代码行进行换行

5)//单行注释,/*多行注释*/

6)赋值:文本类型用双引号,数字类型不加双引号

2、输出显示语句

1)window.alert() 弹出警告框。
<body>
	<h1>window.alert() 弹出警告框</h1>
<script>
window.alert("window.alert()");
</script>
</body>

2)document.write() 将内容写到 HTML 文档中。

3)innerHTML 写入到 HTML 元素。

上文代码已展示,此处略过……

4)console.log() 写入到浏览器的控制台。

</script>
<script>
a = 1;
b = 1;
c = a + b;
console.log(c);
</script>

1、数据类型(用typeof,可以判断数据类型)

1)值类型(基本类型)

a.字符串(String):用在单引号或者双引号

b.数字(Number):数字number:整数,小数,科学计数(123e5)

c.布尔(Boolean):两种状态true or false

d.空(Null)

e.未定义(Undefined)

f.Symbol:是 ES6 引入了一种新的原始数据类型,表示独一无二的值。

2)引用数据类型(对象类型)

对象(Object):定义一个对象{a:"a1",b:"b1",c:300}

数组(Array):定义一个数组[1,2,3,9]

函数(Function):定义一个函数,前面已举例,略过

正则(RegExp):正则表达式通常用于检查和替代 : search() 和 replace();

日期(Date):当前日期时间

<script>
	var a="hellow world";//字符串
	var b=1;//数字
	var c=true;//布尔型
	let d=null;//空值
	var e;//未定义
	var f=Symbol('unique');
	var alph=new Array("a","b","c");//创建数组;
	var g={a:"a1",b:"b1", c:5566};//创建对象;
	var h=Date();
	var str="OH,happy new year";
		var j=str.search(/happy/i);//正则表达式搜索
			

	a1=typeof a;
	b1=typeof b;
	c1=typeof c;
	d1=Object.is(d,null);
	e1=typeof e;
    f1=typeof f;
	
	document.write(a1+"</br>",b1+"<br>",c1+"<br>",d1+"<br>",e1+"<br>",f1+"<br>",alph+"<br>",g.c+"<br>",h+"<br>",j+"<br>");
	
</script>

2、常量

  1. )整型常量:可以使用16进制八进制和十进制表示其值

  2. )实型常量:由整数部分加小数部分表示

  3. )布尔值:

  4. )字符型常量:用单引号或者双引号或起来的一个或几个字符

  5. )空值:null

3、变量:它主要作为数据的存储容器,最好对其进行声明

命名所注意的点:

  1. )只能由字母数字和下划线组成, Besides不能有空格或其他符号

  2. )不能使用JavaScript中的关键字

    NUM. grammer  DESCRIPTION
    1 boolean 布尔值
    2 break 退出当前循环或标签语句
    3 byte 字节
    4 case 在switch语句中定义一个分支。
    5 catch 定义在try语句块执行时,一旦发生错误,就执行的代码块。
    6 char 字符类型
    7 class
    8 const 声明一个只读的常量。
    9 continue 跳过当前循环的剩余部分,立即进行下一次循环。
    10 debugger 设置断点,方便调试代码
    11 default 在switch语句中定义默认分支。当条件不存在时使用该项
    12 delete 删除了一个属性
    13 do 与while一起使用,创建一个至少执行一次的循环。
    14 double 双精度浮点型
    15 else 与if语句一起使用,定义一个条件为假时执行的代码块。
    16 enum 枚举
    17 export 可以输出一个模块可以是变量或者方法
    18 extends 用来创建一个普通类或者内建对象的子类
    19 final 修饰用的关键词
    20 finally try-catch-finally 语句是一种用于处理异常的结构,finally 关键字可以用于 finally 块中,用于定义一些必须执行的代码
    21 float 解析一个字符串并返回一个浮点值
    22 for 创建一个循环,包含初始化表达式、条件表达式和增量表达式。
    23 function 函数
    24 goto 无条件转移语句
    25 if 根据指定的条件执行代码块
    26 implements 实现相应接口的方法
    27 import 导入另一个模块
    28 in 判断某个属性是否属于某个对象。
    29 instanceof 判断一个对象是否是某个类的实例。
    30 int 整型
    31 interface 将一个数值向下取整
    32 let 声明一个块作用域的局部变量。
    33 long 长整形数据
    34 native Native关键字用于声明一个方法是由本地代码(通常是C或C++)实现的
    35 new 创建一个新对象
    36 null 空值
    37 package 属性是Java解释器所知道的所有包的根
    38 private @ Private标签标记标识符为私有
    39 protected 创建使用程序函数
    40 public 全局变量
    41 ract React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)
    42 return 从函数返回一个值。
    43 short 短整型
    44 static 静态变量和类变量
    45 super 终于调用父类
    46 switch 根据不同的条件执行不同的代码块。
    47 synchronized 实例对象锁
    48 this  指向调用该方法的对象。
    49 throw 抛出一个异常。
    50 throws 将异常抛给调用者可以使程序能够继续执行下去
    51 transient 一种持久化对象实例的机制
    52 try 定义一个测试块,以测试代码块的错误
    53 typeof 检测变量的数据类型。
    54 var 赋值一个变量
    55 void 执行一个表达式并返回undefined。空 / 声明没有返回值
    56 volatile 作为指令关键字确保本条指令不会因编译器的优化而,且要求每次直接读值
    57 while 当循环
    58 with 设置代码在特定对象中的作用域
    59 FALSE 不符合
    60 TRUE 符合
  3. )最好把变量意义与其代表意思对应