JavaScript学习(一)

学习JavaScript

当初学习JavaScript只是粗略学习,有很多知识不是很懂,这篇博客记录学习的心得与体会

学习网站:https://www.runoob.com/js

1.JavaScript简介

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

运用三目运算简化代码:一个简单的示例

<script>
function changeImage(s){
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

3.JavaScript输出

DOM 解释

您会经常看到 document.getElementById("id")

这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

格式<script>

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。

现在已经不必这样做了。

JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
脚本位置
在 <head> 或者 <body> 的JavaScript

外部脚本不能包含 <script> 标签
输出数据

window.alert() 弹出警告框。

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

innerHTML 写入到 HTML 元素。

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

输出内容

使用 document.write() 向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖

写到控制台(调试模式)

使用 console.log() 方法在浏览器中显示 JavaScript 值。

F12 启用调试模式, 在调试窗口中点击 "Console" 菜单。

4.JavaScript变量和数据类型

JS中的let变量:

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。在Function中局部变量推荐使用let变量,避免变量名冲突。

let 声明的变量只在其声明的块或子块中可用,这一点,与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

function varTest() {
    var x = 1;
    if (true) {
        var x = 2;       // 同样的变量!
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let x = 1;
    if (true) {
        let x = 2;       // 不同的变量    
        console.log(x);  // 2  
    }
    console.log(x);  // 1
}
JS中的const关键字:

const 关键字用来声明 JavaScript中的常量(与变量相对,不可修改,但同样是用于存储信息的"容器"。),常量的值不能通过重新赋值来改变,并且不能重新声明。

代码:

//定义常量a并赋值为0
const a = 0;

//报错(不能重新赋值)
a = 1;

//报错(不能重新声明)
const a = 2;

//输出0
console.log("a is: " + a);
js中数据类型

值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

引用数据类型:对象(Object)、数组(Array)、函数(Function)。

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

5JavaScript对象与函数

对象

JavaScript 对象是键值对的容器,“键”必须为字符串,“值”可以是 JavaScript 中除 null 和 undefined 以外的任意数据类型。

代码实例:

var bird = {
    "name" : "Amy",
    "age" : 1,
    "color" : "white",
    "skill" : function () {
        console.log("Fly");
    },
    "nickname" : null //非法
}

函数

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

function functionname()
{
    // 执行代码
}

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

lamp JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

代码示例:

看书:<input type="checkbox" name="checkbox" value=1><br>
写字:<input type="checkbox" name="checkbox"value=2><br>
打飞机:<input type="checkbox" name="checkbox"value=3><br>
玩游戏:<input type="checkbox" name="checkbox"value=4><br>
<input type="button" value="全选" onclick="allcheck(this)">
<script>
var checkAll = false;
function allcheck(element){
    checkAll = !checkAll;
    element.value=checkAll?"全不选":"全选";
    let inputs = document.getElementsByName('checkbox') 
    for( var index in inputs){
        inputs[index].checked = checkAll;
    }
}
</script>
posted @ 2019-08-16 16:50  一个坚果  阅读(252)  评论(0编辑  收藏  举报