美文网首页
js学习笔记 _01(基础)

js学习笔记 _01(基础)

作者: 郁葱的六月地木子树 | 来源:发表于2018-10-31 17:10 被阅读0次

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中

外部的js代码

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

注意外部脚本不能包含<script>标签

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

JS向页面输出类容

JavaScript 可以通过不同的方式来输出数据:

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中
一般用于测试,如果文档已经加载完成会覆盖整个文档,比如通过点击来触发这个事件那么真个文档就会被覆盖,因为点击事件是在页面加载完成后执行的

使用 innerHTML 写入到 HTML 元素。(会覆盖原有的类容)

<script>
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
</script>

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

console.log()的用处

主要是方便你调式javascript用的, 你可以看到你在页面中输出的内容。

相比alert他的优点是:

他能看到结构化的东西,如果是alert,弹出一个对象就是[object object],但是console能看到对象的内容。

console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。

Js常用数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等

var length = 16;                                  // Number 通过数字字面量赋值 
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值
函数(Function)字面量 定义一个函数:
function myFunction(a, b) { return a * b;}

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

创建数组

var arr1 = new Array('a', 'b', 'c');    //这是一个预定义的数组,在创建时初始化
var arr2 = ['a', 'b', 'c' ];       //同样是在创建时初始化,但是这种创建更为简洁直观
var arr3 = new Array( );   var arr4 = [ ];     //这两种是创建空的数组
<script>
var i;
var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
​
for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>

对象的创建和寻址方式

<script>
var person=
{
    firstname : "John",
    lastname  : "Doe",
    id        :  5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>

对象中的方法

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

Js中的字符串

Js代码的执行顺序和在在代码块中的语句的执行顺序

浏览器按照编写顺序依次执行每条语句。

代码块以左花括号开始,以右花括号结束,代码块的作用是一并地执行语句序列。

Js中的分号

在 HTML 中,JavaScript 语句向浏览器发出的命令,语句是用分号分隔:

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

<script>
a = 1;
b = 2;
c = a + b;
document.getElementById("demo1").innerHTML = c;
x = 1; y = 2; z = x + y;
document.getElementById("demo2").innerHTML = z;
</script>

Js函数

js函数声明语法

function functionname()
{
执行代码
}
或者
function functionname(parama...)
{
执行代码
}
或者
function functionname(parama...)
{
执行代码
return
}

小Demo
复选框的全选和全不选

var checkAll = false;
function allcheck(){
    checkAll = !checkAll;
    let inputs = document.getElementsByName('checkbox')
    for(var i =0;i<inputs.length;i++){inputs[i].checked = checkAll}
}

js的作用域

局部变量:在函数中通过var声明的变量。

全局变量:在函数外通过var声明的变量。

没有声明就使用的变量,默认为全局变量,不论这个变量在哪被使用

局部变量在函数执行完毕后销毁,全局变量在页面关闭后销毁。

function func(){
  undefined_var=110
}

函数内未声明即使用的变量情况:在 func() 被第一次调用之前, undefined_var 变量是不存在的即 undefined。func() 被调用过之后,undefined_var 成为全局变量。

相关文章

  • js学习笔记 _01(基础)

    JavaScript 用法 HTML 中的脚本必须位于 与 标签之间。 脚本可被放置在 HTML 页面的 ...

  • JavaScript ☞ day1

    JavaScript基础学习笔记之JavaScript基础 HTML中添加JS代码、注释方法、输出方式 docum...

  • 面向Android的快速学习JavaScript笔记(基础篇 中

    继上篇面向Android的快速学习JavaScript笔记(基础篇 上) 之后继续补全JS快速学习笔记,这篇的知识...

  • 笔记 for 基础 JavaScript

    [本系列所有代码,定义均来源网路,为个人学习JS笔记 非本人原创] 笔记 for 基础 JavaScript Ja...

  • React 属性于事件

    React.js入门基础与案例开发 by ParryKK in imooc.com 学习笔记 React stat...

  • React Router 路由

    React.js入门基础与案例开发 by ParryKK in imooc.com 学习笔记 react-rout...

  • React 组件

    React.js入门基础与案例开发 by ParryKK in imooc.com 学习笔记 React 使用 加...

  • xdh精英班Day5

    第五天学习笔记 Node.js 是运行js的编译环境 js 基础语法 变量声明,赋值语句:var。语法如下: va...

  • bunny笔记| JS基础入门到精通[02]

    上一章:bunny笔记| JS基础入门到精通[01][https://www.jianshu.com/p/1b98...

  • React 样式

    React.js入门基础与案例开发 by ParryKK in imooc.com 学习笔记 内联样式 在 ren...

网友评论

      本文标题:js学习笔记 _01(基础)

      本文链接:https://www.haomeiwen.com/subject/jxuatqtx.html