JavaScript快速入门
- 前端
- 2023-01-22
因为需要使用JS,所以想快速入门。。。
因为之前学过Python,C++,Java等几种语言,所以这篇快速入门并不适合纯初学者,请见谅。
JavaScript主要有两种用法:
嵌在网页中,使用<script>和</script>包起来,可以放置在<head> 部分或<body>部分。单独使用一个js文件。注意,JS如果要操作html的元素,其元素必须在JS代码之前。要点
JavaScript 有多种数据类型:数字,字符串,数组,对象等等.变量是用于存储信息的"容器"。Undefined 这个值表示变量不含有值。JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。下面是一些代码示例,主要展示嵌html的JS代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo" > First </p>
<button id="fbi">Hello</button>
<button id="haha">changetime</button>
<script>
function multiply(a,b){
return a * b;
}
function LoadTime(){
return document.getElementById("demo").innerHTML = Date();
}
var print = new Function("a" , "b" , "return a*b;");//函数是个对象,通过这种方式定义一个新的函数。函数是对象。但是在 JavaScript 中,很多时候,你需要避免使用new关键字。
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");//写信息
window.alert("warning FBI!");//弹出警告框来显示数据
document.getElementById("demo").innerHTML = "HAHA!";//使用 document.getElementById(id) 方法从 JavaScript 访问某个 HTML 元素
document.write(Date());//使用 document.write() 方法将内容写到 HTML 文档中,如果文档加载完成,内容会被覆盖。
console.log("Hello World!");//写入到浏览器的控制台
document.getElementById("demo").innerHTML = "3 *4 = " + multiply(3,4);//更改id为demo的值
var ab = 10;
var ab;//如果重新声明 JavaScript 变量,该变量的值不会丢失。
document.getElementById("demo").innerHTML = "ab = " + ab;//更改id为demo的值
var str = "String";
var str = 123456789;
window.alert(str);//输出警告信息
str = null;//可以通过将变量的值设置为 null 来清空变量。
LOOP:
{
for (let i=0;i<10;i++){//在 ES6 中,提供了 let 关键字和 const 关键字。let 的声明方式与 var 相同,用 let 来代替 var 来声明变量,就可以把变量限制在当前代码块中。
document.write(i + "<br>");
if (i == 6) break;//退出LOOP所标记的代码段。
}
}
document.write(typeof "");
document.write(Date().constructor);//输出构造函数
document.write("<br>");
var ten = "10";//JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。
var ten = + ten;//转化为数字,Operator +可用于将变量转换为数字。
document.write(typeof ten);//输出变量类型
document.write( "<br>" + "123456789".search("56") );//检索
document.write( "<br>" + "123456789".replace(/56/i , "ab") );//正则表达式
var text = JSON.parse( { "example":"123" } );//解析JSON
document.write("<br>" + text);
document.write( "<br>" + print(8,9) );//自动转换类型。
for (var i = 0; i<100;i++){
document.write("<br>");//输出换行符
}
host();//提升
function host(){
document.write("<br>" + "hosting");
}
( function () { document.write( "<br>" + "匿名函数" ) } )();//匿名函数
document.write( typeof host + " " + host.toString() );//输出函数原始代码
function sum(){
var s = 0 ;
for (var i=0;i<arguments.length;i++){
s += arguments[i];
}
return s;
}
document.write( "<br> sum = " + ( sum(1,2,3,4,5,6,7,8,9) ) );//参数过多,使用数罪
function non(){
return this;
}
1 === 2 ? 1 : 2;//Javascript三目运算(三元运算) 语句。
//document.wriet( "<br>" + non );
demo = 10
var demo;//在 JavaScript 中,可以在使用变量之后对其进行声明。换句话说,可以在声明变量之前使用它。
var obj = {
x : 123 ,
xgb : function(){
document.write("<br>---------------obj-------------------<br>");
}
}
obj.xgb();//对象的方法
document.getElementById("haha").onclick = function () {LoadTime()};//添加事件
document.getElementById("fbi").addEventListener("click" , function(){alert("Hello world!")});//添加事件
</script>
<button onclick = "LoadTime()">Time</button>
<a href="javascript:void(0);">点我没有反应的!</a>void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。
<a href="#top">点我定位到指定位置!</a>
<br><br><br> <p id="pos">尾部定位点</p>
</body>
</html>
另外代码有些乱,之后有时间可能会整理,抱歉。