学习JavaScript

js引入方式

1. 内部脚本

内部脚本:将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间
  • 在HTML文档中,可以在任意地方,放置任意数量的<script>
  • 一般会把脚本置于<body>元素的底部,可改善显示速度

弹出一个警告窗口

<script>

    alert("Hello JavaScript")

</script>

2. 外部脚本

将JS代码定义在外部JS文件中,然后引入到HTML页面中

外部JS文件中,只包含JS代码,不包含<script>标签

????<script>标签不能自闭合

<script src="01.js"></script>

js基础语法

1. 输出语句

//输出语句
//方式一 弹出警告框
window.alert("hello");

//方式二 写入HTML中
document.write("world");

//方式三 输出在控制台
console.log("yeyeye");

html文件:
<script src="01.js"></script>

【运行结果】

2. 变量

//var是全局变量、可以重复定义
var a = 1;
var b = '1';
var c = "aaa";
console.log(a);     console.log(b);     console.log(c);

a = 3.14;
console.log(a);

【运行结果】

//const常量
const $dollar = 666;
$dollar = 66;
alert(dollar);

var a;
alert(typeof(a)); //undefined

alert(typeof(null)); //object

【运行结果】 

常量不可被修改

3. 数据类型

注意与其他语言不同的是:有==和===

== 只比较值,=== 既比较值又比较类型

//== 只比较值,=== 既比较值又比较类型
var a;
a = 10;
alert(a === "10"); //false
alert(a == "10"); //true 发生类型转换
alert(typeof(a)); 

js函数

//定义一个函数 不需要写返回类型
function sum(a, b){
    return a+b;
}
alert(sum(1, 2.5)); //result = 3.5
alert(sum(1, "1")); //result = 11
alert(sum(NaN, 2)); //result = NaN
alert(sum(undefined, 2)); //result = NaN

js对象

Array对象

//定义数组,中括号
var arr = [1, 2, 3, 4];
arr[10] = 50;
for(let i=0; i<arr.length; i++)
{
    console.log(arr[i]); //打印到控制台
}

【运行结果】

forEach方法:仅遍历有值的元素

//forEach: 遍历数组中有值的元素
arr.forEach(function (e) {
    console.log(e);
});

arr.forEach(element => {
    console.log(element);
});

两种效果一样 

【运行结果】

push添加 & splice删除

var arr = [1, 2, 3, 4];
arr.push(6, 7, 8);
console.log(arr);
arr.splice(0, 3); //删除1,2,3
console.log(arr);

【运行结果】

String字符串 思春

//创建字符串
var str = "hello world";
console.log(str.length); //length
console.log(str.charAt(1)); //charAt()是函数用()
console.log(str.indexOf("wo")); //indexOf返回"wo"位置index=6
var str1 = str.trim();  //trim
console.log(str1); 
console.log(str.substring(0,5)); //substring截取子串

【运行结果】

JSON对象 

自定义对象:

//json对象
var student = {
    name: "Bob",
    age: 18,
    gender: "male",
    eat(){
        alert("吃饭");
    }
}
//调用
console.log(student.name);
student.eat();

【运行结果】

JSON字符串对象: 

//创建JSON字符串对象
var jsonStr = '{"name": "Marry", "age": 18}';
var object = JSON.parse(jsonStr); //JSON字符串对象转js对象
alert(object.age);
alert(JSON.stringify(object)); //js对象转JSON字符串对象

【运行结果】

BOM对象:

警告框和对话框 

//BOM
window.alert(111); //弹出警告框
alert(111);

var flag = confirm("吃饭了吗"); //弹出对话框
alert(flag);

【运行结果】

点确定=true,取消=false

两个定时器:

//定时器
var i = 0;
setInterval(function(){
    i++;
    console.log("执行" + i + "次");
}, 2000) //每2秒执行1次

【运行结果】周期性执行

var i = 0;
//仅执行一次的定时器
setTimeout(() => {
    i++;
    console.log("执行" + i + "次");
}, 2000);

【运行结果】

location地址栏对象

//location地址栏对象
location.href = "https://www.baidu.com"; //点确定跳转百度
alert(location.href);

【运行结果】

DOM对象

js事件监听

上一篇:无锡卓瓷X哲讯智能科技,SAP项目正式启动!


下一篇:The First项目报告:探索Yield Guild Games运行机制与发展潜力