CS262 Building a Web Browser hw and code

Author: lishuhuakai

CS262_Building_A_Web_Browser/JS/__init__.py

@@ -0,0 +1,176 @@
+# Wes Weimer
+#
+# This allows students with minimal knowledge to produce pretty pictures of
+# HTML webpages.
+#
+import sys
+import subprocess
+import os
+
+# If you want the output filenames to be different (e.g., based on
+# environment variables), just change them here.
+output_latex_filename = "./student"
+
+# If you want to put the static images elsewhere, just change this.
+image_directory = "images/"     # make "" for current directory
+
+# The example image output requires these packages:
+#
+#       pdflatex        (aka "pdftex")
+#       imagemagick     (for "convert")
+#       ghostscript     (called by "convert")
+
+outfile = None
+logfile = None
+
+import base64
+import json
+import sys
+
+
+def word(x):
+        global outfile
+        for i in range(len(x)):
+          if x[i] == '_':
+            outfile.write("\_")
+          elif x[i] != '\\':
+            outfile.write(x[i])
+        outfile.write (" ")
+
+def warning(x):
+        global outfile
+        outfile.write("{\\color{red}{\\bf{" + x + "}}}")
+
+closetags = []
+
+def pushclosing(x):
+        global closetags
+        closetags = [x] + closetags
+def begintag(tag,args):
+        global outfile
+        global logfile
+        tag = tag.lower()
+        # need "IMG"
+        logfile.write("TAG + " + tag + "\n")
+        if tag == "a":
+                if "href" in args:
+                        target = args["href"]
+                        outfile.write("\\href{" + target + "}{\\underline{")
+                        pushclosing("}}")
+                else:
+                        warning("invalid 'a' tag: no 'href' argument")
+                        pushclosing("")
+        elif tag == "img":
+                if "src" in args:
+                        target = args["src"]
+                        filename = image_directory + target
+                        if os.path.isfile(filename):
+                          if "height" in args and "width" in args:
+                            h = args["height"]
+                            w = args["width"]
+                            outfile.write("\\includegraphics[height=" + h + "px, width=" + w + "px]{" + filename + "}")
+                            pushclosing("")
+                          else:
+                            outfile.write("\\includegraphics{" + filename + "}")
+                            pushclosing("")
+                        else:
+                          warning("'img' " + target + " not found (predefined local images only, sorry)")
+                          pushclosing("")
+                else:
+                        warning("invalid 'img' tag: no 'src' argument")
+                        pushclosing("")
+        elif tag == "b" or tag == "strong":
+                outfile.write("\\textbf{")
+                pushclosing("}")
+        elif tag == "ul":
+                outfile.write("\\begin{itemize}")
+                pushclosing("\\end{itemize}")
+        elif tag == "ol":
+                outfile.write("\\begin{enumerate}")
+                pushclosing("\\end{enumerate}")
+        elif tag == "li":
+                outfile.write("\\item{")
+                pushclosing("}")
+        elif tag == "big":
+                outfile.write("{\\Large ")
+                pushclosing("}")
+        elif tag == "tt" or tag == "code":
+                outfile.write("{\\tt ")
+                pushclosing("}")
+        elif tag == "small":
+                outfile.write("{\\footnotesize ")
+                pushclosing("}")
+        elif tag == "i" or tag == "em":
+                outfile.write("\\emph{")
+                pushclosing("}")
+        elif tag == "hr":
+                outfile.write("{\\begin{center} \\line(1,0){400} \\end{center}}")
+                pushclosing("")
+        elif tag == "h1":
+                outfile.write("\\section*{")
+                pushclosing("}")
+        elif tag == "h2":
+                outfile.write("\\subsection*{")
+                pushclosing("}")
+        elif tag == "h3":
+                outfile.write("\\subsubsection*{")
+                pushclosing("}")
+        elif tag == "p" or tag == "br":
+                outfile.write("\n~\n\n\\noindent ")
+                pushclosing("\n")
+        else:
+                pushclosing("")
+
+def endtag():
+        global outfile
+        global logfile
+        global closetags
+        if closetags == []:
+                raise IndexError
+        tag = closetags[0]
+        closetags = closetags[1:]
+        logfile.write("TAG -\n")
+        outfile.write(tag)
+
+def initialize():
+        global outfile
+        global logfile
+        global output_latex_filename
+        outfile = open(output_latex_filename + ".tex",'w+')
+        logfile = open(output_latex_filename + ".taglog",'w+')
+        outfile.write("""
+\\documentclass{article}
+\\usepackage{fullpage}
+\\usepackage{hyperref}
+\\hypersetup{
+  colorlinks,%
+    citecolor=blue,%
+    filecolor=blue,%
+    linkcolor=blue,%
+    urlcolor=blue
+}
+\\usepackage{graphicx}
+\\usepackage{color}
+\\usepackage{url}
+\\usepackage{geometry}
+\\pagestyle{empty}
+\\begin{document}
+\\mag 1440
+""")
+
+def finalize():
+        global outfile
+        global logfile
+        logfile.close()
+        outfile.write("""
+\\end{document}
+""")
+        #print "Writing TEX Output: " + output_latex_filename + ".tex"
+        outfile.close()
+        #print "Rendering PDF Graphics: " + output_latex_filename + ".pdf"
+        cmd = "pdflatex " + output_latex_filename + ".tex > /dev/null < /dev/null"
+        subprocess.call(cmd,shell=True)
+        #print "Rendering PNG Graphics: " + output_latex_filename + ".png"
+        cmd = "convert " + output_latex_filename + ".pdf " + \
+                output_latex_filename + ".png"
+        subprocess.call(cmd,shell=True)

CS262_Building_A_Web_Browser/JS/graphics.py

@@ -0,0 +1,86 @@
+# Wes Weimer
+#
+# This is a grammar definition file for a simple subset of HTML with
+# embedded JavaScript.
+#
+
+import ply.yacc as yacc
+from JS.jstokens import tokens
+
+start = 'html'
+
+tag_stack = [] # for error reporting
+
+def p_html(p):
+        'html : element html'
+        p[0] = [p[1]] + p[2]
+def p_html_empty(p):
+        'html : '
+        p[0] = [ ]
+
+def p_element_word(p):
+        'element : WORD'
+        p[0] = ('word-element',p[1])
+
+def p_element_word_eq(p):
+        'element : EQUAL'
+        p[0] = ('word-element',p[1])
+
+def p_element_word_string(p):
+        'element : STRING'
+        p[0] = ('word-element',"``" + p[1] + "''")
+
+def p_tagname(p):
+        'tagname : WORD'
+        global tag_stack
+        tag_stack = [(p[1],p.lineno(1))] + tag_stack
+        p[0] = p[1]
+
+def p_tagnameend(p):
+        'tagnameend : WORD'
+        global tag_stack
+        if (tag_stack[0])[0] != p[1]:
+                print("HTML Syntax Error: <" + tag_stack[0][0] + "> on line " + str(tag_stack[0][1]) + " closed by </" + str(p[1]) + "> on line " + str(p.lineno(1)))
+                exit(1)
+        tag_stack = tag_stack[1:]
+        p[0] = p[1]
+
+def p_element_tag_empty(p):
+        # <br />
+        'element : LANGLE tagname tag_arguments SLASHRANGLE'
+        global tag_stack
+        tag_stack = tag_stack[1:]
+        p[0] = ('tag-element',p[2],p[3],[],p[2])
+
+def p_element_tag(p):
+        # <span color=red>Important text!</span>
+        'element : LANGLE tagname tag_arguments RANGLE html LANGLESLASH tagnameend RANGLE'
+        p[0] = ('tag-element',p[2],p[3],p[5],p[7])
+
+def p_tag_arguments(p):
+        'tag_arguments : tag_argument tag_arguments'
+        p[0] = dict(p[1].items() + p[2].items())
+
+def p_tag_arguments_empty(p):
+        'tag_arguments : '
+        p[0] = { }
+
+def p_tag_argument_word(p):
+        'tag_argument : WORD EQUAL WORD'
+        p[0] = { p[1].lower() : p[3] }
+
+def p_tag_argument_string(p):
+        'tag_argument : WORD EQUAL STRING'
+        p[0] = { p[1].lower() : p[3] }
+
+def p_element_javascript(p):
+        'element : JAVASCRIPT'
+        p[0] = ("javascript-element",p[1])
+
+def p_error(t):
+        if tag_stack[0] != []:
+                print("HTML Syntax Error: <" + tag_stack[0][0] + "> on line " + str(tag_stack[0][1]) + " never closed")
+        else:
+                tok = yacc.token()
+                print("HTML Syntax Error: Near Token " + str(tok))
+        exit(1)

CS262_Building_A_Web_Browser/JS/htmlgrammar.py

@@ -0,0 +1,23 @@
+from JS import graphics
+
+def interpret(trees): # Hello, Friend
+    for tree in trees: # Hello
+        # ("word-element", "Hello,")
+        nodetype = tree[0] # "word-element"
+        if nodetype == "word-element":
+            graphics.word(tree[1])
+        elif nodetype == "tag-element":
+            # <b>Strong text!</b>
+            tagname = tree[1] # b
+            tagargs = tree[2] # []
+            subtrees = tree[3] # ...Strong text!...
+            closetagname = tree[4] # b
+            # QUIZ: (1) check that the tags match!
+            # if not, use graphics.warning()
+            # (2) interpret the subtree!
+            if tagname != closetagname:
+                graphics.warning("not equal")
+            graphics.begintag(tagname, tagargs)
+            interpret(subtrees)
+            graphics.endtag()
+

CS262_Building_A_Web_Browser/JS/htmlinterp.py

@@ -0,0 +1,94 @@
+# Wes Weimer
+#
+# This is a set of regular expressions defining a lexer for HTML with
+# embedded JavaScript fragments.
+#
+
+import ply.lex as lex
+
+tokens = (
+        'LANGLE',       # <
+        'LANGLESLASH',  # </
+        'RANGLE',       # >
+        'SLASHRANGLE',  # />
+        'EQUAL',        # =
+        'STRING',       # "144"
+        'WORD',         # 'Welcome' in "Welcome to my webpage."
+        'JAVASCRIPT',   # embedded JavaScript Fragment
+)
+
+states = (
+        ('javascript', 'exclusive'),    # <script type="text/javascript">
+        ('htmlcomment', 'exclusive'),   # <!--
+)
+
+def t_htmlcomment(t):
+        r'<!--'
+        t.lexer.begin('htmlcomment')
+
+def t_htmlcomment_end(t):
+        r'-->'
+        t.lexer.lineno += t.value.count('\n')
+        t.lexer.begin('INITIAL')
+        pass
+
+def t_htmlcomment_error(t):
+        t.lexer.skip(1)
+
+def t_javascript(token):
+        r'\<script\ type=\"text\/javascript\"\>'
+        token.lexer.code_start = token.lexer.lexpos
+        token.lexer.level = 1
+        token.lexer.begin('javascript')
+
+def t_javascript_end(t):
+        r'</script>'
+        t.value = t.lexer.lexdata[t.lexer.code_start:t.lexer.lexpos-9]
+        t.type = "JAVASCRIPT"
+        t.lexer.lineno += t.value.count('\n')
+        t.lexer.begin('INITIAL')
+        return t
+
+def t_javascript_error(t):
+        t.lexer.skip(1)
+
+def t_LANGLESLASH(t):
+        r'</'
+        return t
+
+def t_LANGLE(t):
+        r'<'
+        return t
+
+def t_SLASHRANGLE(t):
+        r'/>'
+        return t
+
+def t_RANGLE(t):
+        r'>'
+        return t
+
+def t_EQUAL(t):
+        r'='
+        return t
+
+def t_STRING(t):
+        r'(?:"[^"]*"|\'[^\']*\')'
+        t.value = t.value[1:-1] # drop "surrounding quotes"
+        return t
+
+def t_WORD(t):
+        r'[^ \t\v\r\n<>=]+'
+        return t
+
+t_ignore                = ' \t\v\r'
+t_htmlcomment_ignore    = ' \t\v\r'
+t_javascript_ignore     = ' \t\v\r'
+
+def t_newline(t):
+        r'\n'
+        t.lexer.lineno += 1
+
+def t_error(t):
+        print("HTML Lexer: Illegal character " + t.value[0])
+        t.lexer.skip(1)